senren-ui 0.1.5 → 0.2.0

data/templates/components/label/label_component.rb

@@ -9,11 +9,21 @@ module Senren
 
     SIZES = { md: '' }.freeze
 
-    def initialize(for_field:, variant: :default, class_name: nil, **html)
+    # Accept optional text: param as fallback for inline block syntax.
+    # This ensures both patterns work reliably:
+    #   render(Senren::LabelComponent.new(for_field: "name", text: "Name"))
+    #   render(Senren::LabelComponent.new(for_field: "name")) { "Name" }
+    def initialize(for_field:, text: nil, variant: :default, class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @for_field = for_field
+      @text = text
     end
 
-    attr_reader :for_field
+    attr_reader :for_field, :text
+
+    # Resolve label text: content block > text param > empty string
+    def label_text
+      content.presence || @text || ''
+    end
   end
 end

data/templates/components/link/link_component.html.erb

@@ -1 +1 @@
-<%= tag.a content, **root_attrs("inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] rounded-sm", href: href, **external_attrs) %>
+<%= tag.a content, **root_attrs("inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] rounded-sm", href: safe_url(href), **external_attrs) %>

data/templates/components/native_select/native_select_component.html.erb

@@ -1,5 +1,6 @@
-<%= tag.div(**wrapper_attrs) do %>
-  <%= tag.select(**select_attrs) do %>
+<% if native_arrow? %>
+  <%# Native mode: no wrapper div, no SVG arrow — let the browser render its own. %>
+  <%= tag.select(**root_select_attrs) do %>
     <% if prompt %>
       <option value=""><%= prompt %></option>
     <% end %>
@@ -8,7 +9,20 @@
       <option value="<%= value %>" <%= "selected" if selected.to_s == value.to_s %>><%= label %></option>
     <% end %>
   <% end %>
-  <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[hsl(var(--senren-muted-foreground))] transition-transform duration-150 group-focus-within:rotate-180">
-    <path d="m5 8 5 5 5-5"></path>
-  </svg>
+<% else %>
+  <%# Custom arrow mode: wrapper div + positioned SVG. %>
+  <%= tag.div(class: "group relative w-full", data: { senren_component: senren_component_name }) do %>
+    <%= tag.select(**select_attrs) do %>
+      <% if prompt %>
+        <option value=""><%= prompt %></option>
+      <% end %>
+      <% options.each do |opt| %>
+        <% value, label = Array === opt ? opt : [opt, opt] %>
+        <option value="<%= value %>" <%= "selected" if selected.to_s == value.to_s %>><%= label %></option>
+      <% end %>
+    <% end %>
+    <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[hsl(var(--senren-muted-foreground))] transition-transform duration-150 group-focus-within:rotate-180">
+      <path d="m5 8 5 5 5-5"></path>
+    </svg>
+  <% end %>
 <% end %>

data/templates/components/native_select/native_select_component.rb

@@ -13,20 +13,23 @@ module Senren
       lg: 'h-12 text-base px-4'
     }.freeze
 
-    def initialize(name:, options:, selected: nil, id: nil, prompt: nil, variant: :default, size: :md, class_name: nil,
-                   **html)
+    # native_arrow: true  → keep browser/OS native arrow (appearance-auto)
+    # native_arrow: false → use custom SVG arrow (appearance-none + SVG overlay)
+    def initialize(name:, options:, selected: nil, id: nil, prompt: nil, native_arrow: true,
+                   variant: :default, size: :md, class_name: nil, **html)
       super(variant: variant, size: size, class_name: class_name, **html)
       @name = name
       @options = options
       @selected = selected
       @id = id || name.to_s.parameterize
       @prompt = prompt
+      @native_arrow = native_arrow
     end
 
     attr_reader :name, :options, :selected, :id, :prompt
 
-    def wrapper_attrs
-      { class: 'group relative w-full', data: { senren_component: senren_component_name } }
+    def native_arrow?
+      @native_arrow
     end
 
     def select_attrs
@@ -39,9 +42,18 @@ module Senren
       )
     end
 
+    def root_select_attrs
+      attrs = select_attrs
+      data = (attrs[:data] || {}).merge(senren_component: senren_component_name)
+
+      attrs.merge(data: data)
+    end
+
     def select_classes
+      appearance = native_arrow? ? 'appearance-auto' : 'appearance-none pr-9'
       [
-        'flex w-full cursor-pointer appearance-none rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] pr-9 text-[hsl(var(--senren-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+        'w-full cursor-pointer rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+        appearance,
         self.class::VARIANTS[variant],
         self.class::SIZES[size],
         class_name,

data/templates/components/pagination/pagination_component.rb

@@ -18,7 +18,8 @@ module Senren
     def page_url(page)
       return '#' unless path
 
-      path.respond_to?(:call) ? path.call(page) : path.to_s.gsub(':page', page.to_s)
+      safe_page = page.to_i.clamp(1, total_pages)
+      safe_url(path.respond_to?(:call) ? path.call(safe_page) : path.to_s.gsub(':page', safe_page.to_s))
     end
   end
 end

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

data/templates/components/rich_text_editor_lite/rich_text_editor_lite_component.html.erb

@@ -26,7 +26,7 @@
     </div>
   <% end %>
 
-  <div id="<%= dom_id %>-editor" role="textbox" aria-multiline="true" aria-label="<%= label %>" contenteditable="true" data-placeholder="<%= placeholder %>" data-senren--rich-text-editor-lite-target="editor" data-action="click->senren--rich-text-editor-lite#openLink input->senren--rich-text-editor-lite#sync input->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#updateToolbar mouseup->senren--rich-text-editor-lite#rememberSelection mouseup->senren--rich-text-editor-lite#updateToolbar touchend->senren--rich-text-editor-lite#rememberSelection paste->senren--rich-text-editor-lite#syncSoon" class="min-h-40 cursor-text bg-[hsl(var(--senren-background))] p-4 text-left text-sm leading-6 text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-inset focus:ring-[hsl(var(--senren-ring))]">
+  <div id="<%= dom_id %>-editor" role="textbox" aria-multiline="true" aria-label="<%= label %>" contenteditable="true" data-placeholder="<%= placeholder %>" data-senren--rich-text-editor-lite-target="editor" data-action="click->senren--rich-text-editor-lite#openLink input->senren--rich-text-editor-lite#sync input->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#updateToolbar mouseup->senren--rich-text-editor-lite#rememberSelection mouseup->senren--rich-text-editor-lite#updateToolbar touchend->senren--rich-text-editor-lite#rememberSelection paste->senren--rich-text-editor-lite#paste drop->senren--rich-text-editor-lite#paste" class="min-h-40 cursor-text bg-[hsl(var(--senren-background))] p-4 text-left text-sm leading-6 text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-inset focus:ring-[hsl(var(--senren-ring))]">
     <%= sanitize(initial_content, tags: %w[p br strong b em i a ul ol li h1 h2 h3], attributes: %w[href rel target data-align]) %>
   </div>
 <% end %>

data/templates/components/rich_text_editor_lite/rich_text_editor_lite_component.rb

@@ -12,7 +12,7 @@ module Senren
       @value = value
       @label = label
       @placeholder = placeholder
-      @dom_id = id || "senren-editor-#{SecureRandom.hex(3)}"
+      @dom_id = id || senren_dom_id(name)
       @toolbar = toolbar
       @debug = debug
     end

data/templates/components/separator/separator_component.rb

@@ -7,6 +7,13 @@ module Senren
 
     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 :horizontal (a rule across the flow).
+    def initialize(variant: :horizontal, **args)
+      super
+    end
+
     def aria_orientation = variant == :vertical ? 'vertical' : 'horizontal'
   end
 end

data/templates/components/sheet/sheet_component.rb

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

data/templates/components/sidebar/sidebar_component.rb

@@ -24,12 +24,12 @@ module Senren
         if item.is_a?(Hash)
           {
             label: item[:label] || item['label'],
-            href: item[:href] || item['href'] || '#',
+            href: safe_url(item[:href] || item['href']),
             active: item[:active] || item['active']
           }
         else
           label, href = item
-          { label: label, href: href || '#', active: false }
+          { label: label, href: safe_url(href), active: false }
         end
       end
     end

data/templates/components/switch/switch_component.html.erb

@@ -1,4 +1,4 @@
-<label class="inline-flex items-center gap-3 cursor-pointer">
+<%= tag.label(**root_attrs("inline-flex items-center gap-3 cursor-pointer")) do %>
   <span class="relative inline-flex h-6 w-11 items-center rounded-full bg-[hsl(var(--senren-muted))] has-[:checked]:bg-[hsl(var(--senren-primary))] transition-colors">
     <input type="checkbox" role="switch" id="<%= id %>" name="<%= name %>" value="<%= value %>" <%= "checked" if checked %> class="peer sr-only">
     <span aria-hidden="true" class="absolute left-0.5 top-0.5 inline-block h-5 w-5 transform rounded-full bg-[hsl(var(--senren-background))] transition-transform peer-checked:translate-x-5"></span>
@@ -8,4 +8,4 @@
   <% else %>
     <%= content %>
   <% end %>
-</label>
+<% end %>

data/templates/components/tooltip/tooltip_component.rb

@@ -5,10 +5,10 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES    = { md: '' }.freeze
 
-    def initialize(text:, class_name: nil, **html)
+    def initialize(text:, id: nil, class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @text = text
-      @id = "senren-tooltip-#{SecureRandom.hex(3)}"
+      @id = id || senren_dom_id(text)
     end
 
     attr_reader :text, :id

data/templates/components/top_nav/top_nav_component.rb

@@ -31,12 +31,12 @@ module Senren
         if item.is_a?(Hash)
           {
             label: item[:label] || item['label'],
-            href: item[:href] || item['href'] || '#',
+            href: safe_url(item[:href] || item['href']),
             active: item[:active] || item['active']
           }
         else
           label, href = item
-          { label: label, href: href || '#', active: false }
+          { label: label, href: safe_url(href), active: false }
         end
       end
     end

data/templates/components/typography/typography_component.rb

@@ -14,6 +14,13 @@ module Senren
 
     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 :p (body text).
+    def initialize(variant: :p, **args)
+      super
+    end
+
     TAG_FOR = {
       h1: :h1, h2: :h2, h3: :h3, h4: :h4,
       p: :p, lead: :p, large: :p, small: :small, muted: :p

data/templates/controllers/accordion_controller.js

@@ -17,7 +17,7 @@ export default class extends Controller {
   }
 
   _closeAll() {
-    this.triggerTargets.forEach((trigger) => trigger.setAttribute("aria-expanded", "false"))
+    this.triggerTargets.forEach((trigger) => { trigger.setAttribute("aria-expanded", "false") })
     this.panelTargets.forEach((panel) => { panel.hidden = true })
   }
 

data/templates/controllers/alert_dialog_controller.js

@@ -3,36 +3,60 @@ import { Controller } from "@hotwired/stimulus"
 // senren--alert-dialog
 // Same shape as dialog, but role=alertdialog. Triggered by external buttons that include
 // data-action="click->senren--alert-dialog#open" pointing at the controller scope.
+//
+// State lives in `openValue`. Actions assign it; openValueChanged performs every
+// DOM change, so the dialog can be opened from the server and survives a morph.
 export default class extends Controller {
   static targets = ["overlay", "panel", "trigger"]
+  static values = { open: Boolean }
 
   connect() {
     this._onKey = this._onKey.bind(this)
+    this._onBeforeCache = this._onBeforeCache.bind(this)
+    document.addEventListener("turbo:before-cache", this._onBeforeCache)
   }
 
   disconnect() {
     document.removeEventListener("keydown", this._onKey)
+    document.removeEventListener("turbo:before-cache", this._onBeforeCache)
     document.body.style.overflow = ""
   }
 
   open(event) {
     event?.preventDefault()
-    this.overlayTarget.hidden = false
-    this.panelTarget.hidden = false
-    document.addEventListener("keydown", this._onKey)
-    document.body.style.overflow = "hidden"
-    queueMicrotask(() => this.panelTarget?.focus())
+    this.openValue = true
   }
 
   close(event) {
     event?.preventDefault()
-    this.overlayTarget.hidden = true
-    this.panelTarget.hidden = true
+    this.openValue = false
+  }
+
+  openValueChanged(isOpen, wasOpen) {
+    if (this.hasOverlayTarget) this.overlayTarget.hidden = !isOpen
+    if (this.hasPanelTarget) this.panelTarget.hidden = !isOpen
+
+    if (isOpen) {
+      document.addEventListener("keydown", this._onKey)
+      document.body.style.overflow = "hidden"
+      queueMicrotask(() => this.panelTarget?.focus())
+      this.dispatch("opened")
+      return
+    }
+
     document.removeEventListener("keydown", this._onKey)
     document.body.style.overflow = ""
+    if (wasOpen !== undefined) this.dispatch("closed")
   }
 
   _onKey(event) {
     if (event.key === "Escape") this.close()
   }
+
+  // Turbo snapshots the page before navigating away; without this the scroll
+  // lock is captured while applied and a back navigation restores a page that
+  // cannot be scrolled.
+  _onBeforeCache() {
+    this.openValue = false
+  }
 }

data/templates/controllers/cart_controller.js

@@ -0,0 +1,83 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--cart
+// Local UI only: quantity steppers and the displayed subtotal. The server owns
+// the cart, so nothing here talks to it — a host app persists changes by
+// listening for senren--cart:changed, or by submitting the surrounding form.
+//
+// State lives in `subtotalCentsValue`, following the pattern in
+// .senren/conventions.md: actions assign values, and subtotalCentsValueChanged
+// performs the DOM work. A server-rendered subtotal therefore paints the first
+// frame, survives a Turbo morph, and can be corrected by a Turbo Stream that
+// changes one attribute.
+export default class extends Controller {
+  static targets = ["line", "quantity", "lineTotal", "subtotal", "count"]
+  static values = { currency: String, subtotalCents: Number }
+
+  increment(event) {
+    this._step(event, +1)
+  }
+
+  decrement(event) {
+    this._step(event, -1)
+  }
+
+  remove(event) {
+    const line = event.currentTarget.closest("[data-senren--cart-target~='line']")
+    if (!line) return
+
+    const id = line.dataset.lineId
+    line.remove()
+    this._recalculate()
+    this.dispatch("removed", { detail: { id, subtotalCents: this.subtotalCentsValue } })
+  }
+
+  // The value is the state; this renders it. Called on initialization too, so
+  // whatever the server rendered is what shows.
+  subtotalCentsValueChanged(cents) {
+    if (this.hasSubtotalTarget) this.subtotalTarget.textContent = this.format(cents)
+  }
+
+  format(cents) {
+    return `${this.currencyValue || "$"}${(Number(cents) / 100).toFixed(2)}`
+  }
+
+  _step(event, delta) {
+    const line = event.currentTarget.closest("[data-senren--cart-target~='line']")
+    if (!line) return
+
+    const output = line.querySelector("[data-senren--cart-target~='quantity']")
+    if (!output) return
+
+    // Never below one: removing is a separate, explicit action, so a stepper
+    // that reaches zero would leave a line the user cannot see the price of.
+    const next = Math.max(1, Number(output.textContent.trim() || 1) + delta)
+    output.textContent = String(next)
+
+    this._recalculate()
+    this.dispatch("changed", {
+      detail: { id: line.dataset.lineId, quantity: next, subtotalCents: this.subtotalCentsValue }
+    })
+  }
+
+  _recalculate() {
+    let cents = 0
+    let count = 0
+
+    this.lineTargets.forEach((line) => {
+      const price = Number(line.dataset.priceCents || 0)
+      const output = line.querySelector("[data-senren--cart-target~='quantity']")
+      const quantity = Number(output?.textContent.trim() || 0)
+      const total = price * quantity
+
+      cents += total
+      count += quantity
+
+      const lineTotal = line.querySelector("[data-senren--cart-target~='lineTotal']")
+      if (lineTotal) lineTotal.textContent = this.format(total)
+    })
+
+    if (this.hasCountTarget) this.countTarget.textContent = String(count)
+    this.subtotalCentsValue = cents
+  }
+}

data/templates/controllers/clipboard_controller.js

@@ -9,9 +9,20 @@ export default class extends Controller {
   async copy() {
     const value = this.sourceTarget.value || this.sourceTarget.textContent
     await navigator.clipboard.writeText(value)
+    // The await is a suspension point: the element may be gone by now.
+    if (!this.hasButtonTarget) return
+
     const original = this.buttonTarget.textContent
     this.buttonTarget.textContent = this.copiedLabelValue || "Copied"
     if (this.hasStatusTarget) this.statusTarget.textContent = "Copied to clipboard"
-    window.setTimeout(() => { this.buttonTarget.textContent = original }, 1200)
+
+    clearTimeout(this._resetTimer)
+    this._resetTimer = setTimeout(() => {
+      if (this.hasButtonTarget) this.buttonTarget.textContent = original
+    }, 1200)
+  }
+
+  disconnect() {
+    clearTimeout(this._resetTimer)
   }
 }

data/templates/controllers/command_controller.js

@@ -43,10 +43,9 @@ export default class extends Controller {
   }
 
   choose(event) {
-    this.element.dispatchEvent(new CustomEvent("senren:command-select", {
-      bubbles: true,
+    this.dispatch("select", {
       detail: { label: event.currentTarget.textContent.trim(), href: event.currentTarget.getAttribute("href") }
-    }))
+    })
   }
 
   move(delta) {
@@ -59,7 +58,7 @@ export default class extends Controller {
   updateActive() {
     const options = this.visibleOptions
     this.emptyTarget.hidden = options.length > 0
-    this.optionTargets.forEach((option) => option.setAttribute("aria-selected", "false"))
+    this.optionTargets.forEach((option) => { option.setAttribute("aria-selected", "false") })
     const active = options[this.activeIndex]
     if (!active) {
       this.inputTarget.removeAttribute("aria-activedescendant")

data/templates/controllers/context_menu_controller.js

@@ -2,8 +2,13 @@ import { Controller } from "@hotwired/stimulus"
 
 // senren--context-menu
 // Opens on right-click within the trigger; closes on outside click or Escape.
+//
+// State lives in `openValue`. The pointer position is transient and belongs to
+// the opening event, so it is applied in the action; everything else — the
+// visibility and the document listeners — is driven by the value.
 export default class extends Controller {
   static targets = ["trigger", "menu"]
+  static values = { open: Boolean }
 
   connect() {
     this._onDocClick = this._onDocClick.bind(this)
@@ -11,26 +16,48 @@ export default class extends Controller {
   }
 
   disconnect() {
-    document.removeEventListener("click", this._onDocClick)
-    document.removeEventListener("keydown", this._onKey)
+    this._stopListening()
   }
 
   open(event) {
     event.preventDefault()
-    const rect = this.element.getBoundingClientRect()
-    this.menuTarget.style.top = (event.clientY - rect.top) + "px"
-    this.menuTarget.style.left = (event.clientX - rect.left) + "px"
-    this.menuTarget.hidden = false
-    document.addEventListener("click", this._onDocClick)
-    document.addEventListener("keydown", this._onKey)
+
+    if (this.hasMenuTarget) {
+      const rect = this.element.getBoundingClientRect()
+      this.menuTarget.style.top = `${event.clientY - rect.top}px`
+      this.menuTarget.style.left = `${event.clientX - rect.left}px`
+    }
+
+    this.openValue = true
   }
 
   close() {
-    this.menuTarget.hidden = true
+    this.openValue = false
+  }
+
+  openValueChanged(isOpen) {
+    if (this.hasMenuTarget) this.menuTarget.hidden = !isOpen
+
+    if (isOpen) {
+      document.addEventListener("click", this._onDocClick)
+      document.addEventListener("keydown", this._onKey)
+      this.dispatch("opened")
+      return
+    }
+
+    this._stopListening()
+  }
+
+  _stopListening() {
     document.removeEventListener("click", this._onDocClick)
     document.removeEventListener("keydown", this._onKey)
   }
 
-  _onDocClick(event) { if (!this.menuTarget.contains(event.target)) this.close() }
-  _onKey(event)      { if (event.key === "Escape") this.close() }
+  _onDocClick(event) {
+    if (!this.menuTarget.contains(event.target)) this.close()
+  }
+
+  _onKey(event) {
+    if (event.key === "Escape") this.close()
+  }
 }

data/templates/controllers/data_table_controller.js

@@ -15,9 +15,14 @@ export default class extends Controller {
     const direction = this.directions[key] === "asc" ? "desc" : "asc"
     this.directions[key] = direction
 
-    const rows = [...this.rowTargets]
-    rows.sort((a, b) => this.compare(this.valueFor(a, key), this.valueFor(b, key), direction))
-    rows.forEach((row) => this.bodyTarget.appendChild(row))
+    // Read each cell once (O(n)) rather than once per comparison (O(n log n)),
+    // then move the rows in a single batched write.
+    const decorated = this.rowTargets.map((row) => ({ row, value: this.valueFor(row, key) }))
+    decorated.sort((a, b) => this.compare(a.value, b.value, direction))
+
+    const fragment = document.createDocumentFragment()
+    decorated.forEach((entry) => { fragment.appendChild(entry.row) })
+    this.bodyTarget.appendChild(fragment)
   }
 
   valueFor(row, key) {