keystone_ui-preferences 0.8.0 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f37c2cf73a8559ec91481efe3e542f12f3cd88363dce8de5396a3b0b70ed63dd
-  data.tar.gz: d4335e98170923ea6920e602a99c6b55fb81be63236834f37b1ffbc4d1a5ebe1
+  metadata.gz: f764e1eedad8a815d7d8a0a92ff8f889d202a851f2c4bc063d7e1389867fb0f1
+  data.tar.gz: 4fd53a54a9c8b1e5609314e7bedfd3d6b6ed9ef0cc9a723e34a3bc6dbe72c0f4
 SHA512:
-  metadata.gz: 799cef36ff33e44be4fb48c58604e129e81002205518c2d2dc5f59a09c3a1e4f097c6d0fe8d4cbe1bf276774542150c9e6573e72208700d20aca41a64d589e77
-  data.tar.gz: 25617ce106f11bc189f115ad36ec2979884a90adb9f973bc703da55a11d8ab73a368f62fc15d76bc327cfd0c5333b5907125959ccd5a357146d89ede96b89fc5
+  metadata.gz: 9370930c96ddf66319f31e53f9ea08697367c72e6bce7782e216f83b7c3622857dad697d8241c76ca95e924069898300eb41f9d69dce1d507c818f690e59d8a5
+  data.tar.gz: aa97e42143a98e7d5f14858c0acd93eef460036dde1585092fca0b7da982a7957b69969fd33fc6638ee93d61ffa4dc8c4aa77b4601fda29865201bb19d922f04

data/README.md

@@ -6,7 +6,7 @@ A page gives a `ui_data_table` a `key:`. This gem saves each signed-in person's
 
 ## Installation
 
-Add the gem and run its install generator, which copies a migration for its table and the template picker script the appearance section uses:
+Add the gem and run its install generator, which copies a migration for its table and the appearance editor script the Appearance sections use:
 
 ```ruby
 gem "keystone_ui-preferences"
@@ -18,20 +18,22 @@ bin/rails generate keystone_ui:preferences:install
 bin/rails db:migrate
 ```
 
-The script lands at `app/javascript/controllers/keystone_ui/preferences/theme_settings_controller.js`. Register it in `app/javascript/controllers/index.js`:
+The script lands at `app/javascript/controllers/keystone_ui/preferences/appearance_editor_controller.js`. Register it in `app/javascript/controllers/index.js`:
 
 ```js
-import ThemeSettingsController from "./keystone_ui/preferences/theme_settings_controller"
-application.register("keystone-ui--preferences--theme-settings", ThemeSettingsController)
+import AppearanceEditorController from "./keystone_ui/preferences/appearance_editor_controller"
+application.register("keystone-ui--preferences--appearance-editor", AppearanceEditorController)
 ```
 
-After updating the gem, run its update generator to copy any migrations added since it was installed, and the template picker script when the app does not have it yet:
+After updating the gem, run its update generator to copy any migrations added since it was installed, and the appearance editor script when the app does not have it yet:
 
 ```bash
 bin/rails generate keystone_ui:preferences:update
 bin/rails db:migrate
 ```
 
+An app that installed an earlier version has a template picker script at `app/javascript/controllers/keystone_ui/preferences/theme_settings_controller.js` and a theme editor script at `app/javascript/controllers/keystone_ui/preferences/theme_editor_controller.js`. The appearance editor script replaces both. Register the appearance editor script as shown above. Then remove both old scripts and the two lines in `app/javascript/controllers/index.js` that register them as `keystone-ui--preferences--theme-settings` and `keystone-ui--preferences--theme-editor`. The update generator copies the new script and leaves both old scripts in place, so removing them is the app's own step.
+
 Mount the engine in `config/routes.rb`. A table's Columns menu saves to it:
 
 ```ruby
@@ -182,7 +184,7 @@ SettingsHub.section :appearance, area: :user, title: "Appearance",
   runs: "KeystoneUi::Preferences::PickAppearance"
 ```
 
-The section looks and behaves as keystone_ui-colors' colour settings do. It offers Default, the five named templates from keystone_ui-looks, the six preset themes from keystone_ui-looks and Custom, with an accent, a surface and a text colour picker under them. The person's own saved choice is selected, or Default when they have none, and the pickers show the colours drawn for them now. Picking a template sets the pickers to that template's colours at once, and changing a picker selects Custom, through the template picker script the install generator copies. Without the script the section still saves, and the form saves with a full page load, so it works in a Hotwire Native web view.
+The section looks and behaves as keystone_ui-colors' colour settings do. It offers Default, the five named templates from keystone_ui-looks, the six preset themes from keystone_ui-looks and Custom, with an accent, a surface and a text colour picker under them. The person's own saved choice is selected, or Default when they have none, and the pickers show the colours drawn for them now. Picking a template sets the pickers to that template's colours at once, and changing a picker selects Custom, through the appearance editor script the install generator copies. Without the script the section still saves, and the form saves with a full page load, so it works in a Hotwire Native web view.
 
 Saving a template keeps `{ "template_name": "forest" }` for that person under the `colours` key. Saving a preset theme keeps only its name, as `{ "preset_name": "harbor" }`. Saving Custom keeps `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }`. Saving Default removes the person's `colours` row, so the account's colours, or the app's defaults, apply again. The next page the person opens is drawn in the saved colours.
 
@@ -196,9 +198,17 @@ Shape and type settings are kept from the `:root` block only, as `{ "radius": {
 
 Each refusal below saves nothing and says why. A paste over 20,000 characters is refused before any of it is read. A paste containing `url(` or `@import` anywhere is refused. A paste with no shadcn colour role in a `:root` or `.dark` block is refused. A colour that fails the check is refused with a message naming the role and whether it is the light or dark value. A shape or type value that fails its check is refused with a message naming the setting, and so is a font list left with no font the app offers. A paste is refused with the same message as other colours while the account sets the colours for everyone.
 
-Under the paste box, a disclosure that starts closed lists every theme setting as its own field, named by its shadcn variable. Each colour role has a light and a dark keystone_ui colour picker, and the shadow colour has one, so a colour can be typed as hex, `rgb()`, `hsl()` or `oklch()`. Every other setting is a text field. The fields show the person's saved theme, so after a paste they hold the values that were read. Changing a field and pressing Save saves the fields as the person's theme, so a theme edited by hand stays the person's own. A field left blank leaves that setting out of the theme. Each value is checked and refused exactly as a pasted one is, with spaces around it removed first. The fields are saved only when they differ from the saved theme, so picking a template or changing the Accent, Surface or Text picker saves as before, and a paste sent in the same save wins over the fields. The disclosure needs no script, but the colour pickers need keystone_ui's colour picker script to take a typed colour.
+After Look and Mode, the section lists every theme setting as its own field, named by its shadcn variable. The fields are grouped as tweakcn's editor groups them, and each group is a keystone_ui disclosure that is closed when the section opens, so Save sits a short way below Mode. A group holding a setting that was refused on Save opens, so the refusal shows under that setting. Colors holds the colour roles in sets, each with its foreground beside it: Page (`background` and `foreground`), Primary, Secondary, Accent, Muted, Card, Popover, Destructive, Border, input and ring, Chart (`chart-1` to `chart-5`) and the eight Sidebar roles. Typography holds the sans, serif, mono and heading fonts, the four font weights and the letter spacing. Other holds the radius, the spacing, the border width and the six shadow settings. Each colour role shows its name once, such as `--primary`, with a light and a dark keystone_ui colour picker side by side under it, labelled Light and Dark, and the name labels the pair for a screen reader. The shadow colour has one picker, so a colour can be typed as hex, `rgb()`, `hsl()` or `oklch()`. Every other setting is a text field. Each font field suggests the fonts in `theme_fonts` and then the system fonts the gem offers, and still takes a typed list of several fonts. The fields show the person's saved theme, so after a paste they hold the values that were read. Changing a field and pressing Save saves the fields as the person's theme, so a theme edited by hand stays the person's own. A field left blank leaves that setting out of the theme. Each value is checked and refused exactly as a pasted one is, with spaces around it removed first. The fields are saved only when they differ from the saved theme, so picking a template or changing the Accent, Surface or Text picker saves as before, and a paste sent in the same save wins over the fields. The grouped fields and the font suggestions need no script, but the colour pickers need keystone_ui's colour picker script to take a typed colour.
+
+Each change to a theme field is drawn on the whole page before saving, through the appearance editor script the install generator copies. The script sets the setting's `--ks-*` variables on the page's root element, taking the list of which setting sets which variables from the same theme roles list the palette style tag writes from, so the page looks as it will after Save. A colour also sets the hover colour the style tag derives from `primary`, `secondary` and `destructive`, and a dark value sets only the `-dark` variables, so it shows only where the page is drawn dark. Colours, corner radius, spacing, border width, letter spacing, fonts, font weights and the shadow are drawn this way, and the shadow is drawn only once all six shadow settings hold a value, as the style tag writes it. A value the browser cannot draw leaves the page as it was, and it is still sent and checked on Save. Leaving the section without saving removes every variable the script set, so the next page, a Turbo visit included, is drawn in the saved theme. The script saves nothing and sends no request, so Save works as before, and without the script the fields still save.
+
+Beside the fields the section shows a preview of keystone_ui's own components: a card, a primary, a secondary and a danger button, a form with a text field and a select, a table, a line chart and a sidebar navigation list. The preview is drawn twice, once on a side marked light and once on a side marked dark, from sample data the gem holds. Each unsaved change the appearance editor script draws on the page also shows in the preview, so a dark value changes only the dark side, including while the page itself is drawn dark. A chart colour redraws the preview's line chart and a sidebar colour changes its navigation list. The preview names no font of its own and loads nothing from another site, so it draws in the fonts the theme sets. The layout follows the width the section is given, not the window's, so a section in half of a two-column settings page is laid out by that half. Where the section is 56rem wide or wider the fields and the preview sit side by side. Where it is at least 32rem wide but narrower than 56rem, the preview sits under the fields and Save. Where it is narrower than 32rem, such as on a phone, the section shows an Edit tab and a Preview tab from keystone_ui's tab switcher, and picking a tab shows its panel through the appearance editor script. The widths come from a CSS container query, which needs Safari 16, Chrome 105 or Firefox 110 or later. The preview needs keystone_ui-styles 0.23.0 or later, whose dark styles leave a side marked light drawn light inside a dark page, and keystone_ui 0.47.0 or later, whose line chart takes light or dark from the side it is drawn on and redraws when the theme's variables change, and it needs keystone_ui's tab switcher and line chart scripts registered. The preview is shown only alongside the theme fields, so it is not shown while the account sets the colours for everyone.
+
+The preset themes are option cards after the templates, each showing its light primary and secondary colours as swatches, and the person's saved preset is selected. Picking a preset card fills the theme fields with that preset's values, through the appearance editor script, which draws them on the whole page and the preview before saving, as it draws a field changed by hand. Once a preset is saved the fields show its values. Theme fields sent unchanged, holding the picked or the saved preset's values, save the picked card as before. Changing a field after picking a preset saves the fields as the person's own theme in place of the preset. Without the script, picking a card and pressing Save still saves the preset. A Reset button beside Save fills every theme field, the page and the preview from the picked preset card, or from the saved theme when no preset card is picked, and saves nothing. A setting the saved theme leaves out is emptied, and the page draws it from the saved theme again.
+
+Once a theme field differs from the saved theme, or the picked colour card, the Custom accent, surface or text picker, the picked Mode, the picked Look or, in the account's section, either Members choose switch differs from what the page opened with, or the paste box holds text, the appearance editor script asks before the change is lost. The page opens with the saved colour card, colours, Mode, Look and switches selected, after a refused save as well, so picking another and then the saved one again asks nothing. A paste box that is empty or holds only spaces sends nothing to save, so it asks nothing. Following a link out of the section holds the Turbo visit and opens a question on the page, from keystone_ui's modal, offering Leave without saving and Stay. Leave without saving carries on to the page the link was going to, and Stay closes the question. Because the question is part of the page, it shows in a Hotwire Native web view, where Turbo asks the page before it hands a link to the app. Closing or reloading the page asks the browser to show its own leave-page warning, which a Hotwire Native web view does not show. The native back button and tab bar of a Hotwire Native app leave the page without asking it, so they leave with no question, and so does the browser's back button. Saving, resetting to the saved theme, or changing nothing leaves with no question. The question is part of every Appearance section, the person's and the account's, including one that offers no colours. The question needs keystone_ui's modal script registered as `modal`.
 
-The preset themes are option cards after the templates, each showing its light primary and secondary colours as swatches, and the person's saved preset is selected. Picking a preset card fills the theme fields with that preset's values, through the template picker script, and once a preset is saved the fields show its values. Theme fields sent unchanged, holding the picked or the saved preset's values, save the picked card as before. Changing a field after picking a preset saves the fields as the person's own theme in place of the preset. Without the script, picking a card and pressing Save still saves the preset.
+After the theme fields an Export text area shows the fields' current values, saved or not, as a `:root` block with every light value and a `.dark` block with every dark value, in shadcn/ui's variable names, which is the shape the paste box reads. The appearance editor script writes it when the section opens and again on each change, in the browser, so it carries unsaved edits. The text area is read-only and has no name, so Save does not send it. A Copy button beside it copies the export through keystone_ui's clipboard script with no request to the server. Where the browser refuses to copy, as a Hotwire Native web view may, the button says to select the text, and the text area can be selected and copied by hand. A value holding a semicolon or a curly brace is left out, so it cannot end its block or add a setting. An exported theme pasted back into the paste box and saved keeps every value it held. Copying needs keystone_ui's clipboard script registered. The export is not offered in keystone's own `--ks-*` variable names.
 
 The `colours` key follows the account layouts above. While an account turns off members-choose for it, the section says the account sets the colours for everyone and offers no colours, and a save that sends colours anyway is refused with a message and saves nothing.
 
@@ -239,7 +249,7 @@ SettingsHub.section :account_appearance, area: :account, title: "Appearance",
   runs: "KeystoneUi::Preferences::PickAccountAppearance"
 ```
 
-The section looks and behaves as keystone_ui-colors' account picker does. It offers Default, the five named templates, the six preset themes and Custom with the three colour pickers, the paste box and the theme fields the person's section has, then the app's own look and every registered look, with the account's saved choices selected, or Default and the app's own look when it has none. Under them are two switches, one for whether members choose their own colours and one for whether members choose their own look. Both are on until an admin turns them off.
+The section looks and behaves as keystone_ui-colors' account picker does. It offers Default, the five named templates, the six preset themes and Custom with the three colour pickers and the paste box the person's section has, then the app's own look and every registered look, with the account's saved choices selected, or Default and the app's own look when it has none. Under them are two switches, one for whether members choose their own colours and one for whether members choose their own look. Both are on until an admin turns them off. The theme fields come last, grouped into Colors, Typography and Other and folded closed as in the person's section. The section is the same theme editor as the person's. Each change to a field and each picked preset card is drawn on the whole page before saving. The preview is laid out by the section's width as in the person's section: beside the fields from 56rem, under them from 32rem, and under Edit and Preview tabs below that. A Reset button beside Save fills the fields from the picked preset card, or from the account's saved theme, and saves nothing. The Export text area and its Copy button carry the fields' current values. Leaving the section without saving draws the next page in the admin's own saved theme. While the app turns off account colours the section shows no preview, no tabs and no Reset button.
 
 Saving keeps the account's colours under the `colours` key, as `{ "template_name": "forest" }`, `{ "preset_name": "harbor" }`, `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }` or a pasted or hand-edited theme, and its look under the `look` key, with each switch in that row's `members_choose` column. Saving Default keeps `{ "template_name": "default" }`, and saving the app's own look keeps an empty look, so neither removes the row its switch is on. The colours, a pasted theme, the theme fields and the look pass the same checks as a person's, the theme fields are saved only when they differ from the account's saved theme or the picked or saved preset, and a template, preset, colour, theme value or look that fails one is refused with a message, and nothing is saved. A save with no account is refused too.
 

data/app/javascript/keystone_ui/preferences/appearance_editor_controller.js

@@ -0,0 +1,248 @@
+import { Controller } from "@hotwired/stimulus"
+
+const THEME_FIELD = /^theme\[([^\]]+)\]\[(light|dark)\]$/
+const ENDS_DECLARATION = /[;{}]/
+const QUICK_CHOICES = "[name='template_name'], [name='accent'], [name='surface'], [name='text'], [name='mode'], [name='look'], [name='members_choose'], [name='members_choose_look']"
+const PROPERTY_FOR_KIND = { colour: "color", length: "width", letter_spacing: "letter-spacing", font_list: "font-family", weight: "font-weight" }
+const SHADOW_SETTINGS = ["shadow-offset-x", "shadow-offset-y", "shadow-blur", "shadow-spread", "shadow-color", "shadow-opacity"]
+const SHADOWS = ["--ks-shadow-surface", "--ks-shadow-overlay", "--ks-shadow-menu"]
+
+export default class extends Controller {
+  static targets = ["accentPicker", "surfacePicker", "textPicker", "customRadio", "templateLabel"]
+
+  #setVariables = new Set()
+  #loadedChoices = []
+  #heldUrl = null
+  #leaveAllowed = false
+
+  connect() {
+    this.#loadedChoices = this.#quickChoices()
+    this.colorPickerTargets().forEach(picker => picker.addEventListener("change", () => this.customColorChanged()))
+    this.#writeExport()
+    this.#drawUnsavedFields()
+  }
+
+  confirmLeave(event) {
+    if (!this.#hasUnsavedChanges()) return
+
+    event.preventDefault()
+    this.#heldUrl = event.detail.url
+    this.element.querySelector("[data-leave-question] [data-modal-target='backdrop']").classList.remove("hidden")
+  }
+
+  warnBeforeUnload(event) {
+    if (this.#hasUnsavedChanges()) event.preventDefault()
+  }
+
+  save() {
+    this.#leaveAllowed = true
+  }
+
+  leave() {
+    this.#leaveAllowed = true
+    this.element.ownerDocument.defaultView.Turbo.visit(this.#heldUrl)
+  }
+
+  disconnect() {
+    this.#removeSetVariables()
+  }
+
+  apply({ target: { name, value } }) {
+    this.#writeExport()
+    const field = name.match(THEME_FIELD)
+    if (!field) return
+
+    const [, role, side] = field
+    if (SHADOW_SETTINGS.includes(role)) return this.#drawShadow()
+
+    const { kind, variables, hover } = this.#roles()[role]
+    const suffix = side === "dark" ? "-dark" : ""
+    if (value === "") {
+      [...variables, hover].filter(Boolean).forEach(variable => this.#remove(`${variable}${suffix}`))
+      return
+    }
+    if (!CSS.supports(PROPERTY_FOR_KIND[kind], value)) return
+
+    variables.forEach(variable => this.#set(`${variable}${suffix}`, value))
+    if (hover) this.#set(`${hover}${suffix}`, `color-mix(in oklab, ${value} 85%, white)`)
+  }
+
+  colorPickerTargets() {
+    return [
+      this.hasAccentPickerTarget && this.accentPickerTarget,
+      this.hasSurfacePickerTarget && this.surfacePickerTarget,
+      this.hasTextPickerTarget && this.textPickerTarget
+    ].filter(Boolean)
+  }
+
+  selectTemplate(event) {
+    const input = event.currentTarget
+    const label = input.closest("[data-template]")
+    const accentHex = input.dataset.accentHex
+    const surfaceHex = input.dataset.surfaceHex
+    const textHex = input.dataset.textHex
+
+    this.setPickerValue(this.accentPickerTarget, accentHex)
+    this.setPickerValue(this.surfacePickerTarget, surfaceHex)
+    this.setPickerValue(this.textPickerTarget, textHex)
+    this.#restoreSavedTheme()
+
+    this.highlightTemplate(label.dataset.template)
+  }
+
+  selectPreset(event) {
+    const input = event.currentTarget
+    const theme = JSON.parse(input.dataset.theme)
+
+    Object.entries(theme).forEach(([role, sides]) => {
+      Object.entries(sides).forEach(([side, value]) => this.setThemeField(`theme[${role}][${side}]`, value))
+    })
+
+    this.highlightTemplate(input.closest("[data-template]").dataset.template)
+  }
+
+  reset() {
+    const preset = this.element.querySelector("input[name='template_name'][data-theme]:checked")
+    this.#fillThemeFields(preset ? JSON.parse(preset.dataset.theme) : this.#savedTheme())
+  }
+
+  setThemeField(name, value) {
+    const field = this.element.querySelector(`[name="${name}"]`)
+    if (!field) return
+
+    const picker = field.closest("[data-controller~='color-picker']")
+    if (picker) {
+      this.setPickerValue(picker, value)
+    } else {
+      field.value = value
+    }
+    field.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+
+  showPanel({ detail: { index } }) {
+    this.element.querySelectorAll("[data-editor-panel]").forEach((panel, place) => panel.toggleAttribute("data-shown", place === index))
+  }
+
+  customColorChanged() {
+    if (this.hasCustomRadioTarget) this.customRadioTarget.checked = true
+    this.#restoreSavedTheme()
+    this.highlightTemplate("custom")
+  }
+
+  highlightTemplate(selected) {
+    this.templateLabelTargets.forEach(label => {
+      const border = label.querySelector("span")
+      if (label.dataset.template === selected) {
+        border.classList.remove("border-transparent")
+        border.classList.add("border-accent-500")
+      } else {
+        border.classList.remove("border-accent-500")
+        border.classList.add("border-transparent")
+      }
+    })
+  }
+
+  setPickerValue(wrapper, hex) {
+    const input = wrapper.querySelector("input[type='hidden']")
+    const swatch = wrapper.querySelector("[data-color-picker-target='swatch']")
+    const hexLabel = wrapper.querySelector("[data-color-picker-target='hexLabel']")
+    const text = wrapper.querySelector("[data-color-picker-target='text']")
+
+    if (input) input.value = hex
+    if (swatch) swatch.style.backgroundColor = hex
+    if (hexLabel) hexLabel.textContent = hex
+    if (text) text.value = hex
+  }
+
+  #restoreSavedTheme() {
+    this.#fillThemeFields(this.#savedTheme())
+    this.#removeSetVariables()
+  }
+
+  #removeSetVariables() {
+    this.#setVariables.forEach(variable => this.#rootStyle().removeProperty(variable))
+    this.#setVariables.clear()
+  }
+
+  #fillThemeFields(theme) {
+    this.element.querySelectorAll("[name^='theme[']").forEach(({ name }) => {
+      const [, role, side] = name.match(THEME_FIELD)
+      this.setThemeField(name, theme[role]?.[side] ?? "")
+    })
+  }
+
+  #writeExport() {
+    const exported = this.element.querySelector("[data-theme-export]")
+    if (!exported) return
+
+    const roles = Object.keys(this.#roles())
+    const block = side => roles.flatMap(role => {
+      const field = this.element.querySelector(`[name="theme[${role}][${side}]"]`)
+      return field?.value && !ENDS_DECLARATION.test(field.value) ? [`  --${role}: ${field.value};\n`] : []
+    }).join("")
+    const css = `:root {\n${block("light")}}\n\n.dark {\n${block("dark")}}\n`
+    exported.value = css
+    this.element.querySelector("[data-controller~='clipboard']").dataset.clipboardText = css
+  }
+
+  #drawShadow() {
+    const settings = SHADOW_SETTINGS.map(setting => this.element.querySelector(`[name="theme[${setting}][light]"]`)?.value)
+    const [x, y, blur, spread, colour, opacity] = settings
+    const shadow = `${x} ${y} ${blur} ${spread} color-mix(in srgb, ${colour} calc(${opacity} * 100%), transparent)`
+    if (settings.every(Boolean) && CSS.supports("box-shadow", shadow)) {
+      SHADOWS.forEach(variable => this.#set(variable, shadow))
+    } else {
+      SHADOWS.forEach(variable => this.#remove(variable))
+    }
+  }
+
+  #drawUnsavedFields() {
+    this.#unsavedFields().forEach(field => this.apply({ target: field }))
+  }
+
+  #unsavedFields() {
+    const saved = this.#savedTheme()
+    return [...this.element.querySelectorAll("[name^='theme[']")].filter(field => {
+      const [, role, side] = field.name.match(THEME_FIELD)
+      return field.value !== (saved[role]?.[side] ?? "")
+    })
+  }
+
+  #savedTheme() {
+    return JSON.parse(this.element.querySelector("[data-saved-theme]")?.dataset.savedTheme ?? "{}")
+  }
+
+  #hasUnsavedChanges() {
+    return !this.#leaveAllowed && (this.#unsavedFields().length > 0 || this.#quickChoicesChanged() || this.#pasteTyped())
+  }
+
+  #quickChoicesChanged() {
+    return this.#quickChoices().some((choice, place) => choice !== this.#loadedChoices[place])
+  }
+
+  #pasteTyped() {
+    return [...this.element.querySelectorAll("[name='pasted_theme']")].some(({ value }) => value.trim() !== "")
+  }
+
+  #quickChoices() {
+    return [...this.element.querySelectorAll(QUICK_CHOICES)].map(field => (["radio", "checkbox"].includes(field.type) ? field.checked : field.value))
+  }
+
+  #roles() {
+    return JSON.parse(this.element.querySelector("[data-theme-roles]").dataset.themeRoles)
+  }
+
+  #set(variable, value) {
+    this.#rootStyle().setProperty(variable, value)
+    this.#setVariables.add(variable)
+  }
+
+  #remove(variable) {
+    this.#rootStyle().removeProperty(variable)
+    this.#setVariables.delete(variable)
+  }
+
+  #rootStyle() {
+    return this.element.ownerDocument.documentElement.style
+  }
+}

data/app/models/keystone_ui/preferences/sent_theme.rb

@@ -25,15 +25,15 @@ module KeystoneUi
       end
 
       def editing?
-        typed.any? && [ saved["theme"], preset_theme(saved["preset_name"]), preset_theme(@values[:template_name]) ].exclude?(typed)
+        typed.any? && [ saved["theme"], *preset_themes ].exclude?(typed)
       end
 
-      def saved
-        @saved ||= @saved_colours.call
+      def preset_themes
+        KeystoneUi::Looks::Themes.names.map { |name| KeystoneUi::Looks::Themes[name][:theme] }
       end
 
-      def preset_theme(name)
-        KeystoneUi::Looks::Themes[name][:theme] if KeystoneUi::Looks::Themes.names.map(&:to_s).include?(name.to_s)
+      def saved
+        @saved ||= @saved_colours.call
       end
 
       def typed

data/app/models/keystone_ui/preferences/theme_roles.rb

@@ -56,6 +56,31 @@ module KeystoneUi
         "shadow-offset-y" => { kind: :signed_length, variables: [] }
       }.freeze
 
+      GROUPS = {
+        "Colors" => {
+          "Page" => %w[background foreground],
+          "Primary" => %w[primary primary-foreground],
+          "Secondary" => %w[secondary secondary-foreground],
+          "Accent" => %w[accent accent-foreground],
+          "Muted" => %w[muted muted-foreground],
+          "Card" => %w[card card-foreground],
+          "Popover" => %w[popover popover-foreground],
+          "Destructive" => %w[destructive destructive-foreground],
+          "Border, input and ring" => %w[border input ring],
+          "Chart" => %w[chart-1 chart-2 chart-3 chart-4 chart-5],
+          "Sidebar" => %w[sidebar sidebar-foreground sidebar-primary sidebar-primary-foreground sidebar-accent sidebar-accent-foreground sidebar-border sidebar-ring]
+        },
+        "Typography" => {
+          "Fonts" => %w[font-sans font-serif font-mono font-heading],
+          "Font weights" => %w[font-weight-normal font-weight-medium font-weight-strong font-weight-heading],
+          "Letter spacing" => %w[letter-spacing]
+        },
+        "Other" => {
+          "Shape" => %w[radius spacing border-width],
+          "Shadow" => %w[shadow-color shadow-opacity shadow-blur shadow-spread shadow-offset-x shadow-offset-y]
+        }
+      }.freeze
+
       def self.names
         ROLES.keys
       end

data/app/views/keystone_ui/preferences/settings/_account_appearance.html.erb

@@ -5,16 +5,18 @@
   offers_colours = KeystoneUi::Preferences.configuration.account_colors
   offers_look = KeystoneUi::Preferences.configuration.account_looks && KeystoneUi.configuration.looks.any?
   drawn = KeystoneUi::Preferences::AppearanceChoice.new(person: account, account: nil).colours
+  sent = request.get? ? {} : local_assigns[:selection].to_h
 %>
 
 <% if !offers_colours && !offers_look %>
   <%= ui_alert(message: "This app does not let accounts choose their colours or look.") %>
 <% else %>
+<% editor = capture do %>
 <%= ui_panel(padding: :lg) do %>
-  <%= form_with(url: submit_url, method: :patch, data: { turbo: false, controller: "keystone-ui--preferences--theme-settings" }) do %>
+  <%= form_with(url: submit_url, method: :patch, data: { turbo: false }) do %>
     <div style="display: flex; flex-direction: column; gap: 2rem;">
       <% if offers_colours %>
-        <%= render partial: "keystone_ui/preferences/settings/colour_choices", locals: { saved: saved, drawn: drawn, pastes: true, presets: true, own_theme_hint: "The account's current choice is its own theme." } %>
+        <%= render partial: "keystone_ui/preferences/settings/colour_choices", locals: { saved: saved, drawn: drawn, pastes: true, presets: true, own_theme_hint: "The account's current choice is its own theme.", id_prefix: "account-appearance", sent_paste: sent[:pasted_theme] } %>
       <% end %>
 
       <% if offers_look %>
@@ -32,10 +34,20 @@
         <% end %>
       <% end %>
 
-      <div>
+      <% if offers_colours %>
+        <%= render partial: "keystone_ui/preferences/settings/theme_settings", locals: { saved: saved, id_prefix: "account-appearance", sent_theme: sent[:theme], sent_paste: sent[:pasted_theme] } %>
+      <% end %>
+
+      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
         <%= ui_button(label: "Save", type: :submit) %>
+        <% if offers_colours %>
+          <%= ui_button(label: "Reset", variant: :secondary, type: :button, data: { action: "keystone-ui--preferences--appearance-editor#reset" }) %>
+        <% end %>
       </div>
     </div>
   <% end %>
 <% end %>
 <% end %>
+
+<%= render partial: "keystone_ui/preferences/settings/editor_layout", locals: { editor: editor, previews: offers_colours } %>
+<% end %>

data/app/views/keystone_ui/preferences/settings/_appearance.html.erb

@@ -5,6 +5,7 @@
   appearance = KeystoneUi::Preferences::AppearanceChoice.new(person: person, account: account)
   drawn = appearance.colours
   saved = KeystoneUi::Preferences::ComponentPreference.find_by(owner: person, component_key: "colours")&.value || { "template_name" => "default" }
+  sent = request.get? ? {} : local_assigns[:selection].to_h
   saved_look = KeystoneUi::Preferences::ComponentPreference.find_by(owner: person, component_key: "look")&.value.to_h["look"]
 %>
 
@@ -12,29 +13,40 @@
   <%= ui_alert(message: "Your account sets the colours for everyone.") %>
 <% end %>
 
-<%= ui_panel(padding: :lg) do %>
-  <%= form_with(url: submit_url, method: :patch, data: { turbo: false, controller: "keystone-ui--preferences--theme-settings" }) do %>
-    <div style="display: flex; flex-direction: column; gap: 2rem;">
-      <% if chooses_colours %>
-        <%= render partial: "keystone_ui/preferences/settings/colour_choices", locals: { saved: saved, drawn: drawn, pastes: true, presets: true } %>
-      <% end %>
+<% editor = capture do %>
+  <%= ui_panel(padding: :lg) do %>
+    <%= form_with(url: submit_url, method: :patch, data: { turbo: false }) do %>
+      <div style="display: flex; flex-direction: column; gap: 2rem;">
+        <% if chooses_colours %>
+          <%= render partial: "keystone_ui/preferences/settings/colour_choices", locals: { saved: saved, drawn: drawn, pastes: true, presets: true, sent_paste: sent[:pasted_theme] } %>
+        <% end %>
 
-      <% if appearance.person_chooses_look? && KeystoneUi.configuration.looks.any? %>
-        <%= render partial: "keystone_ui/preferences/settings/look_choices", locals: { saved_look: saved_look } %>
-      <% end %>
+        <% if appearance.person_chooses_look? && KeystoneUi.configuration.looks.any? %>
+          <%= render partial: "keystone_ui/preferences/settings/look_choices", locals: { saved_look: saved_look } %>
+        <% end %>
+
+        <%= ui_section(title: "Mode", spacing: :sm) do %>
+          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+            <% KeystoneUi::ThemeChoice::MODES.each do |mode| %>
+              <% next if mode == "custom" && !(chooses_colours || appearance.custom_offered?) %>
+              <%= ui_radio_card(name: "mode", value: mode, label: mode.capitalize, checked: appearance.mode == mode) %>
+            <% end %>
+          </div>
+        <% end %>
+
+        <% if chooses_colours %>
+          <%= render partial: "keystone_ui/preferences/settings/theme_settings", locals: { saved: saved, sent_theme: sent[:theme], sent_paste: sent[:pasted_theme] } %>
+        <% end %>
 
-      <%= ui_section(title: "Mode", spacing: :sm) do %>
         <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
-          <% KeystoneUi::ThemeChoice::MODES.each do |mode| %>
-            <% next if mode == "custom" && !(chooses_colours || appearance.custom_offered?) %>
-            <%= ui_radio_card(name: "mode", value: mode, label: mode.capitalize, checked: appearance.mode == mode) %>
+          <%= ui_button(label: "Save", type: :submit) %>
+          <% if chooses_colours %>
+            <%= ui_button(label: "Reset", variant: :secondary, type: :button, data: { action: "keystone-ui--preferences--appearance-editor#reset" }) %>
           <% end %>
         </div>
-      <% end %>
-
-      <div>
-        <%= ui_button(label: "Save", type: :submit) %>
       </div>
-    </div>
+    <% end %>
   <% end %>
 <% end %>
+
+<%= render partial: "keystone_ui/preferences/settings/editor_layout", locals: { editor: editor, previews: chooses_colours } %>

data/app/views/keystone_ui/preferences/settings/_colour_choices.html.erb

@@ -3,7 +3,6 @@
   palette_hex = ->(colour, palette) { colour.to_s.start_with?("#") ? colour.to_s : palette.call(colour)[500] }
   templates = { "default" => { accent: configuration.default_accent, surface: configuration.default_surface, text: configuration.default_text, label: "Default" } }
   KeystoneUi::Looks::Templates.all.each { |name, template| templates[name.to_s] = template }
-  saved_preset = KeystoneUi::Looks::Themes.all.find { |name, _preset| name.to_s == saved["preset_name"] }&.last
 %>
 
 <%= ui_section(title: "Theme", spacing: :sm) do %>
@@ -16,13 +15,13 @@
         value: name,
         selected: saved["template_name"] == name,
         input_data: {
-          action: "keystone-ui--preferences--theme-settings#selectTemplate",
+          action: "keystone-ui--preferences--appearance-editor#selectTemplate",
           "accent-hex": accent_hex,
           "surface-hex": surface_hex,
           "text-hex": template[:text]
         },
         label_data: {
-          "keystone-ui--preferences--theme-settings-target": "templateLabel",
+          "keystone-ui--preferences--appearance-editor-target": "templateLabel",
           template: name
         }
       ) do %>
@@ -38,11 +37,11 @@
           value: name.to_s,
           selected: saved["preset_name"] == name.to_s,
           input_data: {
-            action: "keystone-ui--preferences--theme-settings#selectPreset",
+            action: "keystone-ui--preferences--appearance-editor#selectPreset",
             theme: preset[:theme].to_json
           },
           label_data: {
-            "keystone-ui--preferences--theme-settings-target": "templateLabel",
+            "keystone-ui--preferences--appearance-editor-target": "templateLabel",
             template: name.to_s
           }
         ) do %>
@@ -57,10 +56,10 @@
       value: "",
       selected: saved["template_name"].blank? && !saved.key?("theme") && !saved.key?("preset_name"),
       input_data: {
-        "keystone-ui--preferences--theme-settings-target": "customRadio"
+        "keystone-ui--preferences--appearance-editor-target": "customRadio"
       },
       label_data: {
-        "keystone-ui--preferences--theme-settings-target": "templateLabel",
+        "keystone-ui--preferences--appearance-editor-target": "templateLabel",
         template: "custom"
       }
     ) do %>
@@ -71,25 +70,29 @@
     <p class="ks-hint"><%= local_assigns.fetch(:own_theme_hint, "Your current choice is your own theme.") %></p>
   <% end %>
   <% if local_assigns[:pastes] %>
-    <%= ui_form_field(attribute: "pasted_theme", label: "Paste a theme", type: :textarea, hint: "A :root block and a .dark block in shadcn/ui's variable names, as tweakcn and shadcn's theme pages export them.") %>
-    <%= render partial: "keystone_ui/preferences/settings/theme_settings", locals: { theme: saved_preset ? saved_preset[:theme] : saved["theme"].to_h } %>
+    <% id_prefix = local_assigns.fetch(:id_prefix, "appearance") %>
+    <div class="<%= Keystone::Ui::FormFieldComponent::WRAPPER_CLASSES %>">
+      <%= label_tag "#{id_prefix}-pasted-theme", "Paste a theme", class: Keystone::Ui::FormFieldComponent::LABEL_CLASSES %>
+      <%= text_area_tag "pasted_theme", local_assigns[:sent_paste], id: "#{id_prefix}-pasted-theme", rows: 3, class: Keystone::Ui::TextareaComponent::BASE_CLASSES %>
+      <p class="<%= Keystone::Ui::FormFieldComponent::HINT_CLASSES %>">A :root block and a .dark block in shadcn/ui's variable names, as tweakcn and shadcn's theme pages export them.</p>
+    </div>
   <% end %>
 <% end %>
 
 <%= ui_section(title: "Accent Color", spacing: :sm) do %>
-  <div data-keystone-ui--preferences--theme-settings-target="accentPicker">
+  <div data-keystone-ui--preferences--appearance-editor-target="accentPicker">
     <%= ui_color_picker(name: "accent", value: palette_hex.call(drawn[:accent], KeystoneUi::Looks::Palettes.method(:accent))) %>
   </div>
 <% end %>
 
 <%= ui_section(title: "Surface", spacing: :sm) do %>
-  <div data-keystone-ui--preferences--theme-settings-target="surfacePicker">
+  <div data-keystone-ui--preferences--appearance-editor-target="surfacePicker">
     <%= ui_color_picker(name: "surface", value: palette_hex.call(drawn[:surface], KeystoneUi::Looks::Palettes.method(:surface))) %>
   </div>
 <% end %>
 
 <%= ui_section(title: "Text Color", spacing: :sm) do %>
-  <div data-keystone-ui--preferences--theme-settings-target="textPicker">
+  <div data-keystone-ui--preferences--appearance-editor-target="textPicker">
     <%= ui_color_picker(name: "text", value: drawn[:text]) %>
   </div>
 <% end %>

data/app/views/keystone_ui/preferences/settings/_editor_layout.html.erb

@@ -0,0 +1,35 @@
+<div data-appearance-editor data-controller="keystone-ui--preferences--appearance-editor" data-action="tab-switcher:change->keystone-ui--preferences--appearance-editor#showPanel submit->keystone-ui--preferences--appearance-editor#save turbo:before-visit@document->keystone-ui--preferences--appearance-editor#confirmLeave beforeunload@window->keystone-ui--preferences--appearance-editor#warnBeforeUnload">
+  <% if previews %>
+    <style>
+      [data-editor-panel]:not([data-shown]) { display: none; }
+      [data-editor-space] { container-type: inline-size; }
+      @container (min-width: 32rem) {
+        [data-editor-space] .ks-tab-bar { display: none; }
+        [data-editor-panels] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
+        [data-editor-panel]:not([data-shown]) { display: block; }
+      }
+      @container (min-width: 56rem) {
+        [data-editor-panels] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
+      }
+    </style>
+    <div data-editor-space>
+      <%= ui_tab_switcher(tabs: %w[Edit Preview]) do %>
+        <div data-editor-panels>
+          <div data-editor-panel data-shown><%= editor %></div>
+          <div data-editor-panel><%= render partial: "keystone_ui/preferences/settings/theme_preview" %></div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <%= editor %>
+  <% end %>
+  <div data-leave-question>
+    <%= ui_modal(title: "Leave without saving?", size: :sm) do %>
+      <p>Your changes are not saved yet.</p>
+      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;">
+        <%= ui_button(label: "Leave without saving", variant: :danger, type: :button, data: { action: "keystone-ui--preferences--appearance-editor#leave" }) %>
+        <%= ui_button(label: "Stay", variant: :secondary, type: :button, data: { action: "modal#close" }) %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/keystone_ui/preferences/settings/_theme_preview.html.erb

@@ -0,0 +1,34 @@
+<div data-theme-preview style="display: flex; flex-direction: column; gap: 1.5rem;">
+  <% %w[light dark].each do |side| %>
+    <div data-theme="<%= side %>">
+      <%= ui_panel do %>
+        <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+          <%= ui_card(title: "Quarterly review", summary: "Revenue grew in every region this quarter.", link: "#", cta: "Open") %>
+          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+            <%= ui_button(label: "Save", type: :button) %>
+            <%= ui_button(label: "Cancel", variant: :secondary, type: :button) %>
+            <%= ui_button(label: "Delete", variant: :danger, type: :button) %>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 1rem;">
+            <%= ui_form_field(attribute: "preview_name", label: "Name", value: "Northwind Traders") %>
+            <%= ui_form_field(attribute: "preview_region", label: "Region", type: :select, options: [ [ "North", "north" ], [ "South", "south" ] ], value: "north", required: true) %>
+          </div>
+          <%= ui_data_table(
+                items: [ { customer: "Northwind Traders", region: "North", total: "$12,400" }, { customer: "Harbor Supply", region: "South", total: "$8,950" }, { customer: "Fern & Co", region: "North", total: "$4,120" } ],
+                columns: [ { customer: "Customer" }, { region: "Region" }, { total: "Total" } ]
+              ) %>
+          <%= ui_line_chart(
+                labels: %w[Jan Feb Mar Apr May Jun],
+                series: [ { name: "This year", data: [ 12, 19, 15, 24, 22, 30 ] }, { name: "Last year", data: [ 10, 14, 13, 17, 19, 21 ] } ],
+                height: :sm
+              ) %>
+          <nav class="ks-sidebar" aria-label="Sample navigation">
+            <% [ "Dashboard", "Customers", "Reports" ].each_with_index do |label, index| %>
+              <a href="#" class="<%= [ Keystone::Ui::NavigationComponent::SIDEBAR_TAB_CLASSES, (Keystone::Ui::NavigationComponent::ACTIVE_CLASS if index.zero?) ].compact.join(" ") %>"><%= label %></a>
+            <% end %>
+          </nav>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/keystone_ui/preferences/settings/_theme_settings.html.erb

@@ -1,17 +1,61 @@
-<%= ui_disclosure do |disclosure| %>
-  <% disclosure.with_summary { "Change each theme setting" } %>
-  <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
-    <% KeystoneUi::Preferences::ThemeRoles::ROLES.each do |name, role| %>
-      <% (role[:kind] == :colour ? %w[light dark] : %w[light]).each do |side| %>
-        <% field_name = "theme[#{name}][#{side}]" %>
-        <% value = theme.dig(name, side).to_s %>
-        <% label = role[:kind] == :colour ? "--#{name}, #{side}" : "--#{name}" %>
-        <% if %i[colour shadow_colour].include?(role[:kind]) %>
-          <%= ui_color_picker(name: field_name, value: value, label: label) %>
-        <% else %>
-          <%= ui_form_field(attribute: field_name, label: label, value: value) %>
-        <% end %>
+<% saved_preset = KeystoneUi::Looks::Themes.all.find { |name, _preset| name.to_s == saved["preset_name"] }&.last %>
+<% theme = saved_preset ? saved_preset[:theme] : saved["theme"].to_h %>
+<% shown = local_assigns[:sent_theme] || theme %>
+<% check = KeystoneUi::Preferences::CheckedTheme.new(local_assigns[:sent_paste].present? ? {} : local_assigns[:sent_theme].to_h) %>
+<% id_prefix = local_assigns.fetch(:id_prefix, "appearance") %>
+<% fonts_id = "#{id_prefix}-theme-fonts" %>
+<% roles = KeystoneUi::Preferences::ThemeRoles::ROLES.to_h { |name, role| [ name, role.merge(hover: KeystoneUi::Preferences::ThemeCss::HOVERS[name]).compact ] } %>
+<div data-action="change->keystone-ui--preferences--appearance-editor#apply input->keystone-ui--preferences--appearance-editor#apply" data-theme-roles="<%= roles.to_json %>" data-saved-theme="<%= theme.to_json %>" style="display: flex; flex-direction: column; gap: 2rem;">
+  <% KeystoneUi::Preferences::ThemeRoles::GROUPS.each do |group, sets| %>
+    <%= ui_disclosure(open: sets.values.flatten.include?(check.failing_setting)) do |disclosure| %>
+      <% disclosure.with_summary do %><h2 class="<%= Keystone::Ui::SectionComponent::TITLE_CLASSES %>"><%= group %></h2><% end %>
+      <div style="display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1rem;">
+      <% sets.each do |set, names| %>
+        <fieldset style="border: 0; padding: 0; margin: 0; min-width: 0;">
+          <legend class="<%= Keystone::Ui::FormFieldComponent::LABEL_CLASSES %>"><%= set %></legend>
+          <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+            <% names.each do |name| %>
+              <% role = KeystoneUi::Preferences::ThemeRoles::ROLES.fetch(name) %>
+              <% if role[:kind] == :colour %>
+                <% name_id = "#{id_prefix}-theme-#{name}-name" %>
+                <div role="group" aria-labelledby="<%= name_id %>" style="display: flex; flex-direction: column; gap: 0.5rem;">
+                <span id="<%= name_id %>" class="<%= Keystone::Ui::FormFieldComponent::LABEL_CLASSES %>">--<%= name %></span>
+                <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+              <% end %>
+              <% (role[:kind] == :colour ? %w[light dark] : %w[light]).each do |side| %>
+                <% field_name = "theme[#{name}][#{side}]" %>
+                <% value = shown.dig(name, side).to_s %>
+                <% label = role[:kind] == :colour ? side.capitalize : "--#{name}" %>
+                <% if %i[colour shadow_colour].include?(role[:kind]) && (value.empty? || value.match?(KeystoneUi::Preferences::CheckedTheme::COLOUR)) %>
+                  <%= ui_color_picker(name: field_name, value: value, label: label) %>
+                <% else %>
+                  <% field_id = "#{id_prefix}-#{field_name.parameterize}" %>
+                  <div class="<%= Keystone::Ui::FormFieldComponent::WRAPPER_CLASSES %>">
+                    <%= label_tag field_id, label, class: Keystone::Ui::FormFieldComponent::LABEL_CLASSES %>
+                    <%= text_field_tag field_name, value, id: field_id, class: Keystone::Ui::InputComponent::BASE_CLASSES, list: (fonts_id if role[:kind] == :font_list) %>
+                  </div>
+                <% end %>
+              <% end %>
+              <% if role[:kind] == :colour %></div><% end %>
+              <% if name == check.failing_setting %>
+                <p class="<%= Keystone::Ui::FormFieldComponent::ERROR_CLASSES %>"><%= check.refusal.message %></p>
+              <% end %>
+              <% if role[:kind] == :colour %></div><% end %>
+            <% end %>
+          </div>
+        </fieldset>
       <% end %>
+      </div>
     <% end %>
+  <% end %>
+  <div class="<%= Keystone::Ui::FormFieldComponent::WRAPPER_CLASSES %>">
+    <%= label_tag "#{id_prefix}-theme-export", "Export", class: Keystone::Ui::FormFieldComponent::LABEL_CLASSES %>
+    <%= content_tag :textarea, nil, id: "#{id_prefix}-theme-export", readonly: true, rows: 8, class: Keystone::Ui::TextareaComponent::BASE_CLASSES, data: { theme_export: "" } %>
+    <div><%= ui_copy_button(text: "", error_message: "Select the text to copy it") %></div>
   </div>
-<% end %>
+  <datalist id="<%= fonts_id %>">
+    <% (KeystoneUi::Preferences.configuration.theme_fonts + KeystoneUi::Preferences::CheckedTheme::SYSTEM_FONTS).each do |font| %>
+      <option value="<%= font %>"></option>
+    <% end %>
+  </datalist>
+</div>

data/lib/generators/keystone_ui/preferences/install/install_generator.rb

@@ -11,7 +11,7 @@ module KeystoneUi
 
         source_root File.expand_path("templates", __dir__)
 
-        desc "Installs KeystoneUi::Preferences: copies its migration and its template picker script."
+        desc "Installs KeystoneUi::Preferences: copies its migration and its appearance editor script."
 
         def copy_migration
           migration_template(
@@ -20,9 +20,9 @@ module KeystoneUi
           )
         end
 
-        def copy_template_picker_script
-          script = File.expand_path("../../../../../app/javascript/keystone_ui/preferences/theme_settings_controller.js", __dir__)
-          create_file "app/javascript/controllers/keystone_ui/preferences/theme_settings_controller.js", File.read(script)
+        def copy_appearance_editor_script
+          script = File.expand_path("../../../../../app/javascript/keystone_ui/preferences/appearance_editor_controller.js", __dir__)
+          create_file "app/javascript/controllers/keystone_ui/preferences/appearance_editor_controller.js", File.read(script)
         end
       end
     end

data/lib/generators/keystone_ui/preferences/update/update_generator.rb

@@ -11,7 +11,7 @@ module KeystoneUi
 
         source_root File.expand_path("templates", __dir__)
 
-        desc "Updates KeystoneUi::Preferences: copies migrations added since it was installed and the template picker script when the app has none."
+        desc "Updates KeystoneUi::Preferences: copies migrations added since it was installed and the appearance editor script when the app has none."
 
         def copy_remove_extra_owner_index_migration
           migration_template(
@@ -27,11 +27,11 @@ module KeystoneUi
           )
         end
 
-        def copy_template_picker_script
-          copy = "app/javascript/controllers/keystone_ui/preferences/theme_settings_controller.js"
+        def copy_appearance_editor_script
+          copy = "app/javascript/controllers/keystone_ui/preferences/appearance_editor_controller.js"
           return if File.exist?(File.join(destination_root, copy))
 
-          create_file copy, File.read(File.expand_path("../../../../../app/javascript/keystone_ui/preferences/theme_settings_controller.js", __dir__))
+          create_file copy, File.read(File.expand_path("../../../../../app/javascript/keystone_ui/preferences/appearance_editor_controller.js", __dir__))
         end
       end
     end

data/lib/keystone_ui/preferences/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Preferences
-    VERSION = "0.8.0"
+    VERSION = "0.10.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-preferences
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.10.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.43.0
+        version: 0.47.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.43.0
+        version: 0.47.0
 - !ruby/object:Gem::Dependency
   name: keystone_ui-looks
   requirement: !ruby/object:Gem::Requirement
@@ -43,14 +43,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.18.0
+        version: 0.23.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.18.0
+        version: 0.23.0
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
@@ -107,7 +107,7 @@ files:
 - app/controllers/concerns/keystone_ui/preferences/component_preferences.rb
 - app/controllers/keystone_ui/preferences/application_controller.rb
 - app/controllers/keystone_ui/preferences/component_preferences_controller.rb
-- app/javascript/keystone_ui/preferences/theme_settings_controller.js
+- app/javascript/keystone_ui/preferences/appearance_editor_controller.js
 - app/models/keystone_ui/preferences/appearance_choice.rb
 - app/models/keystone_ui/preferences/application_record.rb
 - app/models/keystone_ui/preferences/checked_theme.rb
@@ -130,9 +130,11 @@ files:
 - app/views/keystone_ui/preferences/settings/_account_layouts.html.erb
 - app/views/keystone_ui/preferences/settings/_appearance.html.erb
 - app/views/keystone_ui/preferences/settings/_colour_choices.html.erb
+- app/views/keystone_ui/preferences/settings/_editor_layout.html.erb
 - app/views/keystone_ui/preferences/settings/_look_choices.html.erb
 - app/views/keystone_ui/preferences/settings/_navigation_order.html.erb
 - app/views/keystone_ui/preferences/settings/_navigation_placement.html.erb
+- app/views/keystone_ui/preferences/settings/_theme_preview.html.erb
 - app/views/keystone_ui/preferences/settings/_theme_settings.html.erb
 - config/routes.rb
 - lib/generators/keystone_ui/preferences/install/install_generator.rb

data/app/javascript/keystone_ui/preferences/theme_settings_controller.js

@@ -1,84 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["accentPicker", "surfacePicker", "textPicker", "customRadio", "templateLabel"]
-
-  connect() {
-    this.colorPickerTargets().forEach(picker => picker.addEventListener("change", () => this.customColorChanged()))
-  }
-
-  colorPickerTargets() {
-    return [
-      this.hasAccentPickerTarget && this.accentPickerTarget,
-      this.hasSurfacePickerTarget && this.surfacePickerTarget,
-      this.hasTextPickerTarget && this.textPickerTarget
-    ].filter(Boolean)
-  }
-
-  selectTemplate(event) {
-    const input = event.currentTarget
-    const label = input.closest("[data-template]")
-    const accentHex = input.dataset.accentHex
-    const surfaceHex = input.dataset.surfaceHex
-    const textHex = input.dataset.textHex
-
-    this.setPickerValue(this.accentPickerTarget, accentHex)
-    this.setPickerValue(this.surfacePickerTarget, surfaceHex)
-    this.setPickerValue(this.textPickerTarget, textHex)
-
-    this.highlightTemplate(label.dataset.template)
-  }
-
-  selectPreset(event) {
-    const input = event.currentTarget
-    const theme = JSON.parse(input.dataset.theme)
-
-    Object.entries(theme).forEach(([role, sides]) => {
-      Object.entries(sides).forEach(([side, value]) => this.setThemeField(`theme[${role}][${side}]`, value))
-    })
-
-    this.highlightTemplate(input.closest("[data-template]").dataset.template)
-  }
-
-  setThemeField(name, value) {
-    const field = this.element.querySelector(`[name="${name}"]`)
-    if (!field) return
-
-    const picker = field.closest("[data-controller~='color-picker']")
-    if (picker) {
-      this.setPickerValue(picker, value)
-    } else {
-      field.value = value
-    }
-  }
-
-  customColorChanged() {
-    if (this.hasCustomRadioTarget) this.customRadioTarget.checked = true
-    this.highlightTemplate("custom")
-  }
-
-  highlightTemplate(selected) {
-    this.templateLabelTargets.forEach(label => {
-      const border = label.querySelector("span")
-      if (label.dataset.template === selected) {
-        border.classList.remove("border-transparent")
-        border.classList.add("border-accent-500")
-      } else {
-        border.classList.remove("border-accent-500")
-        border.classList.add("border-transparent")
-      }
-    })
-  }
-
-  setPickerValue(wrapper, hex) {
-    const input = wrapper.querySelector("input[type='hidden']")
-    const swatch = wrapper.querySelector("[data-color-picker-target='swatch']")
-    const hexLabel = wrapper.querySelector("[data-color-picker-target='hexLabel']")
-    const text = wrapper.querySelector("[data-color-picker-target='text']")
-
-    if (input) input.value = hex
-    if (swatch) swatch.style.backgroundColor = hex
-    if (hexLabel) hexLabel.textContent = hex
-    if (text) text.value = hex
-  }
-}