senren-ui 0.2.0 → 0.4.0

data/lib/senren/rails/base_component_patch.rb

@@ -59,6 +59,30 @@ module Senren
           end
         end
       RUBY
+
+      # Ruby appended to a host app's existing BaseComponent when it predates
+      # senren_t. A component copied by `senren:add` calls it, so without this a
+      # host that upgraded the gem and added one component would get a
+      # NoMethodError the first time that component rendered.
+      #
+      # Same arrangement as URL_HELPERS: apps installed earlier never receive the
+      # template again, so the helper is duplicated here, and
+      # test/i18n_catalog_test.rb pins the two bodies together.
+      TRANSLATION_HELPER = <<~'RUBY'
+
+        # Added by senren:add so components that translate their text can render.
+        require 'active_support/i18n'
+
+        module Senren
+          class BaseComponent
+            def senren_t(key, default:, **options)
+              I18n.t("senren.#{key}", default: default, **options)
+            rescue I18n::MissingInterpolationArgument
+              I18n.interpolate(default, options)
+            end
+          end
+        end
+      RUBY
     end
   end
 end

data/lib/senren/rails/component_copier.rb

@@ -19,6 +19,7 @@ module Senren
       ).freeze
       BASE_COMPONENT_TEMPLATE = File.join(INSTALL_GENERATOR_TEMPLATES, 'base_component.rb.tt').freeze
       BASE_URL_HELPER_PATCH = BaseComponentPatch::URL_HELPERS
+      BASE_TRANSLATION_HELPER_PATCH = BaseComponentPatch::TRANSLATION_HELPER
 
       attr_reader :registry, :paths, :stdout
 
@@ -35,6 +36,7 @@ module Senren
         validate_client_override!(component_names, client_override)
         paths.ensure_dirs!
         ensure_base_component_url_helpers!
+        ensure_base_component_translation_helper!
 
         requested = Array(component_names).map(&:to_s)
         wanted.each do |name|
@@ -85,6 +87,25 @@ module Senren
         copy_file(BASE_COMPONENT_TEMPLATE, dest, force: false, label: 'base_component.rb')
       end
 
+      # A component that translates its text calls senren_t, so a host whose
+      # BaseComponent predates it needs the helper before the component renders.
+      # Runs after the URL helper step, which copies the whole current template
+      # (helper included) when there is no base component at all, so in that
+      # case there is nothing left to add.
+      #
+      # A destination that escapes the app root was already reported by the URL
+      # step, so this one declines without saying it a second time.
+      def ensure_base_component_translation_helper!
+        dest = paths.base_component_path
+
+        return unless SafeWrite.inside?(dest, paths.root)
+        return unless dest.exist?
+        return if dest.read.include?('def senren_t')
+
+        SafeWrite.write!(dest, dest.read + BASE_TRANSLATION_HELPER_PATCH, paths.root, 'base_component.rb')
+        stdout.puts "  update #{dest} (senren_t)"
+      end
+
       # Delegates to SafeWrite so an intermediate symlinked directory is caught,
       # not just a symlinked leaf. `app/components/senren -> /elsewhere` used to
       # pass every check here.

data/lib/senren/rails/host_paths.rb

@@ -24,6 +24,11 @@ module Senren
 
       def stylesheet_path       = root.join('app', 'assets', 'stylesheets', 'senren.css')
 
+      # Where the host's translations of component text live. One file per
+      # locale, so a team adds a language by adding a file.
+      def locales_dir           = root.join('config', 'locales')
+      def locale_file(locale)   = locales_dir.join("senren.#{locale}.yml")
+
       def stimulus_dir          = root.join('app', 'javascript', 'controllers', 'senren')
 
       def github_dir            = root.join('.github')

data/lib/senren/rails/locale_installer.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+require 'senren/rails/safe_write'
+
+module Senren
+  module Rails
+    # Copies the translations the gem ships into the host app's config/locales.
+    #
+    # The files are not loaded from the gem. A Rails engine auto-loads
+    # `config/locales` from its own root, which would put `:vi` into
+    # `I18n.available_locales` of every app that merely bundles senren-ui. They
+    # are source, like the components: copied once, then the host's to edit.
+    #
+    # Nothing is needed for English to work. Every component carries its English
+    # as the `default:` of the `senren_t` call, so an app with no locale file at
+    # all renders what it always did. That is also why English is not copied
+    # unless asked for: Rails loads config/locales in name order, so a copied
+    # senren.en.yml loads after the host's en.yml and overrides any senren key
+    # set there, and it pins the wording, so a default the gem later improves
+    # never reaches the app. Ask for `en` to get a copy to translate from.
+    #
+    # An existing file is never overwritten without `force:`: it is the host's
+    # translation, and a re-run of the installer must not undo it.
+    class LocaleInstaller
+      LOCALE_PATTERN = /\A[a-z]{2,3}(?:-[A-Za-z0-9]+)*\z/
+
+      attr_reader :paths, :stdout
+
+      def self.source_dir
+        File.join(Senren::Rails.templates_root, 'locales')
+      end
+
+      # The locales the gem ships a file for.
+      def self.available
+        Dir[File.join(source_dir, 'senren.*.yml')].map { |path| File.basename(path).split('.')[1] }.sort
+      end
+
+      def initialize(paths: HostPaths.new, stdout: $stdout)
+        @paths  = paths
+        @stdout = stdout
+      end
+
+      # Returns the locales actually written. Every name is checked before any
+      # file is, so a typo in the second does not leave the first half-installed.
+      def install(locales: [], force: false)
+        names = Array(locales).flatten.map(&:to_s).reject(&:empty?).uniq
+        if names.empty?
+          stdout.puts "  skip  no locale named (shipped: #{self.class.available.join(', ')}); English needs no file"
+          return []
+        end
+        names.each { |name| validate!(name) }
+
+        names.select { |name| copy_locale(name, force: force) }
+      end
+
+      private
+
+      def validate!(name)
+        unless LOCALE_PATTERN.match?(name)
+          raise ArgumentError, "#{name.inspect} is not a locale name. Expected something like en or pt-BR."
+        end
+        return if self.class.available.include?(name)
+
+        raise ArgumentError,
+              "Senren ships no #{name} translation (shipped: #{self.class.available.join(', ')}). " \
+              "To add #{name}, run bin/rails senren:locales en, copy config/locales/senren.en.yml to " \
+              "config/locales/senren.#{name}.yml, change the top-level key to #{name}:, and translate the values."
+      end
+
+      def copy_locale(name, force:)
+        source = File.join(self.class.source_dir, "senren.#{name}.yml")
+        dest = paths.locale_file(name)
+        label = "locale #{name}"
+
+        target = SafeWrite.resolve(dest, paths.root, label, io: stdout)
+        return false unless target
+
+        if File.exist?(target) && !force
+          stdout.puts "  skip  #{dest} (already exists; bin/rails senren:locales #{name} --force replaces it)"
+          return false
+        end
+
+        SafeWrite.mkdir_p!(paths.locales_dir, paths.root, label)
+        SafeWrite.copy!(source, dest, paths.root, label)
+        stdout.puts "  copy  #{dest}"
+        true
+      end
+    end
+  end
+end

data/lib/senren/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Senren
   module Rails
-    VERSION = '0.2.0'
+    VERSION = '0.4.0'
   end
 end

data/lib/senren/rails.rb

@@ -14,6 +14,7 @@ module Senren
     autoload :LlmsWriter,       'senren/rails/llms_writer'
     autoload :Doctor,           'senren/rails/doctor'
     autoload :HostPaths,        'senren/rails/host_paths'
+    autoload :LocaleInstaller,  'senren/rails/locale_installer'
     autoload :MarkerBlock,      'senren/rails/marker_block'
 
     def self.gem_root

data/lib/tasks/senren.rake

@@ -18,6 +18,15 @@ namespace :senren do
     abort e.message
   end
 
+  desc 'Copy a shipped translation into config/locales. bin/rails senren:locales vi [--force]'
+  task :locales, [:names] do |_t, args|
+    options = SenrenRakeArgs.options
+
+    Senren::Rails::LocaleInstaller.new.install(locales: SenrenRakeArgs.names(args), force: options[:force])
+  rescue ArgumentError => e
+    abort e.message
+  end
+
   namespace :skill do
     desc 'Rebuild .senren/skill.md and refresh agent instruction adapters.'
     task sync: :environment do

data/templates/components/accordion/accordion_component.html.erb

@@ -1,16 +1,34 @@
-<div <%= tag.attributes(**root_attrs("divide-y divide-[hsl(var(--senren-border))] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))]", data: { controller: "senren--accordion", "senren--accordion-multiple-value": multiple? })) %>>
+<%= tag.div(**root_attrs("divide-y divide-[hsl(var(--senren-border))] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))]", data: { controller: "senren--accordion", "senren--accordion-multiple-value": multiple? })) do %>
   <% items.each_with_index do |item, index| %>
     <% expanded = open_item?(item, index) %>
     <section>
       <h3>
-        <button type="button" class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium text-[hsl(var(--senren-foreground))] transition-colors hover:bg-[hsl(var(--senren-muted)/0.5)]" aria-expanded="<%= expanded %>" aria-controls="<%= item[:id] %>-panel" data-senren--accordion-target="trigger" data-panel-id="<%= item[:id] %>" data-action="click->senren--accordion#toggle">
+        <button type="button" class="group flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium text-[hsl(var(--senren-foreground))] transition-colors hover:bg-[hsl(var(--senren-muted)/0.5)]" aria-expanded="<%= expanded %>" aria-controls="<%= item[:id] %>-panel" data-senren--accordion-target="trigger" data-panel-id="<%= item[:id] %>" data-action="click->senren--accordion#toggle">
           <span><%= item[:title] %></span>
-          <span aria-hidden="true" class="text-[hsl(var(--senren-muted-foreground))]">+</span>
+          <%# Rotation is driven by aria-expanded, which the controller already %>
+          <%# maintains, so the icon cannot drift out of step with the state a %>
+          <%# screen reader is being told. A "+" was here before -- readable, but %>
+          <%# static, and it gave no hint that the panel animates. %>
+          <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 shrink-0 text-[hsl(var(--senren-muted-foreground))] transition-transform duration-200 group-aria-expanded:rotate-180">
+            <path d="m5 8 5 5 5-5"></path>
+          </svg>
         </button>
       </h3>
-      <div id="<%= item[:id] %>-panel" data-senren--accordion-target="panel" data-panel-id="<%= item[:id] %>" <%= "hidden" unless expanded %> class="px-4 pb-4 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]">
-        <%= item[:content].presence || content %>
+      <%# The grid wrapper is what animates. A height transition needs a number %>
+      <%# to count to, and the content's height is not known until it is laid %>
+      <%# out; `grid-template-rows: 0fr -> 1fr` animates to the content's own %>
+      <%# height without measuring it in JavaScript. %>
+      <%# The `hidden` attribute stays, because content that is visually %>
+      <%# collapsed but present is still focusable and still read aloud. The %>
+      <%# controller removes it before opening and restores it after the close %>
+      <%# transition ends, so the animation never costs the semantics. %>
+      <div id="<%= item[:id] %>-panel" data-senren--accordion-target="panel" data-panel-id="<%= item[:id] %>" <% unless expanded %>hidden<% end %> class="grid transition-[grid-template-rows] duration-200 ease-out <%= expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]' %>">
+        <div class="overflow-hidden">
+          <div class="px-4 pb-4 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]">
+            <%= item[:content].presence || content %>
+          </div>
+        </div>
       </div>
     </section>
   <% end %>
-</div>
+<% end %>

data/templates/components/accordion/accordion_component.rb

@@ -22,7 +22,8 @@ module Senren
     def normalize_items(items)
       Array(items).map.with_index do |item, index|
         source = item.is_a?(Hash) ? item : { title: item.to_s }
-        title = source[:title] || source['title'] || "Section #{index + 1}"
+        title = source[:title] || source['title'] ||
+                senren_t('accordion.section', default: 'Section %{number}', number: index + 1)
         id = (source[:id] || source['id'] || title.to_s.parameterize).to_s
         { id: id, title: title, content: source[:content] || source['content'] }
       end

data/templates/components/alert_dialog/alert_dialog_component.html.erb

@@ -1,4 +1,7 @@
-<div data-controller="senren--alert-dialog" data-senren-component="alert_dialog" id="<%= dom_id %>">
+<%# Root goes through root_attrs so a caller's class: and data: reach it.
+    Hand-writing these attributes dropped both -- which is why a Stimulus
+    value could not be set from the server. %>
+<%= tag.div(**wrapper_attrs(id: dom_id, data: { controller: "senren--alert-dialog" })) do %>
   <% if trigger? %>
     <span data-action="click->senren--alert-dialog#open" data-senren--alert-dialog-target="trigger">
       <%= trigger %>
@@ -6,7 +9,7 @@
   <% else %>
     <button type="button" data-action="click->senren--alert-dialog#open"
             data-senren--alert-dialog-target="trigger"
-            class="hidden">Open</button>
+            class="hidden"><%= senren_t('shared.open', default: 'Open') %></button>
   <% end %>
 
   <div data-senren--alert-dialog-target="overlay" hidden
@@ -15,7 +18,7 @@
   <div data-senren--alert-dialog-target="panel" hidden
        role="alertdialog" aria-modal="true" aria-labelledby="<%= dom_id %>-title" aria-describedby="<%= dom_id %>-desc"
        tabindex="-1"
-       class="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-6 shadow-lg">
+       class="<%= panel_class("fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-6 shadow-lg") %>">
     <% if title? %>
       <h2 id="<%= dom_id %>-title" class="text-lg font-semibold"><%= title %></h2>
     <% end %>
@@ -31,4 +34,4 @@
       <% end %>
     </div>
   </div>
-</div>
+<% end %>

data/templates/components/alert_dialog/alert_dialog_component.rb

@@ -1,6 +1,10 @@
 # frozen_string_literal: true
 
 module Senren
+  # Unlike Dialog and Sheet, this does not close when the overlay is clicked.
+  # An alert dialog exists to make someone choose, and dismissing it by
+  # clicking beside it is indistinguishable from choosing Cancel by accident.
+  # Escape still closes it, because a keyboard user needs a way out.
   class AlertDialogComponent < BaseComponent
     renders_one :trigger
     renders_one :title

data/templates/components/api_key_field/api_key_field_component.html.erb

@@ -1,10 +1,10 @@
-<%= tag.div(**root_attrs("space-y-2", data: { controller: "senren--api-key-field", "senren--api-key-field-reveal-label-value": reveal_label, "senren--api-key-field-hide-label-value": hide_label, "senren--api-key-field-copy-label-value": copy_label })) do %>
+<%= tag.div(**root_attrs("space-y-2", data: { controller: "senren--api-key-field", "senren--api-key-field-reveal-label-value": reveal_label, "senren--api-key-field-hide-label-value": hide_label, "senren--api-key-field-copy-label-value": copy_label, "senren--api-key-field-copied-status-value": copied_status })) do %>
   <% if content? && value.blank? %>
     <%= content %>
   <% else %>
     <label class="block text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= label %></label>
     <div class="flex flex-col gap-2 sm:flex-row">
-      <input type="password" readonly aria-label="<%= label %>" value="<%= value %>" data-senren--api-key-field-target="input" class="h-10 min-w-0 flex-1 rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-muted)/0.35)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+      <input type="password" readonly autocomplete="off" aria-label="<%= label %>" value="<%= value %>" data-senren--api-key-field-target="input" class="h-10 min-w-0 flex-1 rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-muted)/0.35)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
       <button type="button" data-senren--api-key-field-target="revealButton" data-action="click->senren--api-key-field#toggle" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] px-3 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]"><%= reveal_label %></button>
       <button type="button" data-action="click->senren--api-key-field#copy" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-3 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90"><%= copy_label %></button>
     </div>

data/templates/components/api_key_field/api_key_field_component.rb

@@ -5,7 +5,10 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(value: nil, label: 'API key', reveal_label: 'Reveal', hide_label: 'Hide', copy_label: 'Copy',
+    def initialize(value: nil, label: senren_t('api_key_field.label', default: 'API key'),
+                   reveal_label: senren_t('api_key_field.reveal', default: 'Reveal'),
+                   hide_label: senren_t('api_key_field.hide', default: 'Hide'),
+                   copy_label: senren_t('api_key_field.copy', default: 'Copy'),
                    class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @value = value
@@ -16,5 +19,9 @@ module Senren
     end
 
     attr_reader :value, :label, :reveal_label, :hide_label, :copy_label
+
+    # Announced after a copy. The controller reads it from a Stimulus value, so
+    # the sentence is built here, in the host's language, not in JavaScript.
+    def copied_status = senren_t('api_key_field.copied_status', default: '%{label} complete', label: copy_label)
   end
 end

data/templates/components/app_shell/app_shell_component.rb

@@ -13,7 +13,8 @@ module Senren
     }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(content_id: 'senren-main', skip_label: 'Skip to content', variant: :default, class_name: nil, **html)
+    def initialize(content_id: 'senren-main', skip_label: senren_t('app_shell.skip_to_content', default: 'Skip to content'),
+                   variant: :default, class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @content_id = content_id
       @skip_label = skip_label

data/templates/components/breadcrumb/breadcrumb_component.html.erb

@@ -1,5 +1,9 @@
-<% if items.any? %>
-  <nav <%= tag.attributes(**root_attrs("text-sm text-[hsl(var(--senren-muted-foreground))]", aria: { label: label })) %>>
+<%# The <nav> is outside the branch on purpose. It used to be written twice,
+    once per branch, with the same root_attrs call duplicated -- so a change to
+    the root had to be made in two places and the empty case was one edit away
+    from silently losing its aria-label. %>
+<%= tag.nav(**root_attrs("text-sm text-[hsl(var(--senren-muted-foreground))]", aria: { label: label })) do %>
+  <% if items.any? %>
     <ol class="flex flex-wrap items-center gap-2">
       <% items.each_with_index do |item, index| %>
         <% current = index == items.length - 1 || item[:href].blank? %>
@@ -15,9 +19,7 @@
         </li>
       <% end %>
     </ol>
-  </nav>
-<% else %>
-  <nav <%= tag.attributes(**root_attrs("text-sm text-[hsl(var(--senren-muted-foreground))]", aria: { label: label })) %>>
+  <% else %>
     <%= content %>
-  </nav>
+  <% end %>
 <% end %>

data/templates/components/breadcrumb/breadcrumb_component.rb

@@ -5,7 +5,8 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(items: [], label: 'Breadcrumb', separator: '/', class_name: nil, **html)
+    def initialize(items: [], label: senren_t('breadcrumb.label', default: 'Breadcrumb'), separator: '/',
+                   class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @items = normalize_items(items)
       @label = label

data/templates/components/bulk_action_bar/bulk_action_bar_component.html.erb

@@ -3,7 +3,7 @@
     <%= content %>
   <% else %>
     <div class="flex flex-wrap items-center justify-between gap-3">
-      <div class="text-sm font-medium"><%= selection_text || "Selection ready" %></div>
+      <div class="text-sm font-medium"><%= selection_text || senren_t('bulk_action_bar.ready', default: 'Selection ready') %></div>
       <% if actions? %>
         <div class="flex flex-wrap items-center gap-2"><%= actions %></div>
       <% end %>

data/templates/components/bulk_action_bar/bulk_action_bar_component.rb

@@ -7,7 +7,8 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(selected_count: nil, item_label: 'items', class_name: nil, **html)
+    def initialize(selected_count: nil, item_label: senren_t('bulk_action_bar.items', default: 'items'),
+                   class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @selected_count = selected_count
       @item_label = item_label
@@ -18,7 +19,8 @@ module Senren
     def selection_text
       return nil if selected_count.nil?
 
-      "#{selected_count} #{item_label} selected"
+      senren_t('bulk_action_bar.selected', default: '%{count} %{item_label} selected',
+                                           count: selected_count, item_label: item_label)
     end
   end
 end

data/templates/components/button/button_component.html.erb

@@ -1,6 +1,6 @@
 <% base = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-(--senren-radius) font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed" %>
 <% if as == :a %>
-  <%= tag.a content, **root_attrs(base, href: safe_url(href)) %>
+  <%= tag.a content, href: safe_url(href), **root_attrs(base) %>
 <% else %>
   <%= tag.button content, **root_attrs(base, type: type) %>
 <% end %>

data/templates/components/button/button_component.rb

@@ -17,7 +17,33 @@ module Senren
       lg: 'h-12 px-6 text-base'
     }.freeze
 
-    def initialize(variant: :default, size: :md, type: 'button', as: :button, href: nil, class_name: nil, **html)
+    # FOR AI AGENTS AND HUMANS -- how `type` behaves, and why it changed.
+    #
+    # `type:` defaults to nil, so the attribute is omitted and the browser's own
+    # rule applies: a <button> inside a <form> submits it, one outside a form
+    # does nothing. Write what you would write in plain HTML; it behaves the
+    # same.
+    #
+    #   <%= form_with url: sessions_path do %>
+    #     <%= render(Senren::ButtonComponent.new(variant: :primary)) { "Sign in" } %>
+    #   <% end %>                                     # submits, as HTML says
+    #
+    #   <%= render(Senren::ButtonComponent.new(type: :button)) { "Open" } %>
+    #                                                 # a trigger: say so
+    #
+    # This used to default to "button", which silently overrode the platform. A
+    # button rendered inside a form did nothing when clicked -- no submit, no
+    # navigation, nothing in the console -- and that is what users reported:
+    # "I click submit and it does not redirect". Every auth example this library
+    # ships had the bug, so anyone copying a snippet inherited it.
+    #
+    # The trade is deliberate. The old default failed silently; this one fails
+    # loudly, by submitting a form you did not mean to submit. A visible wrong
+    # is cheaper to find than an invisible nothing.
+    #
+    # Agents: writing a form? Do not pass `type:` at all. Writing a trigger for
+    # a dialog, sheet, or menu, which must not submit? Pass `type: :button`.
+    def initialize(variant: :default, size: :md, type: nil, as: :button, href: nil, class_name: nil, **html)
       super(variant: variant, size: size, class_name: class_name, **html)
       @type = type
       @as   = href ? :a : as

data/templates/components/calendar/calendar_component.html.erb

@@ -1,4 +1,4 @@
-<div <%= tag.attributes(**root_attrs("w-72 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))]", data: { controller: "senren--calendar" })) %>>
+<%= tag.div(**root_attrs("w-72 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))]", data: { controller: "senren--calendar" })) do %>
   <% if name.present? %>
     <input type="hidden" name="<%= name %>" value="<%= selected&.iso8601 %>" data-senren--calendar-target="value">
   <% end %>
@@ -18,4 +18,4 @@
       </button>
     <% end %>
   </div>
-</div>
+<% end %>

data/templates/components/calendar/calendar_component.rb

@@ -14,8 +14,43 @@ module Senren
 
     def month_start = date.beginning_of_month
     def month_end = date.end_of_month
-    def title = date.strftime('%B %Y')
-    def weekday_labels = Date::ABBR_DAYNAMES
+
+    def title
+      senren_t('calendar.title', default: '%{month} %{year}',
+                                 month: month_names.fetch(date.month - 1), year: date.strftime('%Y'))
+    end
+
+    # Spelled out call by call rather than looped over a table, so each name is
+    # a literal key that bin/i18n-sync can read and a translator can find.
+    def month_names
+      [
+        senren_t('calendar.months.january', default: 'January'),
+        senren_t('calendar.months.february', default: 'February'),
+        senren_t('calendar.months.march', default: 'March'),
+        senren_t('calendar.months.april', default: 'April'),
+        senren_t('calendar.months.may', default: 'May'),
+        senren_t('calendar.months.june', default: 'June'),
+        senren_t('calendar.months.july', default: 'July'),
+        senren_t('calendar.months.august', default: 'August'),
+        senren_t('calendar.months.september', default: 'September'),
+        senren_t('calendar.months.october', default: 'October'),
+        senren_t('calendar.months.november', default: 'November'),
+        senren_t('calendar.months.december', default: 'December')
+      ]
+    end
+
+    # Sunday first, matching calendar_days.
+    def weekday_labels
+      [
+        senren_t('calendar.weekdays.sun', default: 'Sun'),
+        senren_t('calendar.weekdays.mon', default: 'Mon'),
+        senren_t('calendar.weekdays.tue', default: 'Tue'),
+        senren_t('calendar.weekdays.wed', default: 'Wed'),
+        senren_t('calendar.weekdays.thu', default: 'Thu'),
+        senren_t('calendar.weekdays.fri', default: 'Fri'),
+        senren_t('calendar.weekdays.sat', default: 'Sat')
+      ]
+    end
 
     def calendar_days
       start_day = month_start.beginning_of_week(:sunday)

data/templates/components/card/card_component.html.erb

@@ -2,12 +2,10 @@
   <% if header? %>
     <div class="flex flex-col space-y-1.5 p-6 border-b border-[hsl(var(--senren-border))]"><%= header %></div>
   <% end %>
-  <% if body? %>
-    <div class="p-6"><%= body %></div>
-  <% else %>
-    <div class="p-6"><%= content %></div>
-  <% end %>
+  <%# One <div>, not the same one in both branches: the padding is the card's, %>
+  <%# and duplicating the element meant a change to it had to be made twice. %>
+  <div class="p-6"><%= body? ? body : content %></div>
   <% if footer? %>
-    <div class="flex items-center p-6 pt-0 border-t border-[hsl(var(--senren-border))]"><%= footer %></div>
+    <div class="flex items-center gap-2 p-6 border-t border-[hsl(var(--senren-border))]"><%= footer %></div>
   <% end %>
 <% end %>

data/templates/components/carousel/carousel_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.section(**root_attrs("relative overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] text-[hsl(var(--senren-card-foreground))] shadow-sm", data: { controller: "senren--carousel" }, role: "region", "aria-roledescription": "carousel", "aria-label": label)) do %>
+<%= tag.section(**root_attrs("relative overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] text-[hsl(var(--senren-card-foreground))] shadow-sm", data: { controller: "senren--carousel", "senren--carousel-status-template-value": status_template }, role: "region", "aria-roledescription": "carousel", "aria-label": label)) do %>
   <% if content? && slides.empty? %>
     <%= content %>
   <% else %>
@@ -6,7 +6,7 @@
       <% slides.each_with_index do |slide, index| %>
         <article data-senren--carousel-target="slide" data-index="<%= index %>" class="<%= index.zero? ? '' : 'hidden' %>">
           <% if slide[:image_url].present? %>
-            <img src="<%= slide[:image_url] %>" alt="<%= slide[:alt] || slide[:title] %>" class="aspect-video w-full object-cover">
+            <%= image_tag slide[:image_url], alt: slide[:alt] || slide[:title], class: "aspect-video w-full object-cover" %>
           <% else %>
             <div class="relative flex aspect-video items-end overflow-hidden bg-[hsl(var(--senren-muted)/0.45)] p-6">
               <svg aria-hidden="true" viewBox="0 0 960 540" preserveAspectRatio="none" class="absolute inset-0 h-full w-full">
@@ -45,12 +45,12 @@
 
     <% if slides.size > 1 %>
       <div class="pointer-events-none absolute inset-x-0 top-1/2 z-10 flex -translate-y-1/2 justify-between px-3">
-        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#previous" aria-label="Previous slide">
+        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#previous" aria-label="<%= previous_label %>">
           <svg aria-hidden="true" viewBox="0 0 20 20" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M12.5 4.5 7 10l5.5 5.5" />
           </svg>
         </button>
-        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#next" aria-label="Next slide">
+        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#next" aria-label="<%= next_label %>">
           <svg aria-hidden="true" viewBox="0 0 20 20" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M7.5 4.5 13 10l-5.5 5.5" />
           </svg>
@@ -59,10 +59,10 @@
 
       <div class="absolute bottom-3 left-0 right-0 z-10 flex justify-center gap-1.5">
         <% slides.each_with_index do |_slide, index| %>
-          <button type="button" class="h-2.5 w-2.5 cursor-pointer rounded-full bg-[hsl(var(--senren-background)/0.72)] ring-1 ring-[hsl(var(--senren-border))] transition-all aria-current:w-6 aria-current:bg-[hsl(var(--senren-primary))]" data-senren--carousel-target="dot" data-index="<%= index %>" data-action="click->senren--carousel#goTo" aria-label="Go to slide <%= index + 1 %>" aria-current="<%= index.zero? ? 'true' : 'false' %>"></button>
+          <button type="button" class="h-2.5 w-2.5 cursor-pointer rounded-full bg-[hsl(var(--senren-background)/0.72)] ring-1 ring-[hsl(var(--senren-border))] transition-all aria-current:w-6 aria-current:bg-[hsl(var(--senren-primary))]" data-senren--carousel-target="dot" data-index="<%= index %>" data-action="click->senren--carousel#goTo" aria-label="<%= go_to_label(index + 1) %>" aria-current="<%= index.zero? ? 'true' : 'false' %>"></button>
         <% end %>
       </div>
     <% end %>
-    <p class="sr-only" aria-live="polite" data-senren--carousel-target="status">Slide 1 of <%= slides.size %></p>
+    <p class="sr-only" aria-live="polite" data-senren--carousel-target="status"><%= status_text %></p>
   <% end %>
 <% end %>

data/templates/components/carousel/carousel_component.rb

@@ -5,7 +5,7 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(slides: [], label: 'Carousel', class_name: nil, **html)
+    def initialize(slides: [], label: senren_t('carousel.label', default: 'Carousel'), class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @slides = normalize_slides(slides)
       @label = label
@@ -13,6 +13,17 @@ module Senren
 
     attr_reader :slides, :label
 
+    def previous_label = senren_t('carousel.previous', default: 'Previous slide')
+    def next_label = senren_t('carousel.next', default: 'Next slide')
+    def go_to_label(number) = senren_t('carousel.go_to', default: 'Go to slide %{number}', number: number)
+
+    # The announcement as the server first renders it, and the same sentence as a
+    # template for the controller, which has to say it again on every slide
+    # change. No values are passed for the template, so I18n hands back the
+    # `%{current}` and `%{total}` placeholders untouched.
+    def status_text = senren_t('carousel.status', default: 'Slide %{current} of %{total}', current: 1, total: slides.size)
+    def status_template = senren_t('carousel.status', default: 'Slide %{current} of %{total}')
+
     private
 
     def normalize_slides(slides)