senren-ui 0.1.6 → 0.2.0

data/lib/senren/rails/skill_writer.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 require 'yaml'
+require 'senren/rails/marker_block'
+require 'senren/rails/safe_write'
 
 module Senren
   module Rails
@@ -30,16 +32,23 @@ module Senren
         installed = installed_names
         body = render(installed)
 
-        paths.senren_dir.mkpath
+        SafeWrite.mkdir_p!(paths.senren_dir, paths.root, 'skill.md')
         existing = paths.skill_file.exist? ? paths.skill_file.read : default_outer_template
 
         new_content = inject(existing, body)
-        paths.skill_file.write(new_content)
+        atomic_write(paths.skill_file, new_content)
         paths.skill_file
       end
 
       private
 
+      # Routed through SafeWrite rather than hand-rolled. assert_inside! plus
+      # rename was already safe for an existing symlink, but not for a dangling
+      # one, and two other writers proved that hand-rolled writes drift.
+      def atomic_write(path, content)
+        SafeWrite.write!(path, content, paths.root, path.to_s)
+      end
+
       def installed_names
         path = paths.installed_components
         return [] unless path.exist?
@@ -110,21 +119,51 @@ module Senren
         end
       end
 
+      # Describes what is installed, not what the registry offers.
+      #
+      # This rendered the registry default, so after `senren:add select
+      # --no-client` the skill file told agents to use
+      # `senren--select` and named a controller file that is not on disk. The
+      # copier computes the truth and writes it to the ledger — with a comment
+      # saying "never record client behavior in the ledger that was not
+      # installed" — and nothing read it back. The gem's flagship feature was
+      # wrong for precisely the installs where the flag was exercised.
       def client_summary(comp)
         return 'none' unless comp.client?
+        return 'none (installed without its Stimulus controller)' unless installed_with_client?(comp.name)
 
         path = "app/javascript/controllers/senren/#{comp.name}_controller.js"
         "Stimulus `#{comp.controller}` (`#{path}`)"
       end
 
+      # nil when the ledger predates this field, in which case the registry
+      # default is the best available answer.
+      def installed_with_client?(name)
+        entry = ledger_entries.find { |e| e['name'] == name }
+        return true if entry.nil? || !entry.key?('client')
+
+        entry['client']
+      end
+
+      def ledger_entries
+        @ledger_entries ||= begin
+          path = paths.installed_components
+          path.exist? ? Array((YAML.safe_load_file(path) || {})['installed']) : []
+        end
+      end
+
       def format_list(items)
         return '_none_' if items.empty?
 
         items.map { |i| "`#{i}`" }.join(', ')
       end
 
+      # NAME_PATTERN accepts consecutive underscores, and "foo__bar".split("_")
+      # yields an empty segment, so w[0] was nil and this raised NoMethodError —
+      # after the files were copied and the ledger written, leaving a
+      # half-completed install. Empty segments are dropped instead.
       def humanize(name)
-        name.split('_').map { |w| w[0].upcase + w[1..] }.join
+        name.split('_').reject(&:empty?).map { |w| w[0].upcase + w[1..] }.join
       end
 
       def ruby_class_for(name)
@@ -132,13 +171,10 @@ module Senren
       end
 
       def inject(existing, generated_body)
-        if existing.include?(START_MARKER) && existing.include?(END_MARKER)
-          before = existing.split(START_MARKER, 2).first
-          after  = existing.split(END_MARKER, 2).last
-          "#{before}#{START_MARKER}\n\n#{generated_body}\n\n#{END_MARKER}#{after}"
-        else
-          "#{existing.rstrip}\n\n#{START_MARKER}\n\n#{generated_body}\n\n#{END_MARKER}\n"
-        end
+        MarkerBlock.inject(
+          existing, generated_body,
+          start_marker: START_MARKER, end_marker: END_MARKER, label: paths.skill_file.to_s
+        )
       end
 
       def default_outer_template
@@ -151,7 +187,7 @@ module Senren
 
           - Use Senren components before writing custom HTML.
           - Use ViewComponent for reusable UI; Turbo for server state; Stimulus for local behavior only.
-          - Do not introduce React, Vue, Alpine, or any external state framework.
+          - Keep interactivity in Stimulus rather than a client-side framework.
           - Do not hard-code colors; use semantic Tailwind tokens like `bg-background`, `text-foreground`, `bg-primary`.
 
           ## Installed Components

data/lib/senren/rails/version.rb

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

data/lib/senren/rails.rb

@@ -12,9 +12,9 @@ module Senren
     autoload :SkillWriter,      'senren/rails/skill_writer'
     autoload :AgentRulesWriter, 'senren/rails/agent_rules_writer'
     autoload :LlmsWriter,       'senren/rails/llms_writer'
-    autoload :Installer,        'senren/rails/installer'
     autoload :Doctor,           'senren/rails/doctor'
     autoload :HostPaths,        'senren/rails/host_paths'
+    autoload :MarkerBlock,      'senren/rails/marker_block'
 
     def self.gem_root
       GEM_ROOT

data/lib/senren-ui.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# The entry point Bundler reaches for by default.
+#
+# `gem "senren-ui"` with no `require:` option makes Bundler try "senren-ui",
+# then its hyphen-to-slash fallback "senren/ui". Without this file both fail —
+# and Bundler swallows the second LoadError, so the app boots with no engine,
+# no rake tasks, and no AssetPathGuard, while the generator and `senren:add`
+# keep working because they require "senren/rails" themselves.
+#
+# That combination is the worst possible failure mode: the install looks
+# healthy and the production source-disclosure guard is simply absent. The
+# README documents `require: "senren/rails"`, which is still correct; this makes
+# forgetting it harmless rather than silent.
+require 'senren/rails'

data/lib/tasks/senren.rake

@@ -6,8 +6,8 @@ namespace :senren do
   desc 'Install one or more Senren components. Preferred: bin/rails senren:add button dialog. ' \
        "Legacy: bin/rails 'senren:add[button,dialog]'"
   task :add, [:names] do |_t, args|
-    names = parse_names(args)
-    options = parse_options
+    names = SenrenRakeArgs.names(args)
+    options = SenrenRakeArgs.options
 
     Senren::Rails::ComponentInstaller.new.install(
       names: names,
@@ -59,21 +59,47 @@ end
 
 # Helpers ---------------------------------------------------------------
 
-def parse_names(args)
-  raw = []
-  raw.concat(args.extras)
-  raw << args[:names] if args[:names]
-  raw.concat(ARGV.drop_while { |a| !a.start_with?('senren:') }.drop(1))
-  Senren::Rails::ComponentInstaller.normalize_names(raw)
-end
+# Namespaced deliberately. These were top-level `def`s, which Ruby defines as
+# private methods on Object — so loading this rake file gave every class in the
+# host app a `parse_options` and a `parse_names`. `parse_options` is a
+# plausible name for an app to define itself.
+module SenrenRakeArgs
+  module_function
 
-def parse_options
-  client_override =
-    if ARGV.include?('--client')
-      true
-    elsif ARGV.include?('--no-client')
-      false
-    end
+  def names(args)
+    raw = []
+    raw.concat(args.extras)
+    raw << args[:names] if args[:names]
+    raw.concat(trailing_arguments)
+    Senren::Rails::ComponentInstaller.normalize_names(raw)
+  end
 
-  { client_override: client_override, force: ARGV.include?('--force') }
+  def options
+    words = trailing_arguments
+    client_override = true if words.include?('--client')
+    client_override = false if words.include?('--no-client')
+
+    { client_override: client_override, force: words.include?('--force') }
+  end
+
+  # The words that belong to `senren:add`, and only those.
+  #
+  # This used to be `ARGV.drop_while { ... }.drop(1)` with no upper bound, so
+  # every later argument on the command line was swallowed: `rake
+  # 'senren:add[button]' db:seed` tried to install a component named "db:seed"
+  # and aborted the whole invocation, and a `--force` intended for a different
+  # task silently enabled overwriting here.
+  def trailing_arguments
+    ARGV
+      .drop_while { |arg| !arg.start_with?('senren:') }
+      .drop(1)
+      .take_while { |arg| !rake_target?(arg) }
+  end
+
+  # A namespaced task (`db:seed`) or an environment assignment (`RAILS_ENV=x`).
+  # Component names are matched by Registry::NAME_PATTERN and can contain
+  # neither character.
+  def rake_target?(arg)
+    arg.include?(':') || arg.include?('=')
+  end
 end

data/registry/components.yml

@@ -1051,3 +1051,48 @@ components:
     ai:
       use_for: [light formatting (bold/italic/links/lists) only]
       avoid:   [tables, embeds, media - out of scope for v0.1]
+
+  product_card:
+    category: saas
+    client: false
+    can_have_client: false
+    files:
+      - app/components/senren/product_card_component.rb
+      - app/components/senren/product_card_component.html.erb
+    depends_on: []
+    pairs_with: [cart, badge, button, card]
+    variants: [default, featured]
+    accessibility:
+      - Image alt text repeats the product title; decorative placeholder is aria-hidden.
+      - Out of stock disables the submit button rather than hiding it.
+    ai:
+      use_for:
+        - product listings
+        - catalogue grids
+        - storefront search results
+      avoid:
+        - carrying cart state; adding to a cart is a form submission the server owns
+
+  cart:
+    category: saas
+    client: true
+    can_have_client: true
+    controller: senren--cart
+    files:
+      - app/components/senren/cart_component.rb
+      - app/components/senren/cart_component.html.erb
+      - app/javascript/controllers/senren/cart_controller.js
+    depends_on: []
+    pairs_with: [product_card, button, separator, empty_state]
+    variants: [default, flush]
+    accessibility:
+      - Quantity steppers are grouped with an accessible name per line.
+      - Subtotal is text, not an image, so it is announced on change.
+    ai:
+      use_for:
+        - cart summary panels
+        - checkout side panels
+        - order review before payment
+      avoid:
+        - persisting quantities; the controller is display-only and the server is authoritative
+        - formatting currency in the component; pass price_cents and a formatted price

data/registry/recipes.yml

@@ -77,3 +77,15 @@ recipes:
       - native_select
       - button
       - alert
+
+  storefront:
+    description: Product listing with a cart panel; the server owns the cart, the widget owns the UI.
+    components:
+      - app_shell
+      - top_nav
+      - page_header
+      - product_card
+      - cart
+      - badge
+      - button
+      - empty_state

data/templates/components/alert_dialog/alert_dialog_component.rb

@@ -13,7 +13,7 @@ module Senren
 
     def initialize(variant: :default, id: nil, class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
-      @dom_id = id || "senren-alert-dialog-#{SecureRandom.hex(3)}"
+      @dom_id = id || senren_dom_id
     end
 
     attr_reader :dom_id

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

@@ -4,7 +4,7 @@
   <% 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 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 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/aspect_ratio/aspect_ratio_component.rb

@@ -10,5 +10,12 @@ module Senren
     }.freeze
 
     SIZES = { md: '' }.freeze
+
+    # BaseComponent defaults to `variant: :default`, which this component does
+    # not define, so `.new` with no variant raised instead of rendering. The
+    # default is :square (the neutral ratio).
+    def initialize(variant: :square, **args)
+      super
+    end
   end
 end

data/templates/components/avatar/avatar_component.rb

@@ -17,7 +17,14 @@ module Senren
       @fallback = fallback.presence || initials.presence || initials_from_alt
     end
 
-    attr_reader :src, :alt, :fallback
+    attr_reader :alt, :fallback
+
+    # Avatar sources are user-controlled by nature — a profile URL is the
+    # canonical example — and this one reaches image_tag. Rails' asset_path
+    # incidentally neutralises `javascript:`, so this is not XSS, but an
+    # off-origin `//tracker.example/x.gif` is a beacon that fires for every
+    # viewer of the page. safe_media_url is the media-specific policy.
+    def src = @src && safe_media_url(@src)
 
     private
 

data/templates/components/cart/cart_component.html.erb

@@ -0,0 +1,61 @@
+<%= tag.section(**root_attrs("flex flex-col rounded-(--senren-radius) border bg-[hsl(var(--senren-card))] shadow-sm", id: dom_id, "aria-label": title, data: { controller: "senren--cart", "senren--cart-currency-value": currency, "senren--cart-subtotal-cents-value": subtotal_cents })) do %>
+  <header class="flex items-center justify-between border-b border-[hsl(var(--senren-border))] px-4 py-3">
+    <h2 class="text-sm font-semibold text-[hsl(var(--senren-foreground))]"><%= title %></h2>
+    <span class="text-sm text-[hsl(var(--senren-muted-foreground))]" data-senren--cart-target="count"><%= total_quantity %></span>
+  </header>
+
+  <% if empty? %>
+    <p class="px-4 py-8 text-center text-sm text-[hsl(var(--senren-muted-foreground))]"><%= empty_text %></p>
+  <% else %>
+    <ul class="divide-y divide-[hsl(var(--senren-border))]">
+      <% items.each do |item| %>
+        <li class="flex items-center gap-3 px-4 py-3"
+            data-senren--cart-target="line"
+            data-line-id="<%= item[:id] %>"
+            data-price-cents="<%= item[:price_cents] %>">
+          <% if (image = safe_media_url(item[:image_url])) %>
+            <img src="<%= image %>" alt="" loading="lazy" class="h-12 w-12 shrink-0 rounded-(--senren-radius) object-cover">
+          <% else %>
+            <div class="h-12 w-12 shrink-0 rounded-(--senren-radius) bg-[hsl(var(--senren-muted)/0.5)]" aria-hidden="true"></div>
+          <% end %>
+
+          <div class="min-w-0 flex-1">
+            <p class="truncate text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= item[:name] %></p>
+            <p class="text-sm text-[hsl(var(--senren-muted-foreground))]" data-senren--cart-target="lineTotal"><%= line_total(item) %></p>
+          </div>
+
+          <div class="flex items-center gap-1" role="group" aria-label="<%= item[:name] %> quantity">
+            <button type="button"
+                    data-action="click->senren--cart#decrement"
+                    aria-label="Decrease <%= item[:name] %> quantity"
+                    class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] text-sm hover:bg-[hsl(var(--senren-accent))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]">&minus;</button>
+
+            <output class="w-8 text-center text-sm tabular-nums text-[hsl(var(--senren-foreground))]"
+                    data-senren--cart-target="quantity"><%= item[:quantity] %></output>
+
+            <button type="button"
+                    data-action="click->senren--cart#increment"
+                    aria-label="Increase <%= item[:name] %> quantity"
+                    class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] text-sm hover:bg-[hsl(var(--senren-accent))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]">+</button>
+          </div>
+
+          <button type="button"
+                  data-action="click->senren--cart#remove"
+                  aria-label="Remove <%= item[:name] %>"
+                  class="inline-flex h-8 cursor-pointer items-center rounded-(--senren-radius) px-2 text-sm text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-destructive))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]">Remove</button>
+        </li>
+      <% end %>
+    </ul>
+
+    <footer class="flex items-center justify-between gap-3 border-t border-[hsl(var(--senren-border))] px-4 py-3">
+      <div class="text-sm text-[hsl(var(--senren-muted-foreground))]">
+        Subtotal
+        <span class="ml-1 font-semibold text-[hsl(var(--senren-foreground))]" data-senren--cart-target="subtotal"><%= subtotal %></span>
+      </div>
+
+      <% if safe_checkout_url %>
+        <a href="<%= safe_checkout_url %>" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]"><%= checkout_label %></a>
+      <% end %>
+    </footer>
+  <% end %>
+<% end %>

data/templates/components/cart/cart_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Senren
+  # A shopping cart: line items with quantity steppers, a live subtotal, and
+  # removal.
+  #
+  # The server owns the cart. This component owns the widget. The Stimulus
+  # controller only does what does not round-trip pleasantly — stepping a
+  # quantity and recomputing the displayed subtotal while the user clicks — and
+  # announces the result with senren--cart:changed so a host app can update a
+  # header badge without reaching inside.
+  #
+  # Money arrives twice, and on purpose: `price` already formatted for display,
+  # and `price_cents` as an integer for arithmetic. Formatting is locale- and
+  # money-library-specific and belongs to the host app. Doing arithmetic on a
+  # formatted string is how currency bugs start.
+  class CartComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))]',
+      flush: 'border-transparent shadow-none'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    def initialize(items: [], currency: '$', title: 'Cart', empty_text: 'Your cart is empty.',
+                   checkout_url: nil, checkout_label: 'Checkout', variant: :default,
+                   id: nil, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @items = Array(items).map { |item| normalize_item(item) }
+      @currency = currency
+      @title = title
+      @empty_text = empty_text
+      @checkout_url = checkout_url
+      @checkout_label = checkout_label
+      @dom_id = id || senren_dom_id(title)
+    end
+
+    attr_reader :items, :currency, :title, :empty_text, :checkout_label, :dom_id
+
+    def empty? = items.empty?
+    def total_quantity = items.sum { |item| item[:quantity] }
+    def subtotal_cents = items.sum { |item| item[:price_cents] * item[:quantity] }
+    def subtotal = format_cents(subtotal_cents)
+    def line_total(item) = format_cents(item[:price_cents] * item[:quantity])
+    def safe_checkout_url = @checkout_url && safe_url(@checkout_url)
+
+    # Kept public so the same rendering is available to a host app updating a
+    # line through a Turbo Stream.
+    # Kernel.format explicitly: ViewComponent::Base defines its own `format`
+    # (the current template format, taking no arguments), which shadows
+    # Kernel#format inside a component. On Rails 8.x this happened to resolve;
+    # on 7.1 it raised "wrong number of arguments (given 2, expected 0)" as soon
+    # as the call ran inside a tag block. Caught by the version matrix.
+    def format_cents(cents)
+      "#{currency}#{Kernel.format('%.2f', cents.to_i / 100.0)}"
+    end
+
+    private
+
+    def normalize_item(item)
+      {
+        id: item[:id] || item['id'],
+        name: item[:name] || item['name'],
+        price_cents: (item[:price_cents] || item['price_cents']).to_i,
+        quantity: [(item[:quantity] || item['quantity'] || 1).to_i, 1].max,
+        image_url: item[:image_url] || item['image_url'],
+        remove_url: item[:remove_url] || item['remove_url']
+      }
+    end
+  end
+end

data/templates/components/checkbox/checkbox_component.rb

@@ -10,7 +10,7 @@ module Senren
       @name = name
       @value = value
       @checked = checked
-      @id = id || "#{name.to_s.parameterize}-#{SecureRandom.hex(2)}"
+      @id = id || senren_dom_id(name, value)
       @label = label
     end
 

data/templates/components/clipboard/clipboard_component.html.erb

@@ -1,5 +1,5 @@
 <div <%= tag.attributes(**root_attrs("inline-flex items-center gap-2", data: { controller: "senren--clipboard", "senren--clipboard-copied-label-value": copied_label })) %>>
-  <input type="text" readonly value="<%= value %>" data-senren--clipboard-target="source" class="h-10 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.4)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))]">
+  <input type="text" readonly aria-label="<%= label %>" value="<%= value %>" data-senren--clipboard-target="source" class="h-10 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.4)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))]">
   <button type="button" data-senren--clipboard-target="button" data-action="click->senren--clipboard#copy" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-3 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90">
     <%= label %>
   </button>

data/templates/components/command/command_component.rb

@@ -11,7 +11,7 @@ module Senren
       @placeholder = placeholder
       @label = label
       @empty_text = empty_text
-      @dom_id = id || "senren-command-#{SecureRandom.hex(3)}"
+      @dom_id = id || senren_dom_id(label)
       @items = normalize_items(items)
     end
 

data/templates/components/date_picker/date_picker_component.html.erb

@@ -1,5 +1,5 @@
 <div <%= tag.attributes(**root_attrs("flex w-full items-center gap-2", data: { controller: "senren--date-picker" })) %>>
-  <input type="date" id="<%= id %>" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" data-senren--date-picker-target="input" class="hover:cursor-pointerh-10 w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] px-3 text-sm text-[hsl(var(--senren-foreground))] outline-none transition-colors focus:ring-2 focus:ring-[hsl(var(--senren-ring))] <%= self.class::VARIANTS[variant] %>">
+  <input type="date" id="<%= id %>" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" data-senren--date-picker-target="input" class="h-10 w-full max-w-56 cursor-pointer rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] px-3 text-sm text-[hsl(var(--senren-foreground))] outline-none transition-colors focus:ring-2 focus:ring-[hsl(var(--senren-ring))] [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 <%= self.class::VARIANTS[variant] %>">
   <button type="button" data-action="click->senren--date-picker#today" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] px-3 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]">Today</button>
   <button type="button" data-action="click->senren--date-picker#clear" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) px-3 text-sm text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))]">Clear</button>
 </div>

data/templates/components/dialog/dialog_component.rb

@@ -14,7 +14,7 @@ module Senren
     def initialize(open: false, id: nil, class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @open = open
-      @dom_id = id || "senren-dialog-#{SecureRandom.hex(3)}"
+      @dom_id = id || senren_dom_id
     end
 
     attr_reader :open, :dom_id

data/templates/components/form/form_component.rb

@@ -15,6 +15,14 @@ module Senren
       @multipart = multipart
     end
 
-    attr_reader :model, :url, :method, :multipart
+    attr_reader :model, :method, :multipart
+
+    # This one reaches form_with's `action`, which makes it the highest-value
+    # URL sink in the library: `//evil.example` is a protocol-relative absolute
+    # URL, so a form built from user-controlled input POSTs every field —
+    # including the CSRF token — off-origin. Same policy as every other href in
+    # the library; it was simply missed because the security test enumerated
+    # known components rather than asserting a property over all of them.
+    def url = @url && safe_url(@url)
   end
 end

data/templates/components/invite_member_dialog/invite_member_dialog_component.rb

@@ -18,7 +18,7 @@ module Senren
       @role_name = role_name
       @roles = Array(roles)
       @button_label = button_label
-      @dom_id = id || "senren-invite-member-#{SecureRandom.hex(3)}"
+      @dom_id = id || senren_dom_id(title)
     end
 
     attr_reader :title, :description, :email_name, :role_name, :roles, :button_label, :dom_id

data/templates/components/product_card/product_card_component.html.erb

@@ -0,0 +1,38 @@
+<%= tag.article(**root_attrs("flex flex-col overflow-hidden rounded-(--senren-radius) border bg-[hsl(var(--senren-card))] shadow-sm", id: dom_id)) do %>
+  <div class="relative aspect-square w-full bg-[hsl(var(--senren-muted)/0.4)]">
+    <% if safe_image_url %>
+      <img src="<%= safe_image_url %>" alt="<%= title %>" loading="lazy" class="h-full w-full object-cover">
+    <% else %>
+      <div class="flex h-full w-full items-center justify-center text-sm text-[hsl(var(--senren-muted-foreground))]" aria-hidden="true">
+        No image
+      </div>
+    <% end %>
+
+    <% if badge %>
+      <span class="absolute left-2 top-2 inline-flex items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-2 py-0.5 text-xs font-medium text-[hsl(var(--senren-primary-foreground))]">
+        <%= badge %>
+      </span>
+    <% end %>
+  </div>
+
+  <div class="flex flex-1 flex-col gap-2 p-4">
+    <h3 class="text-sm font-medium leading-tight text-[hsl(var(--senren-foreground))]">
+      <%= title %>
+    </h3>
+
+    <% if description %>
+      <p class="line-clamp-2 text-sm text-[hsl(var(--senren-muted-foreground))]"><%= description %></p>
+    <% end %>
+
+    <p class="mt-auto text-base font-semibold text-[hsl(var(--senren-foreground))]"><%= price %></p>
+
+    <%# A plain form: the server owns the cart, and Turbo handles the response. %>
+    <%= form_with url: safe_action_url, method: method, class: "mt-1" do %>
+      <button type="submit"
+              <%= "disabled" unless available? %>
+              class="inline-flex h-10 w-full cursor-pointer items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] disabled:cursor-not-allowed disabled:opacity-50">
+        <%= button_label %>
+      </button>
+    <% end %>
+  </div>
+<% end %>

data/templates/components/product_card/product_card_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Senren
+  # A product tile with an add-to-cart action.
+  #
+  # Adding to a cart is an ordinary form submission, so this component ships no
+  # Stimulus controller. That is deliberate: a listing page renders this tile
+  # many times, and a controller here would download JavaScript on a page that
+  # does not need any.
+  #
+  # Price is passed in already formatted. Currency formatting is locale- and
+  # money-library-specific and belongs to the host app; a UI library that
+  # guesses gets it wrong in another country.
+  class ProductCardComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))]',
+      featured: 'border-[hsl(var(--senren-primary))] ring-1 ring-[hsl(var(--senren-primary)/0.35)]'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    def initialize(title:, price:, url:, image_url: nil, description: nil, badge: nil,
+                   action_label: 'Add to cart', available: true, method: :post,
+                   variant: :default, id: nil, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @title = title
+      @price = price
+      @url = url
+      @image_url = image_url
+      @description = description
+      @badge = badge
+      @action_label = action_label
+      @available = available
+      @method = method
+      @dom_id = id || senren_dom_id(title)
+    end
+
+    attr_reader :title, :price, :image_url, :description, :badge, :action_label, :method, :dom_id
+
+    def available? = @available == true
+
+    # Untrusted values reach href/src attributes, so both go through the shared
+    # guards rather than being interpolated directly.
+    def safe_action_url = safe_url(@url)
+    def safe_image_url = safe_media_url(@image_url)
+
+    def button_label = available? ? action_label : 'Out of stock'
+  end
+end