senren-ui 0.2.0 → 0.4.0

data/lib/generators/senren/install/install_generator.rb

@@ -11,6 +11,24 @@ module Senren
       class_option :force, type: :boolean, default: false,
                            desc: 'Overwrite existing Senren-managed files.'
 
+      # Nothing by default: English renders with no file. Every locale, English
+      # included, is asked for by name. A shipped translation adds its locale to
+      # I18n.available_locales, which a language switcher built from that list
+      # will then offer; a copied English file overrides the app's own en.yml.
+      #
+      # `enum:` makes Thor refuse an unknown locale while it parses the options,
+      # before any step has run. Refusing in the middle would leave an app with the
+      # components copied and no instruction files.
+      class_option :locales, type: :array, default: [],
+                             enum: Senren::Rails::LocaleInstaller.available,
+                             desc: 'Translations to copy into config/locales.'
+
+      # --force refreshes the files Senren owns. A locale file stops being one
+      # the moment it is copied: it is the app's translation. So replacing it is
+      # its own flag, and a routine --force re-run cannot undo someone's wording.
+      class_option :force_locales, type: :boolean, default: false,
+                                   desc: 'Replace locale files that already exist with the shipped ones.'
+
       def create_senren_dir
         empty_directory '.senren'
       end
@@ -30,6 +48,9 @@ module Senren
       def copy_base_files
         template 'base_component.rb.tt', 'app/components/senren/base_component.rb'
         template 'senren.css.tt',                'app/assets/stylesheets/senren.css'
+        # Optional: link it only if you want the palette presets. senren.css
+        # alone gives you the default, so this file costs nothing until used.
+        template 'senren_themes.css.tt',         'app/assets/stylesheets/senren_themes.css'
         template 'conventions.md.tt',            '.senren/conventions.md'
         template 'installed_components.yml.tt',  '.senren/installed_components.yml'
       end
@@ -38,6 +59,23 @@ module Senren
         copy_file Senren::Rails.registry_path, '.senren/registry.yml'
       end
 
+      # Components work without these: the English is in the code. Nothing is
+      # copied unless asked for, English included -- a copied senren.en.yml would
+      # override the app's own en.yml and pin today's wording (see
+      # LocaleInstaller). An existing file is a translation someone wrote, so it
+      # is kept unless --force-locales is given.
+      def copy_locale_files
+        locales = options[:locales]
+        if locales.empty?
+          say_status :senren, 'no locale files copied: English needs none (bin/rails senren:locales vi to add one)'
+          return
+        end
+
+        say_status :senren, "copying locale files (#{locales.join(', ')}) to config/locales"
+        installer = Senren::Rails::LocaleInstaller.new(paths: host_paths)
+        installer.install(locales: locales, force: options[:force_locales])
+      end
+
       # Switches Stimulus to on-demand loading instead of documenting it.
       #
       # Rails' default is `eagerLoadControllersFrom("controllers", application)`,
@@ -72,6 +110,7 @@ module Senren
       def print_next_steps
         say "\nSenren installed."
         say 'Next: bin/rails senren:add button card badge alert dialog'
+        say 'Translate the components: bin/rails senren:locales vi (see docs/i18n.md)'
         say 'Then: bin/rails senren:agents:sync'
       end
 

data/lib/generators/senren/install/templates/base_component.rb.tt

@@ -1,4 +1,5 @@
 require 'uri'
+require 'active_support/i18n'
 require 'view_component'
 
 module Senren
@@ -34,25 +35,51 @@ module Senren
       # Splatting html_attrs after a computed `data:` used to overwrite it
       # wholesale, so any component given a `data:` hash silently lost its
       # data-senren-component marker. MaskedInput hit this on every render.
-      data = (html_attrs[:data] || {})
-             .merge(extra.delete(:data) || {})
-             .merge(senren_component: senren_component_name)
+      data = merge_data(caller_data, extra.delete(:data), { senren_component: senren_component_name })
 
       # `class` had exactly the same defect and it was never fixed alongside
       # `data`. Every Rails tag helper accepts `class:`, so it is the first
       # thing anyone types — and splatting html_attrs replaced the computed
       # value outright, erasing the component's variant and size styling with
-      # no warning. It is merged like any other caller-supplied class instead,
-      # last so it still wins where the two genuinely conflict.
+      # no warning. It is merged like any other caller-supplied class instead.
+      #
+      # Merged, not resolved, and the distinction matters. See merge_classes.
       tag_class = merge_classes(
         classes,
         self.class::VARIANTS[@variant],
         self.class::SIZES[@size],
         @class_name,
         extra.delete(:class),
-        html_attrs[:class]
+        caller_class
       )
-      { class: tag_class, data: data, **html_attrs.except(:data, :class), **extra }
+      { class: tag_class, data: data, **html_attrs_without_class_and_data, **extra }
+    end
+
+    # For components whose root is a wrapper and whose styling lives on an inner
+    # element -- every overlay: the panel is what gets positioned, the root just
+    # hosts the controller.
+    #
+    # Same merging as root_attrs, minus VARIANTS and SIZES. Passing those to the
+    # root of a sheet applied `translate-x-full` there, and a transformed
+    # ancestor becomes the containing block for its `position: fixed`
+    # descendants -- so the panel was positioned against the shifted root and
+    # rendered off-screen. It opened; you just could not see it.
+    def wrapper_attrs(*classes, **extra)
+      data = merge_data(caller_data, extra.delete(:data), { senren_component: senren_component_name })
+      tag_class = merge_classes(classes, extra.delete(:class))
+
+      { class: tag_class.presence, data: data, **html_attrs_without_class_and_data, **extra }.compact
+    end
+
+    # The class list for the element a wrapper component actually styles.
+    #
+    # For an overlay the caller means the panel: `class_name: "max-w-2xl"` on a
+    # dialog is a request to widen the dialog, not to widen an invisible
+    # wrapper. Putting it on the root left it in the DOM doing nothing, which is
+    # harder to debug than dropping it -- the class is right there and the panel
+    # is still max-w-lg.
+    def panel_class(*classes)
+      merge_classes(classes, @class_name, caller_class)
     end
 
     def senren_component_name
@@ -79,8 +106,83 @@ module Senren
       "#{base}-#{seed.parameterize}"
     end
 
+    # Translates a string the component shows or announces: a visible label, an
+    # aria-label, sr-only text, a default placeholder, an announcement a Stimulus
+    # controller will read out.
+    #
+    #   senren_t('pagination.next', default: 'Next')
+    #   senren_t('cart.remove_item', default: 'Remove %{name}', name: item[:name])
+    #
+    # `default:` is the English text and it is required. It is what renders when
+    # the host app has no `senren.<key>` translation, which is why installing
+    # Senren needs no locale file, why a key nobody translated never raises (not
+    # even under `config.i18n.raise_on_missing_translations`, which only fires
+    # for a key with no default), and why the output is the same as it was before
+    # any string was translatable.
+    #
+    # This is I18n.t on purpose, not ViewComponent's `t`. `t` needs a view
+    # context, so it cannot run in a unit test that renders a template without
+    # Rails; it resolves a leading-dot key against the component's own sidecar
+    # scope, which is the lookup this namespace must not have; and it marks keys
+    # ending in `_html` as safe, which no Senren string is.
+    #
+    # Keys are `senren.<component>.<key>`; `senren.shared.<key>` is for a word
+    # that is the same word in more than one component. Interpolate with `%{}`.
+    # With no values passed the raw template comes back untouched, which is how a
+    # Stimulus controller is handed a string it fills in itself.
+    #
+    # A translation that names a variable the call does not pass (`%{nmae}`
+    # for `%{name}`) would raise I18n::MissingInterpolationArgument and turn a
+    # typo in a locale file into a 500. It falls back to the English instead,
+    # interpolated with the values the call did pass.
+    #
+    # Public, because the unit tests that render a template without a view
+    # delegate every public component method to it.
+    def senren_t(key, default:, **options)
+      I18n.t("senren.#{key}", default: default, **options)
+    rescue I18n::MissingInterpolationArgument
+      I18n.interpolate(default, options)
+    end
+
     private
 
+    # Callers write `data: { controller: "x" }` and `data: { "controller" => "x" }`
+    # interchangeably, and Rails renders both the same, so the merge has to see
+    # both the same. Reading with dig(:symbol) missed the String form entirely:
+    # the append never ran and the tag builder kept the caller's value alone,
+    # which for data-action removed the component's own close-on-click and
+    # arrow-key handling.
+    #
+    # `controller` and `action` are space-separated lists in Stimulus, so a
+    # caller's value is appended rather than substituted -- attaching your own
+    # controller to a Senren component must not unbind the component's.
+    APPENDABLE_DATA = %i[controller action].freeze
+
+    def merge_data(*sources)
+      sources.compact.map { |h| h.transform_keys(&:to_sym) }.reduce({}) do |acc, incoming|
+        acc.merge(incoming) do |key, old, new|
+          # Split before uniq. Deduplicating the two whole strings only catches an
+        # exact repeat: `data: { controller: "a senren--popover" }` on a popover
+        # produced "a senren--popover senren--popover", and Stimulus reads that
+        # list literally -- same controller connected twice on one element, every
+        # action firing twice, so a toggle opens and immediately closes.
+        APPENDABLE_DATA.include?(key) ? [old, new].map(&:to_s).join(' ').split.uniq.join(' ') : new
+        end
+      end
+    end
+
+    def caller_class
+      html_attrs[:class] || html_attrs['class']
+    end
+
+    def caller_data
+      html_attrs[:data] || html_attrs['data']
+    end
+
+    def html_attrs_without_class_and_data
+      html_attrs.reject { |k, _| %w[class data].include?(k.to_s) }
+    end
+
     def safe_url(value, fallback: '#', protocols: SAFE_URL_PROTOCOLS)
       url = value.to_s.strip
       return fallback if url.empty?
@@ -119,6 +221,33 @@ module Senren
       raise ArgumentError, "Unknown #{label}: #{value.inspect}. Allowed: #{table.keys.join(', ')}"
     end
 
+    # Concatenation, not conflict resolution — and the caller's class going last
+    # in the attribute does not make it win.
+    #
+    # `class="max-w-lg max-w-2xl"` leaves both declarations live. Which applies
+    # is decided by the order the two rules appear in the stylesheet, because
+    # their specificity is identical; the order of the attribute is not an input
+    # to that at all. Tailwind emits the named scale alphabetically, so measured
+    # against a real build:
+    #
+    #   dialog base max-w-lg + class_name: "max-w-sm"  -> sm wins   (works)
+    #   dialog base max-w-lg + class_name: "max-w-2xl" -> lg wins   (silent no-op)
+    #
+    # Narrowing happens to work and widening happens not to, and nothing about
+    # either class says which you are getting. Any pair drawn from one utility
+    # family has this property.
+    #
+    # Resolving it properly means knowing which Tailwind utilities conflict,
+    # which is irregular enough (`text-sm` and `text-red-500` share a prefix and
+    # are different families) that a partial implementation would silently drop
+    # a component's own styling — a worse failure than the one it replaces. That
+    # is what tailwind_merge is for, and taking the dependency is a decision
+    # this library has not made.
+    #
+    # Until it does, the deterministic override is Tailwind's own important
+    # modifier, which beats source order rather than depending on it:
+    #
+    #   render Senren::DialogComponent.new(class_name: "max-w-2xl!")
     def merge_classes(*sources)
       sources.flatten.map { |s| s.to_s.strip }.reject(&:empty?).join(' ')
     end

data/lib/generators/senren/install/templates/conventions.md.tt

@@ -42,6 +42,63 @@ and obey it strictly.
    # NOT app/components
    ```
 
+9. **Do not pass `type:` to a button inside a form.** `ButtonComponent`
+   omits the attribute, so the browser's own rule applies and the button
+   submits, exactly as plain HTML does. Pass `type: :button` only for a
+   control that must *not* submit — a dialog, sheet, or menu trigger.
+   ```erb
+   <%%= form_with url: sessions_path do %>
+     <%%= render(Senren::ButtonComponent.new(variant: :primary)) { "Sign in" } %>
+   <%% end %>
+
+   <%%= render(Senren::ButtonComponent.new(type: :button)) { "Open dialog" } %>
+   ```
+
+10. **Load `senren_themes.css` after `senren.css`.** The install writes both.
+    `senren.css` declares the token set in `:root`; `senren_themes.css`
+    redeclares it under `[data-senren-theme="..."]` for the `rose`, `slate`,
+    `indigo`, `emerald`, and `amber` presets. The two selectors have equal
+    specificity, so source order decides which wins. In the wrong order every
+    file still loads, the attribute is still on `<html>`, nothing errors — and
+    the page renders in the default palette.
+    ```erb
+    <%%= stylesheet_link_tag "senren" %>
+    <%%= stylesheet_link_tag "senren_themes" %>
+
+    <html data-senren-theme="rose">   <%%# omit for the default palette %>
+    ```
+    The attribute belongs on `<html>` so it composes with `.dark` rather than
+    replacing it. Add a palette by copying a block and changing values; no
+    component reads the theme, so none needs editing.
+
+11. **`class:` is merged, not resolved.** Passing `class_name: "max-w-sm"` to a
+    dialog produces `class="… max-w-lg max-w-sm …"` — the component's own class
+    is still there. Both have the same specificity, so the winner is decided by
+    which one Tailwind emits later in the stylesheet, **not** by the order in
+    the attribute. Narrowing a dialog works; widening it silently does not.
+    When overriding a utility the component already uses, add Tailwind's
+    important modifier:
+    ```erb
+    <%%= render Senren::DialogComponent.new(class_name: "max-w-2xl!") %>
+    ```
+    Classes from families the component does not use need no modifier.
+
+12. **Every word a component shows or announces goes through `senren_t`.**
+    Visible text, `aria-label`, `sr-only` text, a default `label:` or
+    `placeholder:`, and any sentence a Stimulus controller will say. The English
+    is the `default:`, the key is `<component>.<key>`, and both are literals:
+    ```ruby
+    senren_t('pagination.next', default: 'Next')
+    senren_t('cart.remove_item', default: 'Remove %{name}', name: item[:name])
+    def initialize(label: senren_t('tabs.label', default: 'Tabs'), **html)
+    ```
+    Never hard-code a sentence in a template, and never write one in a Stimulus
+    controller: hand the controller a translated string as a value. An app with
+    no locale file renders the English unchanged; to change a word, set its
+    `senren.*` key in a locale file, and to add a language, start from
+    `bin/rails senren:locales en` (`bin/rails senren:locales vi` installs a
+    shipped translation).
+
 ## File ownership
 
 | Path                                | Owned by         |

data/lib/generators/senren/install/templates/senren_themes.css.tt

@@ -0,0 +1,339 @@
+/*
+ * Senren UI - optional palette presets.
+ *
+ * Link this after senren.css and set data-senren-theme on <html> to switch:
+ *
+ *   <%%= stylesheet_link_tag "senren" %>
+ *   <%%= stylesheet_link_tag "senren_themes" %>
+ *
+ *   <html data-senren-theme="slate">
+ *
+ * Leave the attribute off for the default Spring Garden palette, which
+ * senren.css declares in :root.
+ *
+ * Every theme below is nothing but a re-declaration of the same token set that
+ * senren.css defines. No component is aware that themes exist: components read
+ * hsl(var(--senren-*)) and inherit whatever is in scope. Adding your own theme
+ * means copying one of these blocks and changing the values — there is no
+ * component to touch and no build step to run.
+ *
+ * Scoping: [data-senren-theme] on <html>, so it composes with the existing
+ * .dark class rather than replacing it. Each theme therefore ships a light and
+ * a dark block, and light/dark stays orthogonal to the palette choice.
+ *
+ * `senren` is the default and needs no block: it is what senren.css already
+ * declares in :root and .dark.
+ *
+ * test/themes_test.rb asserts every theme here declares the complete token set,
+ * so a palette cannot ship with a variable quietly missing.
+ */
+
+/* ── slate ────────────────────────────────────────────────────────────────
+   Cool neutrals, near-black primary, tight radius. The restrained look most
+   developer tools converge on. */
+[data-senren-theme="slate"] {
+  --senren-background: 0 0% 100%;
+  --senren-foreground: 222 47% 11%;
+  --senren-muted: 210 40% 96%;
+  --senren-muted-foreground: 215 16% 47%;
+  --senren-card: 0 0% 100%;
+  --senren-card-foreground: 222 47% 11%;
+  --senren-popover: 0 0% 100%;
+  --senren-popover-foreground: 222 47% 11%;
+  --senren-border: 214 32% 91%;
+  --senren-input: 214 32% 91%;
+  --senren-ring: 222 47% 11%;
+  --senren-primary: 222 47% 11%;
+  --senren-primary-foreground: 210 40% 98%;
+  --senren-secondary: 210 40% 96%;
+  --senren-secondary-foreground: 222 47% 11%;
+  --senren-accent: 210 40% 94%;
+  --senren-accent-foreground: 222 47% 11%;
+  --senren-destructive: 0 72% 51%;
+  --senren-destructive-foreground: 210 40% 98%;
+  --senren-success: 142 71% 36%;
+  --senren-success-foreground: 210 40% 98%;
+  --senren-warning: 38 92% 50%;
+  --senren-warning-foreground: 222 47% 11%;
+  --senren-radius: 0.375rem;
+  --senren-palette-sky: 217 91% 60%;
+  --senren-palette-sakura: 330 81% 60%;
+  --senren-palette-pond: 199 89% 48%;
+  --senren-palette-leaf: 142 71% 45%;
+  --senren-palette-iris: 258 90% 66%;
+  --senren-palette-paper: 210 40% 98%;
+}
+
+.dark[data-senren-theme="slate"] {
+  --senren-background: 222 47% 7%;
+  --senren-foreground: 210 40% 98%;
+  --senren-muted: 217 33% 17%;
+  --senren-muted-foreground: 215 20% 65%;
+  --senren-card: 222 47% 9%;
+  --senren-card-foreground: 210 40% 98%;
+  --senren-popover: 222 47% 9%;
+  --senren-popover-foreground: 210 40% 98%;
+  --senren-border: 217 33% 20%;
+  --senren-input: 217 33% 20%;
+  --senren-ring: 213 27% 84%;
+  --senren-primary: 210 40% 98%;
+  --senren-primary-foreground: 222 47% 11%;
+  --senren-secondary: 217 33% 17%;
+  --senren-secondary-foreground: 210 40% 98%;
+  --senren-accent: 217 33% 20%;
+  --senren-accent-foreground: 210 40% 98%;
+  --senren-destructive: 0 63% 46%;
+  --senren-destructive-foreground: 210 40% 98%;
+  --senren-success: 142 60% 40%;
+  --senren-success-foreground: 210 40% 98%;
+  --senren-warning: 38 85% 52%;
+  --senren-warning-foreground: 222 47% 11%;
+}
+
+/* ── indigo ───────────────────────────────────────────────────────────────
+   The default of a great many B2B products: white surfaces, indigo action
+   colour, cool grey text. */
+[data-senren-theme="indigo"] {
+  --senren-background: 0 0% 100%;
+  --senren-foreground: 224 71% 4%;
+  --senren-muted: 220 14% 96%;
+  --senren-muted-foreground: 220 9% 46%;
+  --senren-card: 0 0% 100%;
+  --senren-card-foreground: 224 71% 4%;
+  --senren-popover: 0 0% 100%;
+  --senren-popover-foreground: 224 71% 4%;
+  --senren-border: 220 13% 91%;
+  --senren-input: 220 13% 91%;
+  --senren-ring: 239 84% 67%;
+  --senren-primary: 243 75% 59%;
+  --senren-primary-foreground: 0 0% 100%;
+  --senren-secondary: 226 100% 97%;
+  --senren-secondary-foreground: 243 75% 40%;
+  --senren-accent: 226 100% 94%;
+  --senren-accent-foreground: 243 75% 40%;
+  --senren-destructive: 0 84% 60%;
+  --senren-destructive-foreground: 0 0% 100%;
+  --senren-success: 160 84% 32%;
+  --senren-success-foreground: 0 0% 100%;
+  --senren-warning: 32 95% 52%;
+  --senren-warning-foreground: 224 71% 4%;
+  --senren-radius: 0.5rem;
+  --senren-palette-sky: 217 91% 60%;
+  --senren-palette-sakura: 330 81% 70%;
+  --senren-palette-pond: 199 89% 60%;
+  --senren-palette-leaf: 160 84% 39%;
+  --senren-palette-iris: 243 75% 59%;
+  --senren-palette-paper: 220 14% 96%;
+}
+
+.dark[data-senren-theme="indigo"] {
+  --senren-background: 229 42% 8%;
+  --senren-foreground: 220 14% 96%;
+  --senren-muted: 229 30% 16%;
+  --senren-muted-foreground: 218 11% 65%;
+  --senren-card: 229 40% 11%;
+  --senren-card-foreground: 220 14% 96%;
+  --senren-popover: 229 40% 11%;
+  --senren-popover-foreground: 220 14% 96%;
+  --senren-border: 229 25% 22%;
+  --senren-input: 229 25% 22%;
+  --senren-ring: 239 84% 72%;
+  --senren-primary: 239 84% 70%;
+  --senren-primary-foreground: 229 42% 8%;
+  --senren-secondary: 229 30% 18%;
+  --senren-secondary-foreground: 226 100% 88%;
+  --senren-accent: 229 30% 22%;
+  --senren-accent-foreground: 226 100% 92%;
+  --senren-destructive: 0 72% 55%;
+  --senren-destructive-foreground: 0 0% 100%;
+  --senren-success: 160 70% 42%;
+  --senren-success-foreground: 229 42% 8%;
+  --senren-warning: 32 90% 58%;
+  --senren-warning-foreground: 229 42% 8%;
+}
+
+/* ── emerald ──────────────────────────────────────────────────────────────
+   Green action colour on soft neutrals, with a generous radius. Common in
+   finance, health, and sustainability products. */
+[data-senren-theme="emerald"] {
+  --senren-background: 150 20% 99%;
+  --senren-foreground: 160 40% 10%;
+  --senren-muted: 150 24% 95%;
+  --senren-muted-foreground: 160 12% 42%;
+  --senren-card: 0 0% 100%;
+  --senren-card-foreground: 160 40% 10%;
+  --senren-popover: 0 0% 100%;
+  --senren-popover-foreground: 160 40% 10%;
+  --senren-border: 152 22% 88%;
+  --senren-input: 152 22% 88%;
+  --senren-ring: 160 84% 39%;
+  --senren-primary: 160 84% 30%;
+  --senren-primary-foreground: 150 30% 98%;
+  --senren-secondary: 152 45% 92%;
+  --senren-secondary-foreground: 160 60% 20%;
+  --senren-accent: 168 60% 90%;
+  --senren-accent-foreground: 168 70% 18%;
+  --senren-destructive: 0 74% 50%;
+  --senren-destructive-foreground: 150 30% 98%;
+  --senren-success: 160 84% 32%;
+  --senren-success-foreground: 150 30% 98%;
+  --senren-warning: 40 95% 50%;
+  --senren-warning-foreground: 160 40% 10%;
+  --senren-radius: 0.75rem;
+  --senren-palette-sky: 190 80% 45%;
+  --senren-palette-sakura: 340 70% 82%;
+  --senren-palette-pond: 172 66% 78%;
+  --senren-palette-leaf: 145 63% 49%;
+  --senren-palette-iris: 250 60% 78%;
+  --senren-palette-paper: 150 24% 95%;
+}
+
+.dark[data-senren-theme="emerald"] {
+  --senren-background: 165 40% 6%;
+  --senren-foreground: 150 24% 95%;
+  --senren-muted: 165 28% 14%;
+  --senren-muted-foreground: 152 14% 62%;
+  --senren-card: 165 38% 9%;
+  --senren-card-foreground: 150 24% 95%;
+  --senren-popover: 165 38% 9%;
+  --senren-popover-foreground: 150 24% 95%;
+  --senren-border: 165 22% 20%;
+  --senren-input: 165 22% 20%;
+  --senren-ring: 160 84% 45%;
+  --senren-primary: 158 74% 44%;
+  --senren-primary-foreground: 165 40% 6%;
+  --senren-secondary: 165 28% 16%;
+  --senren-secondary-foreground: 152 45% 88%;
+  --senren-accent: 168 40% 20%;
+  --senren-accent-foreground: 168 60% 88%;
+  --senren-destructive: 0 66% 52%;
+  --senren-destructive-foreground: 150 30% 98%;
+  --senren-success: 158 70% 42%;
+  --senren-success-foreground: 165 40% 6%;
+  --senren-warning: 40 88% 56%;
+  --senren-warning-foreground: 165 40% 6%;
+}
+
+/* ── rose ─────────────────────────────────────────────────────────────────
+   Warm neutrals and a soft pink action colour, with the roundest corners of
+   the set. The consumer-facing end of SaaS. */
+[data-senren-theme="rose"] {
+  --senren-background: 20 40% 99%;
+  --senren-foreground: 340 30% 12%;
+  --senren-muted: 20 30% 96%;
+  --senren-muted-foreground: 340 8% 46%;
+  --senren-card: 0 0% 100%;
+  --senren-card-foreground: 340 30% 12%;
+  --senren-popover: 0 0% 100%;
+  --senren-popover-foreground: 340 30% 12%;
+  --senren-border: 20 25% 90%;
+  --senren-input: 20 25% 90%;
+  --senren-ring: 347 77% 60%;
+  --senren-primary: 347 77% 50%;
+  --senren-primary-foreground: 20 40% 99%;
+  --senren-secondary: 350 80% 95%;
+  --senren-secondary-foreground: 347 70% 32%;
+  --senren-accent: 350 80% 92%;
+  --senren-accent-foreground: 347 70% 30%;
+  --senren-destructive: 0 78% 52%;
+  --senren-destructive-foreground: 20 40% 99%;
+  --senren-success: 150 62% 36%;
+  --senren-success-foreground: 20 40% 99%;
+  --senren-warning: 35 95% 55%;
+  --senren-warning-foreground: 340 30% 12%;
+  --senren-radius: 1rem;
+  --senren-palette-sky: 205 85% 58%;
+  --senren-palette-sakura: 350 85% 84%;
+  --senren-palette-pond: 190 70% 82%;
+  --senren-palette-leaf: 140 55% 55%;
+  --senren-palette-iris: 280 70% 78%;
+  --senren-palette-paper: 20 30% 96%;
+}
+
+.dark[data-senren-theme="rose"] {
+  --senren-background: 340 22% 8%;
+  --senren-foreground: 20 30% 96%;
+  --senren-muted: 340 16% 16%;
+  --senren-muted-foreground: 340 8% 64%;
+  --senren-card: 340 20% 11%;
+  --senren-card-foreground: 20 30% 96%;
+  --senren-popover: 340 20% 11%;
+  --senren-popover-foreground: 20 30% 96%;
+  --senren-border: 340 14% 22%;
+  --senren-input: 340 14% 22%;
+  --senren-ring: 347 77% 66%;
+  --senren-primary: 347 82% 62%;
+  --senren-primary-foreground: 340 22% 8%;
+  --senren-secondary: 340 16% 18%;
+  --senren-secondary-foreground: 350 80% 90%;
+  --senren-accent: 340 20% 24%;
+  --senren-accent-foreground: 350 80% 90%;
+  --senren-destructive: 0 70% 55%;
+  --senren-destructive-foreground: 20 40% 99%;
+  --senren-success: 150 55% 44%;
+  --senren-success-foreground: 340 22% 8%;
+  --senren-warning: 35 90% 60%;
+  --senren-warning-foreground: 340 22% 8%;
+}
+
+/* ── amber ────────────────────────────────────────────────────────────────
+   Sand-toned neutrals, amber action colour, near-square corners. The
+   document-and-workspace look. */
+[data-senren-theme="amber"] {
+  --senren-background: 40 30% 98%;
+  --senren-foreground: 30 25% 12%;
+  --senren-muted: 40 24% 94%;
+  --senren-muted-foreground: 32 10% 44%;
+  --senren-card: 40 40% 99%;
+  --senren-card-foreground: 30 25% 12%;
+  --senren-popover: 40 40% 99%;
+  --senren-popover-foreground: 30 25% 12%;
+  --senren-border: 36 20% 87%;
+  --senren-input: 36 20% 87%;
+  --senren-ring: 32 95% 44%;
+  --senren-primary: 30 30% 16%;
+  --senren-primary-foreground: 40 30% 98%;
+  --senren-secondary: 40 60% 90%;
+  --senren-secondary-foreground: 30 40% 20%;
+  --senren-accent: 38 80% 88%;
+  --senren-accent-foreground: 30 45% 20%;
+  --senren-destructive: 4 74% 48%;
+  --senren-destructive-foreground: 40 30% 98%;
+  --senren-success: 140 55% 34%;
+  --senren-success-foreground: 40 30% 98%;
+  --senren-warning: 32 95% 46%;
+  --senren-warning-foreground: 40 30% 98%;
+  --senren-radius: 0.25rem;
+  --senren-palette-sky: 200 75% 50%;
+  --senren-palette-sakura: 20 80% 82%;
+  --senren-palette-pond: 190 60% 80%;
+  --senren-palette-leaf: 100 45% 50%;
+  --senren-palette-iris: 265 55% 74%;
+  --senren-palette-paper: 40 24% 94%;
+}
+
+.dark[data-senren-theme="amber"] {
+  --senren-background: 30 18% 8%;
+  --senren-foreground: 40 24% 94%;
+  --senren-muted: 30 14% 15%;
+  --senren-muted-foreground: 36 10% 62%;
+  --senren-card: 30 16% 11%;
+  --senren-card-foreground: 40 24% 94%;
+  --senren-popover: 30 16% 11%;
+  --senren-popover-foreground: 40 24% 94%;
+  --senren-border: 30 12% 21%;
+  --senren-input: 30 12% 21%;
+  --senren-ring: 32 95% 55%;
+  --senren-primary: 36 90% 58%;
+  --senren-primary-foreground: 30 25% 10%;
+  --senren-secondary: 30 14% 17%;
+  --senren-secondary-foreground: 40 60% 86%;
+  --senren-accent: 32 30% 22%;
+  --senren-accent-foreground: 38 80% 86%;
+  --senren-destructive: 4 68% 52%;
+  --senren-destructive-foreground: 40 30% 98%;
+  --senren-success: 140 50% 42%;
+  --senren-success-foreground: 30 18% 8%;
+  --senren-warning: 32 90% 56%;
+  --senren-warning-foreground: 30 18% 8%;
+}

data/lib/senren/rails/agent_rules_writer.rb

@@ -106,6 +106,13 @@ module Senren
             publishes every file under an asset path, so component `.rb` and
             `.html.erb` source is precompiled into `public/assets` and served
             over HTTP. Put sidecar assets in `app/components/assets` instead.
+          - A button inside a form needs no `type:`. ButtonComponent omits the
+            attribute so the browser submits, as plain HTML does. Pass
+            `type: :button` only for a trigger that must not submit.
+          - Text a component shows or announces goes through
+            `senren_t('<component>.<key>', default: 'English')`, with a literal key
+            and default. Never hard-code a sentence in a template or in a Stimulus
+            controller; hand the controller a translated string as a value.
 
           ## Important Files