lostcoords-ui 0.4.1

data/app/helpers/lostcoords/ui/badge_helper.rb

@@ -0,0 +1,162 @@
+module Lostcoords::Ui
+  module BadgeHelper
+    ICON_BADGE_BASE =
+      "icon-badge squircle grid place-items-center shrink-0 " \
+      "size-[var(--icon-badge-size,var(--icon-badge-size-default,--spacing(10)))] " \
+      "[border:var(--icon-badge-border,1px_solid_transparent)] " \
+      "rounded-[var(--icon-badge-radius,var(--radius-2xl))] " \
+      "bg-[var(--icon-badge-bg,var(--paper-2))] " \
+      "text-[length:var(--icon-badge-font-size,var(--icon-badge-font-size-default,1.125rem))] leading-none"
+
+    # Sizes set the default, so a context that pins --icon-badge-size still wins.
+    ICON_BADGE_SIZES = {
+      base: "",
+      lg: "[--icon-badge-size-default:--spacing(11)] [--icon-badge-font-size-default:1.25rem]",
+      xl: "[--icon-badge-size-default:--spacing(14)] [--icon-badge-font-size-default:1.5rem]"
+    }.freeze
+
+    ICON_MEDALLION_BASE = "grid place-items-center shrink-0 rounded-full"
+
+    ICON_MEDALLION_SIZES = {
+      sm: "size-6.5",
+      lg: "size-12"
+    }.freeze
+
+    ICON_MEDALLION_TONES = {
+      accent: "bg-sky-soft text-accent",
+      neutral: "bg-paper-2",
+      leaf: "bg-[color-mix(in_oklab,var(--leaf-soft)_72%,var(--paper))] text-leaf"
+    }.freeze
+
+    AVATAR_BASE =
+      "avatar grid place-items-center shrink-0 rounded-full font-medium tracking-[var(--avatar-tracking,0.05em)] " \
+      "size-[var(--avatar-size,var(--avatar-size-default,--spacing(8)))] " \
+      "text-[length:var(--avatar-font-size,var(--avatar-font-size-default,0.75rem))] " \
+      "text-[color:var(--avatar-color,var(--ink-on-accent))] " \
+      "border-[length:var(--avatar-border,0px)] border-[color:var(--avatar-cutout,var(--paper))]"
+
+    # Sizes set the default, so a context that pins --avatar-size (a stack, a dialog) still wins.
+    AVATAR_SIZES = {
+      base: "",
+      lg: "",
+      sm: "[--avatar-size-default:--spacing(6.5)] [--avatar-font-size-default:0.625rem]",
+      xl: "[--avatar-size-default:--spacing(24)] [--avatar-font-size-default:1.25rem]"
+    }.freeze
+
+    AVATAR_INK = "[--avatar-color:var(--ink)]"
+
+    AVATAR_LINKED = "avatar-ring"
+
+    # Overlapping avatars with a "+N" chip. The stack sets inherited variables rather than styling
+    # its avatars, so a context's own `[&_.avatar]:` override still wins. The border cuts each
+    # avatar out of the one beneath, so it takes the fill it sits on (--avatar-cutout).
+    AVATAR_STACK_BASE =
+      "avatar-stack relative inline-flex items-center min-w-0 [&_.avatar]:outline-none " \
+      "[--avatar-size:--spacing(8)] [--avatar-border:--spacing(0.5)] [--avatar-ring-gap:1] " \
+      "[--avatar-stack-overlap:--spacing(1.5)]"
+
+    AVATAR_STACK_COMPACT =
+      "[--avatar-size:--spacing(4.5)] [--avatar-font-size:0.4375rem] [--avatar-border:0px] [--avatar-ring-gap:2] " \
+      "@sm:[--avatar-size:--spacing(5.5)] @sm:[--avatar-font-size:0.5rem] " \
+      "[--avatar-stack-overlap:--spacing(1.25)] [--avatar-stack-padding:0px]"
+
+    # dynamic_avatar_stack_controller marks the leading visible avatar with data-first as it narrows the stack.
+    AVATAR_STACK_ROW =
+      "avatar-stack__row flex shrink-0 p-[var(--avatar-stack-padding,--spacing(1))] " \
+      "[&>.avatar]:-ms-(--avatar-stack-overlap) [&>.avatar:first-child]:ms-0 [&>.avatar[data-first]]:ms-0"
+
+    EYEBROW_BASE =
+      "font-mono uppercase tracking-widest text-xs font-medium text-ink-3"
+
+    BADGE_BASE =
+      "inline-flex items-center gap-1 rounded-xl px-2.5 py-1 " \
+      "font-body text-xs font-medium whitespace-nowrap"
+
+    BADGE_TONES = {
+      neutral: "bg-paper-2 text-ink-2",
+      success: "bg-leaf-soft text-leaf",
+      warning: "bg-gold-soft text-gold",
+      danger: "bg-berry-soft text-berry",
+      info: "bg-sky-soft text-sky-deep"
+    }.freeze
+
+    STATUS_PILL_BASE =
+      "inline-flex items-center rounded-full px-[0.6em] py-[0.15em] " \
+      "font-body text-sm font-medium"
+
+    STATUS_PILL_TONES = {
+      accent: "bg-sky-soft text-accent",
+      danger: "bg-berry-soft text-berry"
+    }.freeze
+
+    PILL_BASE =
+      "inline-flex items-center justify-center gap-2 rounded-full " \
+      "border border-transparent bg-paper-2 " \
+      "font-body text-ink-2 whitespace-nowrap cursor-pointer no-underline " \
+      "transition-[background-color,border-color,color,transform] duration-[150ms] ease-out " \
+      "hover:text-ink active:scale-[0.96] " \
+      "aria-pressed:[background:var(--sky-soft)] aria-pressed:border-accent aria-pressed:text-accent aria-pressed:shadow-none " \
+      "aria-[current]:not-aria-[current=false]:[background:var(--sky-soft)] aria-[current]:not-aria-[current=false]:border-accent " \
+      "aria-[current]:not-aria-[current=false]:text-accent aria-[current]:not-aria-[current=false]:shadow-none " \
+      "has-checked:[background:var(--sky-soft)] has-checked:border-accent has-checked:text-accent has-checked:shadow-none " \
+      "[&_svg]:size-[1.1em] [&_svg]:shrink-0"
+
+    PILL_ACTIVE = "bg-sky-soft border-accent text-accent hover:text-accent shadow-none"
+
+    PILL_GHOST = "border-dashed border-ink-3/40 [background:none] shadow-none text-ink-3"
+
+    PILL_ROW_BASE =
+      "flex flex-wrap items-center gap-y-2 gap-x-2"
+
+    def lc_icon_badge_class(size: :base, extra: nil)
+      lc_tw(ICON_BADGE_BASE, ICON_BADGE_SIZES.fetch(size.to_sym), extra)
+    end
+
+    def lc_icon_medallion_class(size: :sm, tone: :accent, extra: nil)
+      lc_tw(
+        ICON_MEDALLION_BASE,
+        ICON_MEDALLION_SIZES.fetch(size.to_sym, ICON_MEDALLION_SIZES[:sm]),
+        ICON_MEDALLION_TONES.fetch(tone.to_sym, ICON_MEDALLION_TONES[:accent]),
+        extra
+      )
+    end
+
+    def lc_avatar_class(size: :base, ink: false, linked: false, extra: nil)
+      lc_tw(AVATAR_BASE, AVATAR_SIZES.fetch(size.to_sym), (AVATAR_INK if ink), (AVATAR_LINKED if linked), extra)
+    end
+
+    def lc_avatar_stack_class(compact: false, extra: nil)
+      lc_tw(AVATAR_STACK_BASE, (AVATAR_STACK_COMPACT if compact), extra)
+    end
+
+    def lc_avatar_stack_row_class(extra: nil)
+      lc_tw(AVATAR_STACK_ROW, extra)
+    end
+
+    def lc_eyebrow_class(extra: nil)
+      lc_tw(EYEBROW_BASE, extra)
+    end
+
+    def lc_badge_class(tone: :neutral, extra: nil)
+      lc_tw(BADGE_BASE, BADGE_TONES.fetch(tone.to_sym, BADGE_TONES[:neutral]), extra)
+    end
+
+    def lc_status_pill_class(tone: :accent, extra: nil)
+      lc_tw(STATUS_PILL_BASE, STATUS_PILL_TONES.fetch(tone.to_sym, STATUS_PILL_TONES[:accent]), extra)
+    end
+
+    def lc_pill_class(active: false, ghost: false, size: :base, extra: nil)
+      lc_tw(
+        PILL_BASE,
+        ButtonHelper::BUTTON_SIZES.fetch(size.to_sym, ButtonHelper::BUTTON_SIZES[:base]),
+        (PILL_GHOST if ghost),
+        (PILL_ACTIVE if active),
+        extra
+      )
+    end
+
+    def lc_pill_row_class(extra: nil)
+      lc_tw(PILL_ROW_BASE, extra)
+    end
+  end
+end

data/app/helpers/lostcoords/ui/button_helper.rb

@@ -0,0 +1,70 @@
+module Lostcoords::Ui
+  module ButtonHelper
+    BUTTON_BASE =
+      "inline-flex items-center justify-center gap-2 rounded-full font-body font-medium " \
+      "whitespace-nowrap no-underline cursor-pointer " \
+      "transition-[background-color,border-color,color,box-shadow,transform,translate,scale,filter] duration-(--ui-motion-control) ease-out " \
+      "motion-safe:hover:-translate-y-px motion-safe:active:translate-y-px active:shadow-none disabled:opacity-40 disabled:pointer-events-none " \
+      "[&_svg]:block [&_svg:not([class*='size-'])]:size-[1.1em] [&_svg]:shrink-0"
+
+    BUTTON_SIZES = {
+      sm: "#{TailwindHelper::CONTROL_SIZES[:sm]} px-4 has-[>[data-icon=inline-start]]:ps-3 has-[>[data-icon=inline-end]]:pe-3 text-sm",
+      base: "#{TailwindHelper::CONTROL_SIZES[:base]} px-5 has-[>[data-icon=inline-start]]:ps-4 has-[>[data-icon=inline-end]]:pe-4 text-base",
+      lg: "#{TailwindHelper::CONTROL_SIZES[:lg]} px-7 has-[>[data-icon=inline-start]]:ps-6 has-[>[data-icon=inline-end]]:pe-6 text-base",
+      nav: "#{TailwindHelper::CONTROL_SIZES[:sm]} px-4 has-[>[data-icon=inline-start]]:ps-3 has-[>[data-icon=inline-end]]:pe-3 text-base"
+    }.freeze
+
+    BUTTON_VARIANTS = {
+      default: "border border-transparent bg-paper text-ink active:bg-paper-2",
+      accent: "border border-transparent bg-sky text-ink-on-accent hover:bg-sky-deep active:bg-sky-deep",
+      secondary: "border border-transparent bg-paper-2 text-ink hover:bg-paper-3 active:bg-paper-3",
+      glass: "pill-3d text-ink hover:brightness-[0.98] active:brightness-[0.96]",
+      ghost: "border border-transparent bg-transparent text-ink-2 hover:bg-(--ghost-hover-bg,var(--paper-2)) hover:text-ink active:bg-(--ghost-hover-bg,var(--paper-2))",
+      danger: "border border-transparent bg-transparent text-berry hover:bg-berry/8 active:bg-berry/8"
+    }.freeze
+
+    ICON_BUTTON_BASE =
+      "inline-grid place-items-center shrink-0 border-0 bg-transparent " \
+      "text-ink-3 cursor-pointer no-underline " \
+      "transition-[background-color,color,transform,scale] duration-(--ui-motion-quick) ease-out " \
+      "hover:bg-paper-2 hover:text-ink motion-safe:active:scale-(--ui-press-scale) " \
+      "disabled:opacity-40 disabled:pointer-events-none " \
+      "[&_svg]:block [&_svg]:shrink-0"
+
+    ICON_BUTTON_SHAPES = {
+      square: "rounded-xl",
+      circle: "rounded-full"
+    }.freeze
+
+    ICON_BUTTON_SIZES = {
+      sm: "size-11 [&_svg]:size-4",
+      base: "size-12 [&_svg]:size-5",
+      lg: "size-14 [&_svg]:size-6"
+    }.freeze
+
+    def lc_button_class(variant: :default, size: :base, block: false, extra: nil)
+      lc_tw(
+        BUTTON_BASE,
+        BUTTON_SIZES.fetch(size.to_sym, BUTTON_SIZES[:base]),
+        lc_button_variants.fetch(variant.to_sym, lc_button_variants[:default]),
+        ("w-full" if block),
+        extra
+      )
+    end
+
+    def lc_icon_button_class(shape: :square, size: :base, extra: nil)
+      lc_tw(
+        ICON_BUTTON_BASE,
+        ICON_BUTTON_SHAPES.fetch(shape.to_sym, ICON_BUTTON_SHAPES[:square]),
+        ICON_BUTTON_SIZES.fetch(size.to_sym, ICON_BUTTON_SIZES[:base]),
+        extra
+      )
+    end
+
+    private
+
+    def lc_button_variants
+      BUTTON_VARIANTS
+    end
+  end
+end

data/app/helpers/lostcoords/ui/card_helper.rb

@@ -0,0 +1,60 @@
+module Lostcoords::Ui
+  module CardHelper
+    CARD_BASE =
+      "squircle bg-paper-2 border border-transparent rounded-3xl"
+
+    CARD_PADDING = {
+      default: "p-5",
+      dense: "py-4 px-3.5 sm:p-5"
+    }.freeze
+
+    HOVER_LIFT =
+      "transition-[transform,box-shadow] duration-[180ms] ease-out " \
+      "hover:-translate-y-0.5 hover:shadow-(--shadow)"
+
+    CARD_SURFACE_CHROME =
+      "squircle bg-(--card-surface-bg,var(--paper-2)) " \
+      "[border:var(--card-surface-border,1px_solid_transparent)] " \
+      "rounded-(--card-surface-radius,var(--radius-3xl)) " \
+      "shadow-(--card-surface-shadow,none) [--field-bg:var(--paper)] " \
+      "[--avatar-cutout:var(--card-surface-bg,var(--paper-2))] " \
+      "transition-[background,border-color,box-shadow] duration-[180ms] ease-(--ease-out)"
+
+    FORM_CARD_BASE =
+      "form-card @container " \
+      "#{CARD_SURFACE_CHROME} " \
+      "has-[[data-tone=error]]:[border-color:color-mix(in_oklab,var(--berry)_30%,var(--hairline))]"
+
+    FORM_CARD_PADDINGS = {
+      default: "p-(--form-card-padding,1.25rem)",
+      compact: "p-(--form-card-padding,1rem_14px) sm:p-(--form-card-padding,20px)",
+      snug: "p-(--form-card-padding,1rem_14px) sm:p-(--form-card-padding,1rem_20px)",
+      empty: "p-(--form-card-padding,2rem_1.25rem)"
+    }.freeze
+
+    FORM_CARD_EMPTY_CONTENT = "text-center text-ink-3"
+
+    def lc_card_class(interactive: false, dense: false, extra: nil)
+      lc_tw(
+        CARD_BASE,
+        CARD_PADDING.fetch(dense ? :dense : :default),
+        (HOVER_LIFT if interactive),
+        ("hover:bg-paper-3" if interactive),
+        extra
+      )
+    end
+
+    def lc_card_surface_class(extra: nil)
+      lc_tw(CARD_SURFACE_CHROME, extra)
+    end
+
+    def lc_form_card_class(padding: :default, extra: nil)
+      lc_tw(
+        FORM_CARD_BASE,
+        FORM_CARD_PADDINGS.fetch(padding.to_sym, FORM_CARD_PADDINGS[:default]),
+        (FORM_CARD_EMPTY_CONTENT if padding.to_sym == :empty),
+        extra
+      )
+    end
+  end
+end

data/app/helpers/lostcoords/ui/copy_button_helper.rb

@@ -0,0 +1,40 @@
+module Lostcoords::Ui
+  module CopyButtonHelper
+    def lc_copy_button(label = nil, value: nil, source: nil, copied_label: nil, error_label: nil, reset_after: 2000, icon_only: false, variant: :secondary, size: :base, **attributes)
+      raise ArgumentError, "Provide either value: or source:" unless value.nil? != source.nil?
+      raise ArgumentError, "source: must be a nonblank element ID" if !source.nil? && source.blank?
+      raise ArgumentError, "reset_after: must be a positive number of milliseconds" unless reset_after.is_a?(Numeric) && reset_after.finite? && reset_after.positive?
+
+      label ||= lc_t("lostcoords.ui.copy_button.label")
+      copied_label ||= lc_t("lostcoords.ui.copy_button.copied")
+      error_label ||= lc_t("lostcoords.ui.copy_button.retry")
+      size = lc_option!(:size, size, %i[sm base lg])
+      defaults = {
+        class: lc_tw("inline-grid", ({ sm: "size-11 p-0", base: "size-12 p-0", lg: "size-14 p-0" }.fetch(size) if icon_only)),
+        aria: { label: label }, data: { action: "ui-copy#copy", ui_copy_target: "button" }
+      }
+      button_attributes = lc_attributes(defaults, attributes).merge(type: "button")
+      raise ArgumentError, "A copy button requires a nonblank accessible label" if button_attributes.dig(:aria, :label).blank?
+
+      tag.span(class: "ui-copy", data: { controller: "ui-copy", state: "idle", ui_copy_value_value: value, ui_copy_source_value: source, ui_copy_reset_after_value: reset_after }) do
+        safe_join([
+          lc_button(variant: variant, size: size, **button_attributes) do
+            safe_join([
+              lc_copy_content(:idle, "document-duplicate", label, icon_only),
+              lc_copy_content(:copied, "check", copied_label, icon_only),
+              lc_copy_content(:error, "arrow-path", error_label, icon_only)
+            ])
+          end,
+          tag.span(class: "sr-only", role: "status", aria: { atomic: true }, data: { ui_copy_target: "status", copied: copied_label, error: lc_t("lostcoords.ui.copy_button.error") })
+        ])
+      end
+    end
+
+    private
+      def lc_copy_content(state, icon, label, icon_only)
+        tag.span(class: "ui-copy-content", aria: { hidden: true }, data: { copy_state: state, icon: ("inline-start" unless icon_only) }) do
+          safe_join([ lc_icon(icon, options: { "aria-hidden": true }), (tag.span(label) unless icon_only) ].compact)
+        end
+      end
+  end
+end

data/app/helpers/lostcoords/ui/dialog_helper.rb

@@ -0,0 +1,33 @@
+module Lostcoords::Ui
+  module DialogHelper
+    DIALOG_SURFACE =
+      "border border-(--glass-edge) rounded-3xl bg-paper text-ink shadow-[var(--glass-rim),var(--shadow-lg)]"
+
+    # Below sm these open as iOS sheets (sheet.css), which paint their own surface.
+    SHEET_DIALOG_SURFACE =
+      "sm:border sm:border-(--glass-edge) sm:rounded-3xl sm:bg-paper text-ink sm:shadow-[var(--glass-rim),var(--shadow-lg)]"
+
+    ANCHORED = "data-anchored:[inset:var(--dialog-top)_var(--dialog-right)_auto_auto] data-anchored:m-0"
+
+    DIALOGS = {
+      modal: "app-dialog #{SHEET_DIALOG_SURFACE} sm:w-[min(92vw,31rem)]",
+      context:
+        "app-dialog context-dialog #{SHEET_DIALOG_SURFACE} sm:w-[min(22rem,calc(100vw-2rem))] " \
+        "sm:max-h-[calc(100dvh-2rem)] sm:origin-(--dialog-origin,center) [--dialog-from:scale(0.96)] #{ANCHORED}"
+    }.freeze
+
+    def lc_dialog_class(kind = :modal, extra: nil)
+      lc_tw("squircle", lc_dialog_kinds.fetch(kind), extra)
+    end
+
+    def lc_dialog_surface_class(extra: nil)
+      lc_tw(DIALOG_SURFACE, extra)
+    end
+
+    private
+
+    def lc_dialog_kinds
+      DIALOGS
+    end
+  end
+end

data/app/helpers/lostcoords/ui/emoji_picker_helper.rb

@@ -0,0 +1,245 @@
+require "unicode/emoji"
+require "yaml"
+require_relative "translation_helper"
+
+module Lostcoords::Ui
+  module EmojiPickerHelper
+    include TranslationHelper
+
+    SEARCH_NAMES_PATH = Lostcoords::Ui.root.join("config/emoji_search_names.yml")
+    SEARCH_NAMES_JA_PATH = Lostcoords::Ui.root.join("config/emoji_search_names_ja.yml")
+    SEARCH_ALIASES_PATH = Lostcoords::Ui.root.join("config/emoji_search_aliases.yml")
+
+    # Representative glyph for each category's tab in the picker navigation.
+    CATEGORY_ICONS = {
+      "smileys_emotion" => "😀",
+      "people_body" => "🧑",
+      "animals_nature" => "🐻",
+      "food_drink" => "🍔",
+      "travel_places" => "🚗",
+      "activities" => "⚽",
+      "objects" => "💡",
+      "symbols" => "🔣",
+      "flags" => "🏁"
+    }.freeze
+
+    KANA_DIGRAPHS = {
+      "きゃ" => "kya", "きゅ" => "kyu", "きょ" => "kyo",
+      "しゃ" => "sha", "しゅ" => "shu", "しょ" => "sho",
+      "ちゃ" => "cha", "ちゅ" => "chu", "ちょ" => "cho",
+      "にゃ" => "nya", "にゅ" => "nyu", "にょ" => "nyo",
+      "ひゃ" => "hya", "ひゅ" => "hyu", "ひょ" => "hyo",
+      "みゃ" => "mya", "みゅ" => "myu", "みょ" => "myo",
+      "りゃ" => "rya", "りゅ" => "ryu", "りょ" => "ryo",
+      "ぎゃ" => "gya", "ぎゅ" => "gyu", "ぎょ" => "gyo",
+      "じゃ" => "ja", "じゅ" => "ju", "じょ" => "jo",
+      "びゃ" => "bya", "びゅ" => "byu", "びょ" => "byo",
+      "ぴゃ" => "pya", "ぴゅ" => "pyu", "ぴょ" => "pyo",
+      "ふぁ" => "fa", "ふぃ" => "fi", "ふぇ" => "fe", "ふぉ" => "fo",
+      "てぃ" => "ti", "でぃ" => "di", "うぃ" => "wi", "うぇ" => "we", "うぉ" => "wo"
+    }.freeze
+    KANA_ROMAJI = {
+      "あ" => "a", "い" => "i", "う" => "u", "え" => "e", "お" => "o",
+      "か" => "ka", "き" => "ki", "く" => "ku", "け" => "ke", "こ" => "ko",
+      "さ" => "sa", "し" => "shi", "す" => "su", "せ" => "se", "そ" => "so",
+      "た" => "ta", "ち" => "chi", "つ" => "tsu", "て" => "te", "と" => "to",
+      "な" => "na", "に" => "ni", "ぬ" => "nu", "ね" => "ne", "の" => "no",
+      "は" => "ha", "ひ" => "hi", "ふ" => "fu", "へ" => "he", "ほ" => "ho",
+      "ま" => "ma", "み" => "mi", "む" => "mu", "め" => "me", "も" => "mo",
+      "や" => "ya", "ゆ" => "yu", "よ" => "yo",
+      "ら" => "ra", "り" => "ri", "る" => "ru", "れ" => "re", "ろ" => "ro",
+      "わ" => "wa", "を" => "wo", "ん" => "n",
+      "が" => "ga", "ぎ" => "gi", "ぐ" => "gu", "げ" => "ge", "ご" => "go",
+      "ざ" => "za", "じ" => "ji", "ず" => "zu", "ぜ" => "ze", "ぞ" => "zo",
+      "だ" => "da", "ぢ" => "ji", "づ" => "zu", "で" => "de", "ど" => "do",
+      "ば" => "ba", "び" => "bi", "ぶ" => "bu", "べ" => "be", "ぼ" => "bo",
+      "ぱ" => "pa", "ぴ" => "pi", "ぷ" => "pu", "ぺ" => "pe", "ぽ" => "po",
+      "ぁ" => "a", "ぃ" => "i", "ぅ" => "u", "ぇ" => "e", "ぉ" => "o",
+      "ゃ" => "ya", "ゅ" => "yu", "ょ" => "yo", "ゎ" => "wa"
+    }.freeze
+    CATEGORY_KEYS = {
+      "Smileys & Emotion" => "smileys_emotion",
+      "People & Body" => "people_body",
+      "Animals & Nature" => "animals_nature",
+      "Food & Drink" => "food_drink",
+      "Travel & Places" => "travel_places",
+      "Activities" => "activities",
+      "Objects" => "objects",
+      "Symbols" => "symbols",
+      "Flags" => "flags"
+    }.freeze
+
+    def lc_emoji_picker_groups
+      Lostcoords::Ui::EmojiPickerHelper.groups.map do |group|
+        group.merge(name: lc_t("lostcoords.ui.emoji_picker.categories.#{group[:key]}", default: group[:name]))
+      end
+    end
+
+    def lc_emoji_picker_count
+      lc_emoji_picker_groups.sum { |group| group[:emojis].size }
+    end
+
+    def lc_emoji_picker_version
+      "#{Unicode::Emoji::EMOJI_VERSION}-#{I18n.locale}-search-v3"
+    end
+
+    def lc_emoji_picker_search_text(emoji)
+      Lostcoords::Ui::EmojiPickerHelper.search_text_for(emoji)
+    end
+
+    def lc_emoji_picker_search_name(emoji)
+      Lostcoords::Ui::EmojiPickerHelper.search_name_for(emoji, locale: I18n.locale)
+    end
+
+    def lc_emoji_picker_search_labels(emoji)
+      Lostcoords::Ui::EmojiPickerHelper.search_labels_for(emoji).join("|")
+    end
+
+    def lc_emoji_picker_toneable?(emoji)
+      Lostcoords::Ui::EmojiPickerHelper.toneable?(emoji)
+    end
+
+    def self.groups
+      @groups ||= Unicode::Emoji::LIST.filter_map do |name, subgroups|
+        emojis = subgroups.values.flatten.uniq.reject { |emoji| skin_tone_variant?(emoji) }
+        next if emojis.empty?
+
+        key = category_key(name)
+        { key: key, name:, icon: CATEGORY_ICONS[key], emojis: emojis.freeze }
+      end.freeze
+    end
+
+    def self.search_text_for(emoji)
+      search_index.fetch(emoji) { emoji }
+    end
+
+    # Primary, human-facing name. Prefers the reader's language so the preview
+    # and accessible label read naturally; falls back across languages.
+    def self.search_name_for(emoji, locale: :en)
+      if locale.to_s.start_with?("ja")
+        japanese_search_names[emoji]&.first || search_names[emoji] || emoji
+      else
+        search_names[emoji] || japanese_search_names[emoji]&.first || emoji
+      end
+    end
+
+    def self.search_labels_for(emoji)
+      [
+        search_names[emoji],
+        *Array(japanese_search_names[emoji]),
+        *Array(curated_aliases[emoji])
+      ].compact_blank.uniq
+    end
+
+    def self.search_index
+      @search_index ||= begin
+        index = Hash.new { |hash, key| hash[key] = [] }
+
+        Unicode::Emoji::LIST.each do |name, subgroups|
+          category_key = category_key(name)
+          category_terms = [ name, category_key.tr("_", " ") ]
+
+          subgroups.each do |subgroup, emojis|
+            subgroup_terms = [ subgroup, subgroup.tr("_-", " ") ]
+
+            emojis.each do |emoji|
+              next if skin_tone_variant?(emoji)
+
+              labels = search_labels_for(emoji)
+              index[emoji].concat([
+                emoji,
+                *labels,
+                *romaji_terms(labels),
+                *category_terms,
+                *subgroup_terms
+              ])
+            end
+          end
+        end
+
+        index.transform_values { |terms| terms.compact_blank.uniq.join(" ").downcase }.freeze
+      end
+    end
+
+    def self.search_names
+      @search_names ||= YAML.load_file(SEARCH_NAMES_PATH).freeze
+    end
+
+    def self.japanese_search_names
+      @japanese_search_names ||= YAML.load_file(SEARCH_NAMES_JA_PATH).freeze
+    end
+
+    def self.curated_aliases
+      @curated_aliases ||= YAML.load_file(SEARCH_ALIASES_PATH).transform_values { |terms| Array(terms) }.freeze
+    end
+
+    # Romaji equivalents for any kana-bearing terms, so a Japanese name can be
+    # found by typing on a Latin keyboard (e.g. "neko" finds 🐱).
+    def self.romaji_terms(terms)
+      Array(terms).filter_map do |term|
+        next unless contains_kana?(term)
+
+        kana_to_romaji(term)
+      end.compact_blank
+    end
+
+    def self.contains_kana?(term)
+      term.to_s.match?(/[぀-ヿ]/)
+    end
+
+    def self.kana_to_romaji(term)
+      kana = term.to_s.each_char.map do |char|
+        codepoint = char.ord
+        codepoint.between?(0x30A1, 0x30F6) ? (codepoint - 0x60).chr(Encoding::UTF_8) : char
+      end.join
+
+      result = +""
+      index = 0
+      while index < kana.length
+        char = kana[index]
+        pair = kana[index, 2]
+
+        if char == "っ"
+          next_pair = KANA_DIGRAPHS[kana[index + 1, 2]]
+          next_char = next_pair || KANA_ROMAJI[kana[index + 1]]
+          result << next_char[0] if next_char.present?
+          index += 1
+        elsif char == "ー"
+          index += 1
+        elsif KANA_DIGRAPHS[pair]
+          result << KANA_DIGRAPHS[pair]
+          index += 2
+        elsif KANA_ROMAJI[char]
+          result << KANA_ROMAJI[char]
+          index += 1
+        else
+          result << char
+          index += 1
+        end
+      end
+
+      result
+    end
+
+    def self.skin_tone_variant?(emoji)
+      (emoji.codepoints & Unicode::Emoji::EMOJI_MODIFIERS).any?
+    end
+
+    # A "simple" modifier base: one base codepoint (optionally with a variation
+    # selector) drawn from Unicode's modifier-base set. We deliberately skip ZWJ
+    # sequences (families, couples) where applying a single skin tone is wrong.
+    def self.toneable?(emoji)
+      @toneable ||= {}
+      @toneable.fetch(emoji) do
+        @toneable[emoji] = begin
+          codepoints = emoji.codepoints.reject { |cp| cp == 0xFE0F }
+          codepoints.length == 1 && Unicode::Emoji::EMOJI_MODIFIER_BASES.include?(codepoints.first)
+        end
+      end
+    end
+
+    def self.category_key(name)
+      CATEGORY_KEYS.fetch(name) { name.downcase.gsub(/[^a-z0-9]+/, "_").gsub(/\A_+|_+\z/, "") }
+    end
+  end
+end

data/app/helpers/lostcoords/ui/feedback_helper.rb

@@ -0,0 +1,30 @@
+module Lostcoords::Ui
+  module FeedbackHelper
+    SPINNER_BASE =
+      "inline-block rounded-full border-current border-t-transparent animate-spin"
+
+    SPINNER_SIZES = {
+      sm: "size-4 border-2",
+      base: "size-6 border-2",
+      lg: "size-8 border-[3px]"
+    }.freeze
+
+    SKELETON_BASE = "block rounded-xl bg-paper-2 animate-pulse"
+
+    EMPTY_STATE_BASE =
+      "flex flex-col items-center text-center " \
+      "py-6 px-4 sm:py-12 sm:px-6"
+
+    def lc_spinner_class(size: :base, extra: nil)
+      lc_tw(SPINNER_BASE, SPINNER_SIZES.fetch(size.to_sym, SPINNER_SIZES[:base]), extra)
+    end
+
+    def lc_skeleton_class(extra: nil)
+      lc_tw(SKELETON_BASE, extra)
+    end
+
+    def lc_empty_state_class(extra: nil)
+      lc_tw(EMPTY_STATE_BASE, extra)
+    end
+  end
+end