senren-ui 0.1.5 → 0.2.0

data/lib/senren/rails/version.rb

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

data/lib/senren/rails.rb

@@ -8,12 +8,13 @@ module Senren
 
     autoload :Registry,         'senren/rails/registry'
     autoload :ComponentCopier,  'senren/rails/component_copier'
+    autoload :ComponentInstaller, 'senren/rails/component_installer'
     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

@@ -3,22 +3,19 @@
 require 'senren/rails'
 
 namespace :senren do
-  desc 'Install one or more Senren components: rake senren:add[button,dialog] or bin/rails senren:add button dialog'
-  task :add, [:names] => :environment do |_t, args|
-    names = parse_names(args)
-    options = parse_options
-    abort 'Usage: bin/rails senren:add NAME [NAME...] [--client | --no-client]' if names.empty?
+  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 = SenrenRakeArgs.names(args)
+    options = SenrenRakeArgs.options
 
-    paths    = Senren::Rails::HostPaths.new
-    registry = Senren::Rails::Registry.load!
-    copier   = Senren::Rails::ComponentCopier.new(registry: registry, paths: paths)
-
-    installed = copier.install(names, client_override: options[:client_override], force: options[:force])
-
-    Senren::Rails::SkillWriter.new(registry: registry, paths: paths).sync!
-    Senren::Rails::AgentRulesWriter.new(registry: registry, paths: paths).sync!
-
-    puts "Installed: #{installed.join(', ')}"
+    Senren::Rails::ComponentInstaller.new.install(
+      names: names,
+      client_override: options[:client_override],
+      force: options[:force]
+    )
+  rescue ArgumentError => e
+    abort e.message
   end
 
   namespace :skill do
@@ -62,25 +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))
-  raw
-    .flatten
-    .flat_map { |s| s.to_s.split(/[,\s]+/) }
-    .reject { |s| s.empty? || s.start_with?('-') }
-    .uniq
-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/billing_plan_card/billing_plan_card_component.html.erb

@@ -22,7 +22,7 @@
       </ul>
     <% end %>
     <% if cta_label.present? %>
-      <%= link_to cta_label, cta_href || "#", class: "mt-6 inline-flex h-10 w-full items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90" %>
+      <%= link_to cta_label, safe_url(cta_href), class: "mt-6 inline-flex h-10 w-full items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90" %>
     <% end %>
   <% end %>
 <% end %>

data/templates/components/breadcrumb/breadcrumb_component.rb

@@ -19,10 +19,10 @@ module Senren
     def normalize_items(items)
       Array(items).map do |item|
         if item.is_a?(Hash)
-          { label: item.fetch(:label) { item.fetch('label') }, href: item[:href] || item['href'] }
+          { label: item.fetch(:label) { item.fetch('label') }, href: safe_url(item[:href] || item['href'], fallback: nil) }
         else
           label, href = item
-          { label: label, href: href }
+          { label: label, href: safe_url(href, fallback: nil) }
         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: href) %>
+  <%= tag.a content, **root_attrs(base, href: safe_url(href)) %>
 <% else %>
   <%= tag.button content, **root_attrs(base, type: type) %>
 <% end %>

data/templates/components/carousel/carousel_component.rb

@@ -21,7 +21,7 @@ module Senren
           {
             title: slide[:title] || slide['title'],
             description: slide[:description] || slide['description'],
-            image_url: slide[:image_url] || slide['image_url'],
+            image_url: safe_media_url(slide[:image_url] || slide['image_url']),
             alt: slide[:alt] || slide['alt'],
             badge: slide[:badge] || slide['badge']
           }

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
 
@@ -29,7 +29,7 @@ module Senren
           id: data[:id] || data['id'] || "#{dom_id}-option-#{index}",
           label: label,
           description: description,
-          href: data[:href] || data['href'],
+          href: safe_url(data[:href] || data['href'], fallback: nil),
           keywords: [label, description, keywords].flatten.compact.join(' ')
         }
       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/dropdown_menu/dropdown_menu_component.rb

@@ -12,23 +12,26 @@ module Senren
       super(variant: :default, size: :md, class_name: class_name, **html)
     end
 
-    class ItemTag < ViewComponent::Base
-      def initialize(href: nil, method: nil, destructive: false, **opts)
+    class ItemTag < BaseComponent
+      VARIANTS = { default: '' }.freeze
+      SIZES = { md: '' }.freeze
+      ITEM_ACTION = 'click->senren--dropdown-menu#close keydown->senren--dropdown-menu#onItemKey'
+
+      def initialize(href: nil, method: nil, destructive: false, class_name: nil, **)
+        super(variant: :default, size: :md, class_name: class_name, **)
         @href = href
         @method = method
         @destructive = destructive
-        @opts = opts
       end
 
       def call
         klass = 'block w-full text-left px-3 py-2 text-sm rounded-sm hover:bg-[hsl(var(--senren-accent))] focus:bg-[hsl(var(--senren-accent))] outline-none cursor-pointer'
+        klass += " #{class_name}" if class_name.present?
         klass += ' text-[hsl(var(--senren-destructive))]' if @destructive
         if @href
-          link_to(content, @href, role: 'menuitem', method: @method, class: klass,
-                                  data: { action: 'click->senren--dropdown-menu#close keydown->senren--dropdown-menu#onItemKey' })
+          link_to(content, safe_url(@href), role: 'menuitem', method: @method, class: klass, data: { action: ITEM_ACTION }, **html_attrs)
         else
-          tag.button(content, type: 'button', role: 'menuitem', class: klass,
-                              data: { action: 'click->senren--dropdown-menu#close keydown->senren--dropdown-menu#onItemKey' }, **@opts)
+          tag.button(content, type: 'button', role: 'menuitem', class: klass, data: { action: ITEM_ACTION }, **html_attrs)
         end
       end
     end

data/templates/components/form/form_component.html.erb

@@ -1,3 +1,10 @@
-<%= form_with(model: model, url: url, method: method, multipart: multipart, **root_attrs("space-y-4")) do |f| %>
+<%
+  form_opts = {}
+  form_opts[:model]     = model     if model
+  form_opts[:url]       = url       if url
+  form_opts[:method]    = method    if method
+  form_opts[:multipart] = multipart if multipart
+%>
+<%= form_with(**form_opts, **root_attrs("space-y-4")) do |f| %>
   <%= content || capture(f, &Proc.new) %>
 <% end %>

data/templates/components/form/form_component.rb

@@ -5,7 +5,9 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES    = { md: '' }.freeze
 
-    def initialize(model: nil, url: nil, method: :post, multipart: false, class_name: nil, **html)
+    # method: defaults to nil so Rails can infer PATCH for persisted models.
+    # Pass method: :post / :patch / :delete explicitly only when needed.
+    def initialize(model: nil, url: nil, method: nil, multipart: false, class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @model = model
       @url   = url
@@ -13,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/input/input_component.html.erb

@@ -1 +1 @@
-<%= tag.input(**root_attrs("flex w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[hsl(var(--senren-muted-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50", id: id, name: name, type: type, value: value, placeholder: placeholder, "aria-invalid": variant == :error)) %>
+<%= tag.input(**root_attrs(input_classes, id: id, name: name, type: type, value: value, placeholder: placeholder, "aria-invalid": variant == :error)) %>

data/templates/components/input/input_component.rb

@@ -13,6 +13,17 @@ module Senren
       lg: 'h-12 text-base px-4'
     }.freeze
 
+    # Base classes shared by all input types.
+    # NOTE: `flex` is intentionally omitted — it breaks browser-native
+    #       date/datetime-local/time picker UI on some engines.
+    BASE_CLASSES = 'w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] placeholder:text-[hsl(var(--senren-muted-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50'
+
+    # File-type inputs get a styled button instead of unstyled browser defaults.
+    FILE_CLASSES = 'file:mr-3 file:h-full file:cursor-pointer file:border-0 file:border-r file:border-solid file:border-[hsl(var(--senren-border))] file:bg-[hsl(var(--senren-muted))] file:px-3 file:text-sm file:font-medium file:text-[hsl(var(--senren-foreground))]'
+
+    # Non-file inputs get standard font styling for the placeholder.
+    TEXT_FILE_CLASSES = 'file:border-0 file:bg-transparent file:text-sm file:font-medium'
+
     def initialize(name:, type: 'text', value: nil, placeholder: nil, id: nil, variant: :default, size: :md,
                    class_name: nil, **html)
       super(variant: variant, size: size, class_name: class_name, **html)
@@ -24,5 +35,13 @@ module Senren
     end
 
     attr_reader :name, :type, :value, :placeholder, :id
+
+    def input_classes
+      file_type? ? "#{BASE_CLASSES} #{FILE_CLASSES}" : "#{BASE_CLASSES} #{TEXT_FILE_CLASSES}"
+    end
+
+    def file_type?
+      type.to_s == 'file'
+    end
   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/label/label_component.html.erb

@@ -1,4 +1,3 @@
 <%= tag.label(**root_attrs("text-sm font-medium leading-none text-[hsl(var(--senren-foreground))] peer-disabled:cursor-not-allowed peer-disabled:opacity-70", for: for_field)) do %>
-  <%= content %>
-  <% if variant == :required %><span class="text-[hsl(var(--senren-destructive))]" aria-hidden="true"> *</span><% end %>
+  <%= label_text %><% if variant == :required %><span class="text-[hsl(var(--senren-destructive))]" aria-hidden="true"> *</span><% end %>
 <% end %>