senren-ui 0.1.6 → 0.3.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.3.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/accordion/accordion_component.html.erb

@@ -1,4 +1,4 @@
-<div <%= tag.attributes(**root_attrs("divide-y divide-[hsl(var(--senren-border))] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))]", data: { controller: "senren--accordion", "senren--accordion-multiple-value": multiple? })) %>>
+<%= tag.div(**root_attrs("divide-y divide-[hsl(var(--senren-border))] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))]", data: { controller: "senren--accordion", "senren--accordion-multiple-value": multiple? })) do %>
   <% items.each_with_index do |item, index| %>
     <% expanded = open_item?(item, index) %>
     <section>
@@ -8,9 +8,9 @@
           <span aria-hidden="true" class="text-[hsl(var(--senren-muted-foreground))]">+</span>
         </button>
       </h3>
-      <div id="<%= item[:id] %>-panel" data-senren--accordion-target="panel" data-panel-id="<%= item[:id] %>" <%= "hidden" unless expanded %> class="px-4 pb-4 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]">
+      <div id="<%= item[:id] %>-panel" data-senren--accordion-target="panel" data-panel-id="<%= item[:id] %>" <% unless expanded %>hidden<% end %> class="px-4 pb-4 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]">
         <%= item[:content].presence || content %>
       </div>
     </section>
   <% end %>
-</div>
+<% end %>

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

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

data/templates/components/alert_dialog/alert_dialog_component.rb

@@ -1,6 +1,10 @@
 # frozen_string_literal: true
 
 module Senren
+  # Unlike Dialog and Sheet, this does not close when the overlay is clicked.
+  # An alert dialog exists to make someone choose, and dismissing it by
+  # clicking beside it is indistinguishable from choosing Cancel by accident.
+  # Escape still closes it, because a keyboard user needs a way out.
   class AlertDialogComponent < BaseComponent
     renders_one :trigger
     renders_one :title
@@ -13,7 +17,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 autocomplete="off" aria-label="<%= label %>" value="<%= value %>" data-senren--api-key-field-target="input" class="h-10 min-w-0 flex-1 rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-muted)/0.35)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
       <button type="button" data-senren--api-key-field-target="revealButton" data-action="click->senren--api-key-field#toggle" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] px-3 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]"><%= reveal_label %></button>
       <button type="button" data-action="click->senren--api-key-field#copy" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-3 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90"><%= copy_label %></button>
     </div>

data/templates/components/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/breadcrumb/breadcrumb_component.html.erb

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

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

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

data/templates/components/button/button_component.rb

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

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

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

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

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

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

@@ -6,7 +6,7 @@
       <% slides.each_with_index do |slide, index| %>
         <article data-senren--carousel-target="slide" data-index="<%= index %>" class="<%= index.zero? ? '' : 'hidden' %>">
           <% if slide[:image_url].present? %>
-            <img src="<%= slide[:image_url] %>" alt="<%= slide[:alt] || slide[:title] %>" class="aspect-video w-full object-cover">
+            <%= image_tag slide[:image_url], alt: slide[:alt] || slide[:title], class: "aspect-video w-full object-cover" %>
           <% else %>
             <div class="relative flex aspect-video items-end overflow-hidden bg-[hsl(var(--senren-muted)/0.45)] p-6">
               <svg aria-hidden="true" viewBox="0 0 960 540" preserveAspectRatio="none" class="absolute inset-0 h-full w-full">

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

@@ -0,0 +1,67 @@
+<%= 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] %>"
+            <%# Emitted so the `removed` event can carry it. The component
+                accepted remove_url: and normalised it, then never wrote it
+                anywhere -- an advertised input that reached nothing, so the
+                consumer listening for the event had no way to learn where to
+                send the delete. %>
+            <% if item[:remove_url].present? %>data-remove-url="<%= safe_url(item[:remove_url]) %>"<% end %>
+            data-price-cents="<%= item[:price_cents] %>">
+          <% if (image = safe_media_url(item[:image_url])) %>
+            <%= image_tag 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 %>