keystone_ui-preferences 0.7.0 → 0.9.0

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

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class CheckedTheme
+      NUMBER = '-?(?:\d+(?:\.\d+)?|\.\d+)%?'
+      GAP = '(?:\s*,\s*|\s+)'
+      HEX = /\A#(?:\h{3}|\h{4}|\h{6}|\h{8})\z/
+      FUNCTION = /\A(?:rgba?|hsla?|oklch)\(\s*#{NUMBER}#{GAP}#{NUMBER}#{GAP}#{NUMBER}(?:\s*[\/,]\s*#{NUMBER})?\s*\)\z/
+      COLOUR = Regexp.union(HEX, FUNCTION)
+      UNSIGNED_LENGTH = '(?:0|(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em))'
+      LENGTH = /\A#{UNSIGNED_LENGTH}\z/
+      SIGNED_LENGTH = /\A-?#{UNSIGNED_LENGTH}\z/
+      FONT_NAME = "[A-Za-z0-9-]+(?: [A-Za-z0-9-]+)*"
+      FONT = "(?:#{FONT_NAME}|\"#{FONT_NAME}\"|'#{FONT_NAME}')"
+      FONT_LIST = /\A#{FONT}(?:\s*,\s*#{FONT})*\z/
+      WEIGHT = /\A[1-9]00\z/
+      OPACITY = /\A(?:0(?:\.\d+)?|\.\d+|1(?:\.0+)?)\z/
+      PATTERNS = {
+        colour: COLOUR, shadow_colour: COLOUR, length: LENGTH, signed_length: SIGNED_LENGTH, opacity: OPACITY, weight: WEIGHT,
+        letter_spacing: Regexp.union(SIGNED_LENGTH, /\Anormal\z/), font_list: FONT_LIST
+      }.freeze
+      REASONS = {
+        shadow_colour: "is not hex, rgb(), hsl() or oklch() written with plain numbers",
+        length: "is not a number followed by px, rem or em, or zero",
+        signed_length: "is not a number followed by px, rem or em, or zero",
+        opacity: "is not a number from 0 to 1",
+        weight: "is not a font weight from 100 to 900 in hundreds",
+        letter_spacing: "is not normal or a number followed by px, rem or em, or zero",
+        font_list: "is not a list of font names made of letters, digits, spaces and hyphens"
+      }.freeze
+      SIDES = %w[light dark].freeze
+      SYSTEM_FONTS = [
+        "system-ui", "ui-sans-serif", "ui-serif", "ui-monospace", "ui-rounded", "sans-serif", "serif", "monospace", "cursive",
+        "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Helvetica Neue", "Arial", "Georgia",
+        "Times New Roman", "Menlo", "Monaco", "Consolas", "Courier New", "SFMono-Regular"
+      ].freeze
+
+      def initialize(values)
+        @values = values
+      end
+
+      def refusal
+        name, side, value = failure
+        return unless name
+        return Refusal.new("The --#{name} value names no font this app offers, so it was not saved.") if matches?(name, value)
+
+        reason(kind_of(name), name, side)
+      end
+
+      def failing_setting
+        failure&.first
+      end
+
+      def value
+        { "theme" => kept.to_h { |name, sides| [ name, kind_of(name) == :font_list ? sides.transform_values { |list| offered_fonts(list).map { |font| written_font(font) }.join(", ") } : sides ] } }
+      end
+
+      private
+
+      def failure
+        kept.each do |name, sides|
+          sides.each do |side, value|
+            return [ name, side, value ] unless matches?(name, value) && names_offered_font?(name, value)
+          end
+        end
+        nil
+      end
+
+      def matches?(name, value)
+        value.to_s.match?(PATTERNS.fetch(kind_of(name)))
+      end
+
+      def names_offered_font?(name, value)
+        kind_of(name) != :font_list || offered_fonts(value).any?
+      end
+
+      def sides_of(name)
+        kind_of(name) == :colour ? SIDES : SIDES.first(1)
+      end
+
+      def kind_of(name)
+        ThemeRoles::ROLES.fetch(name)[:kind]
+      end
+
+      def offered_fonts(list)
+        offered = (KeystoneUi::Preferences.configuration.theme_fonts + SYSTEM_FONTS).map(&:downcase)
+        list.split(",").map { |font| font.strip.delete("\"'") }.select { |font| offered.include?(font.downcase) }
+      end
+
+      def written_font(font)
+        font.include?(" ") ? "\"#{font}\"" : font
+      end
+
+      def reason(kind, name, side)
+        return Refusal.new("The #{side} --#{name} colour is not hex, rgb(), hsl() or oklch() written with plain numbers, so it was not saved.") if kind == :colour
+
+        Refusal.new("The --#{name} value #{REASONS.fetch(kind)}, so it was not saved.")
+      end
+
+      def kept
+        @kept ||= ThemeRoles.names.each_with_object({}) do |name, kept|
+          sides = @values.to_h[name].to_h.slice(*sides_of(name))
+          kept[name] = sides if sides.any?
+        end
+      end
+    end
+  end
+end

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

@@ -8,12 +8,13 @@ module KeystoneUi
       end
 
       def refusal
-        return Refusal.new("Choose Default, one of the colour templates or Custom.") unless template_offered?
+        return Refusal.new("Choose Default, one of the colour templates, one of the preset themes or Custom.") unless template_offered?
 
         Refusal.new("Choose each colour as a six-digit hex value, such as #1d4ed8.") unless colours_offered?
       end
 
       def value
+        return { "preset_name" => @values[:template_name] } if preset?
         return { "template_name" => @values[:template_name] } if @values[:template_name].present?
 
         { "accent" => @values[:accent], "surface" => @values[:surface], "text" => @values[:text] }
@@ -22,7 +23,11 @@ module KeystoneUi
       private
 
       def template_offered?
-        @values[:template_name].blank? || [ AppearanceChoice::DEFAULT_TEMPLATE, *KeystoneUi::Looks::Templates.names.map(&:to_s) ].include?(@values[:template_name])
+        @values[:template_name].blank? || preset? || [ AppearanceChoice::DEFAULT_TEMPLATE, *KeystoneUi::Looks::Templates.names.map(&:to_s) ].include?(@values[:template_name])
+      end
+
+      def preset?
+        KeystoneUi::Looks::Themes.names.map(&:to_s).include?(@values[:template_name].to_s)
       end
 
       def colours_offered?

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

@@ -15,7 +15,7 @@ module KeystoneUi
 
         return Refusal.new("This app does not let accounts choose their colours.") if colours_sent? && !KeystoneUi::Preferences.configuration.account_colors
 
-        chosen = ChosenColours.new(@values) if colours_sent?
+        chosen = chosen_colours
         return chosen.refusal if chosen&.refusal
 
         keep("colours", (chosen ? { value: chosen.value } : {}).merge(switch(:members_choose)))
@@ -26,7 +26,17 @@ module KeystoneUi
       private
 
       def colours_sent?
-        @values.key?(:template_name)
+        @values.key?(:template_name) || sent_theme.sent?
+      end
+
+      def chosen_colours
+        return sent_theme.checked if sent_theme.sent?
+
+        ChosenColours.new(@values) if colours_sent?
+      end
+
+      def sent_theme
+        @sent_theme ||= SentTheme.new(@values) { ComponentPreference.find_by(owner: @account, component_key: "colours")&.value.to_h }
       end
 
       def look_offered?

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

@@ -12,9 +12,10 @@ module KeystoneUi
       def call
         return Refusal.new("Choose Light, Dark, System or Custom for the mode.") unless mode_offered?
         return Refusal.new("Choose the app's own look or one of the looks it offers.") unless look_offered?
-        return keep_mode_and_look unless @values.key?(:template_name)
+        return keep_mode_and_look unless @values.key?(:template_name) || sent_theme.sent?
         return Refusal.new("This app sets the colours for everyone, so this was not saved.") unless KeystoneUi::Preferences.configuration.account_colors
         return Refusal.new("Your account sets the colours for everyone, so this was not saved.") unless members_choose?
+        return keep_checked(sent_theme.checked) if sent_theme.sent?
         return use_default if @values[:template_name] == AppearanceChoice::DEFAULT_TEMPLATE
 
         chosen = ChosenColours.new(@values)
@@ -38,6 +39,17 @@ module KeystoneUi
         LayoutChoice.new(person: @person, account: @account, component_key: "colours").members_choose?
       end
 
+      def sent_theme
+        @sent_theme ||= SentTheme.new(@values) { preference.value.to_h }
+      end
+
+      def keep_checked(checked)
+        return checked.refusal if checked.refusal
+
+        preference.update!(value: checked.value)
+        keep_mode_and_look
+      end
+
       def use_default
         preference.destroy! if preference.persisted?
         keep_mode_and_look

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

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class SentTheme
+      def initialize(values, &saved_colours)
+        @values = values
+        @saved_colours = saved_colours
+      end
+
+      def sent?
+        pasting? || editing?
+      end
+
+      def checked
+        return pasted if pasting?
+
+        CheckedTheme.new(typed)
+      end
+
+      private
+
+      def pasting?
+        @values[:pasted_theme].present?
+      end
+
+      def editing?
+        typed.any? && [ saved["theme"], preset_theme(saved["preset_name"]), preset_theme(@values[:template_name]) ].exclude?(typed)
+      end
+
+      def saved
+        @saved ||= @saved_colours.call
+      end
+
+      def preset_theme(name)
+        KeystoneUi::Looks::Themes[name][:theme] if KeystoneUi::Looks::Themes.names.map(&:to_s).include?(name.to_s)
+      end
+
+      def typed
+        @typed ||= @values[:theme].to_h.to_h { |name, sides| [ name.to_s, sides.to_h.to_h { |side, value| [ side.to_s, value.to_s.strip ] }.compact_blank ] }.compact_blank
+      end
+
+      def pasted
+        reader = ThemeReader.new(@values[:pasted_theme])
+        reader.refusal ? reader : CheckedTheme.new(reader.values)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class ThemeCss
+      VERSION = "2"
+      SHADOW_SETTINGS = %w[shadow-offset-x shadow-offset-y shadow-blur shadow-spread shadow-color shadow-opacity].freeze
+      SHADOWS = %w[--ks-shadow-surface --ks-shadow-overlay --ks-shadow-menu].freeze
+      HOVERS = { "primary" => "--ks-color-accent-hover", "secondary" => "--ks-color-neutral-hover", "destructive" => "--ks-color-danger-hover" }.freeze
+
+      OUTRANKING_LOOKS = ":root, html:root[data-look]"
+
+      def initialize(theme = {}, own_look: false, palette: nil)
+        @theme = theme
+        @own_look = own_look
+        @palette = palette
+      end
+
+      def to_s
+        rules.map { |selector, lines| "#{selector} {\n#{lines.join("\n")}\n}" }.join("\n")
+      end
+
+      private
+
+      def rules
+        return { ":root" => palette_lines } if @palette
+        return { OUTRANKING_LOOKS => colour_lines, ":root" => shape_lines } if @own_look
+
+        { OUTRANKING_LOOKS => colour_lines + shape_lines }
+      end
+
+      def palette_lines
+        accent, surface, background, text = @palette.values_at(:accent, :surface, :background, :text)
+        shade_lines("accent", shades(accent) { KeystoneUi::Looks::Palettes.accent(accent) }) +
+          shade_lines("surface", shades(surface) { KeystoneUi::Looks::Palettes.surface(surface) }) +
+          [ declaration("--color-custom-background", background), declaration("--color-custom-text", text) ]
+      end
+
+      def shades(colour)
+        return KeystoneUi::Looks::Palettes.generate_shades(colour) if colour.start_with?("#")
+
+        yield
+      end
+
+      def shade_lines(name, shades)
+        shades.map { |shade, hex| declaration("--color-#{name}-#{shade}", hex) }
+      end
+
+      def colour_lines
+        lines(@theme.select { |role, _sides| colour?(role) })
+      end
+
+      def shape_lines
+        lines(@theme.reject { |role, _sides| colour?(role) }) + shadow_declarations
+      end
+
+      def colour?(role)
+        ThemeRoles::ROLES.fetch(role)[:kind] == :colour
+      end
+
+      def lines(roles)
+        roles.flat_map do |role, sides|
+          ThemeRoles::ROLES.fetch(role)[:variables].flat_map { |variable| declarations(variable, sides) } + hover_declarations(role, sides)
+        end
+      end
+
+      def shadow_declarations
+        x, y, blur, spread, colour, opacity = SHADOW_SETTINGS.map { |setting| @theme.dig(setting, "light") }
+        return [] unless x && y && blur && spread && colour && opacity
+
+        SHADOWS.map { |variable| declaration(variable, "#{x} #{y} #{blur} #{spread} color-mix(in srgb, #{colour} calc(#{opacity} * 100%), transparent)") }
+      end
+
+      def hover_declarations(role, sides)
+        return [] unless HOVERS.key?(role)
+
+        declarations(HOVERS[role], sides.transform_values { |colour| "color-mix(in oklab, #{colour} 85%, white)" })
+      end
+
+      def declarations(variable, sides)
+        { variable => sides["light"], "#{variable}-dark" => sides["dark"] }.compact.map { |name, value| declaration(name, value) }
+      end
+
+      def declaration(name, value)
+        "  #{name}: #{value};"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class ThemeReader
+      BLOCK = %r{(?:\A|(?<=[\};])|(?<=\*/)|@layer\s+[\w-]+\s*\{)\s*(:root|\.dark)\s*\{([^\{\}]*)\}}
+      DECLARATION = /--([a-z0-9-]+)\s*:\s*([^;]*)/
+      LIMIT = 20_000
+      FETCHES = /url\(|@import/i
+      SIDES = { ":root" => "light", ".dark" => "dark" }.freeze
+
+      def initialize(text)
+        @text = text.to_s
+      end
+
+      def refusal
+        return Refusal.new("The pasted theme is longer than 20,000 characters, so it was not saved.") if @text.length > LIMIT
+        return Refusal.new("The pasted theme contains url( or @import, so it was not saved.") if @text.match?(FETCHES)
+
+        Refusal.new("The pasted theme has no shadcn colour role in a :root or .dark block, so it was not saved.") if values.keys.none? { |name| ThemeRoles::ROLES.fetch(name)[:kind] == :colour }
+      end
+
+      def values
+        @values ||= @text.scan(BLOCK).each_with_object({}) do |(selector, body), values|
+          body.scan(DECLARATION).each do |name, value|
+            next unless ThemeRoles::ROLES.key?(name)
+
+            (values[name] ||= {})[SIDES.fetch(selector)] = value.strip
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    module ThemeRoles
+      ROLES = {
+        "background" => { kind: :colour, variables: %w[--ks-color-page] },
+        "foreground" => { kind: :colour, variables: %w[--ks-color-on-page] },
+        "card" => { kind: :colour, variables: %w[--ks-color-surface] },
+        "card-foreground" => { kind: :colour, variables: %w[--ks-color-on-surface] },
+        "popover" => { kind: :colour, variables: %w[--ks-color-overlay] },
+        "popover-foreground" => { kind: :colour, variables: %w[--ks-color-on-overlay --ks-color-on-overlay-muted] },
+        "primary" => { kind: :colour, variables: %w[--ks-color-accent] },
+        "primary-foreground" => { kind: :colour, variables: %w[--ks-color-on-accent] },
+        "secondary" => { kind: :colour, variables: %w[--ks-color-neutral] },
+        "secondary-foreground" => { kind: :colour, variables: %w[--ks-color-on-neutral] },
+        "muted" => { kind: :colour, variables: %w[--ks-color-fill-muted] },
+        "muted-foreground" => { kind: :colour, variables: %w[--ks-color-text-muted] },
+        "accent" => { kind: :colour, variables: %w[--ks-color-hover] },
+        "accent-foreground" => { kind: :colour, variables: %w[--ks-color-on-hover --ks-color-on-hover-muted] },
+        "destructive" => { kind: :colour, variables: %w[--ks-color-danger] },
+        "destructive-foreground" => { kind: :colour, variables: %w[--ks-color-on-danger] },
+        "border" => { kind: :colour, variables: %w[--ks-color-border] },
+        "input" => { kind: :colour, variables: %w[--ks-color-border-control] },
+        "ring" => { kind: :colour, variables: %w[--ks-color-focus] },
+        "chart-1" => { kind: :colour, variables: %w[--ks-color-chart-1] },
+        "chart-2" => { kind: :colour, variables: %w[--ks-color-chart-2] },
+        "chart-3" => { kind: :colour, variables: %w[--ks-color-chart-3] },
+        "chart-4" => { kind: :colour, variables: %w[--ks-color-chart-4] },
+        "chart-5" => { kind: :colour, variables: %w[--ks-color-chart-5] },
+        "sidebar" => { kind: :colour, variables: %w[--ks-color-nav] },
+        "sidebar-foreground" => { kind: :colour, variables: %w[--ks-color-nav-link --ks-color-nav-text] },
+        "sidebar-primary" => { kind: :colour, variables: %w[--ks-color-nav-indicator --ks-color-nav-active] },
+        "sidebar-primary-foreground" => { kind: :colour, variables: [] },
+        "sidebar-accent" => { kind: :colour, variables: %w[--ks-color-nav-hover] },
+        "sidebar-accent-foreground" => { kind: :colour, variables: %w[--ks-color-nav-text-hover] },
+        "sidebar-border" => { kind: :colour, variables: %w[--ks-color-nav-border] },
+        "sidebar-ring" => { kind: :colour, variables: [] },
+        "radius" => { kind: :length, variables: %w[--ks-radius-control --ks-radius-surface] },
+        "spacing" => { kind: :length, variables: %w[--ks-spacing] },
+        "border-width" => { kind: :length, variables: %w[--ks-border-width] },
+        "letter-spacing" => { kind: :letter_spacing, variables: %w[--ks-letter-spacing] },
+        "font-sans" => { kind: :font_list, variables: %w[--ks-font-body] },
+        "font-serif" => { kind: :font_list, variables: [] },
+        "font-mono" => { kind: :font_list, variables: %w[--ks-font-mono --default-mono-font-family] },
+        "font-heading" => { kind: :font_list, variables: %w[--ks-font-heading] },
+        "font-weight-normal" => { kind: :weight, variables: %w[--ks-font-weight-normal] },
+        "font-weight-medium" => { kind: :weight, variables: %w[--ks-font-weight-medium] },
+        "font-weight-strong" => { kind: :weight, variables: %w[--ks-font-weight-strong] },
+        "font-weight-heading" => { kind: :weight, variables: %w[--ks-font-weight-heading] },
+        "shadow-color" => { kind: :shadow_colour, variables: [] },
+        "shadow-opacity" => { kind: :opacity, variables: [] },
+        "shadow-blur" => { kind: :length, variables: [] },
+        "shadow-spread" => { kind: :signed_length, variables: [] },
+        "shadow-offset-x" => { kind: :signed_length, variables: [] },
+        "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
+    end
+  end
+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 } %>
+        <%= 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 } %>
-      <% 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

@@ -15,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 %>
@@ -30,37 +30,69 @@
         <span><%= template[:label] %></span>
       <% end %>
     <% end %>
+    <% if local_assigns[:presets] %>
+      <% KeystoneUi::Looks::Themes.all.each do |name, preset| %>
+        <%= ui_option_card(
+          name: "template_name",
+          value: name.to_s,
+          selected: saved["preset_name"] == name.to_s,
+          input_data: {
+            action: "keystone-ui--preferences--appearance-editor#selectPreset",
+            theme: preset[:theme].to_json
+          },
+          label_data: {
+            "keystone-ui--preferences--appearance-editor-target": "templateLabel",
+            template: name.to_s
+          }
+        ) do %>
+          <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 9999px; background-color: <%= preset[:theme].dig("primary", "light") %>;"></span>
+          <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 0.25rem; background-color: <%= preset[:theme].dig("secondary", "light") %>;"></span>
+          <span><%= preset[:label] %></span>
+        <% end %>
+      <% end %>
+    <% end %>
     <%= ui_option_card(
       name: "template_name",
       value: "",
-      selected: saved["template_name"].blank?,
+      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 %>
       <span>Custom</span>
     <% end %>
   </div>
+  <% if saved.key?("theme") %>
+    <p class="ks-hint"><%= local_assigns.fetch(:own_theme_hint, "Your current choice is your own theme.") %></p>
+  <% end %>
+  <% if local_assigns[:pastes] %>
+    <% 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 %>