senren-ui 0.1.6 → 0.2.0

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/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/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) {

data/templates/controllers/dialog_controller.js

@@ -1,50 +1,76 @@
 import { Controller } from "@hotwired/stimulus"
 
 // senren--dialog
-// Local UI: open/close, focus trap, Escape to close, body scroll lock.
+// Local UI: open/close, Escape to close, body scroll lock.
+//
+// State lives in `openValue`, not in the DOM nodes this controller touches.
+// Actions only assign the value; every DOM change happens in openValueChanged.
+//
+// That inversion is what makes the state server-renderable (render
+// open-value="true" and the dialog is open with no JavaScript), survivable
+// across a Turbo morph, and reachable from a Turbo Stream that changes a single
+// attribute. It is the pattern every stateful Senren controller follows.
 export default class extends Controller {
   static targets = ["overlay", "panel", "trigger"]
-  static values  = { open: Boolean }
+  static values = { open: Boolean }
 
   connect() {
     this._onKey = this._onKey.bind(this)
-    if (this.openValue) this._show()
+    this._onBeforeCache = this._onBeforeCache.bind(this)
+    document.addEventListener("turbo:before-cache", this._onBeforeCache)
   }
 
   disconnect() {
     document.removeEventListener("keydown", this._onKey)
-    document.body.style.overflow = ""
+    document.removeEventListener("turbo:before-cache", this._onBeforeCache)
+    this._releaseScroll()
   }
 
   open(event) {
     event?.preventDefault()
-    this._show()
+    this.openValue = true
   }
 
   close(event) {
     event?.preventDefault()
-    this._hide()
+    this.openValue = false
   }
 
-  _show() {
-    this.openValue = true
-    if (this.hasOverlayTarget) this.overlayTarget.hidden = false
-    if (this.hasPanelTarget)   this.panelTarget.hidden   = false
-    document.addEventListener("keydown", this._onKey)
-    document.body.style.overflow = "hidden"
-    queueMicrotask(() => this.panelTarget?.focus())
-  }
+  // Stimulus calls this during initialization too, so the server-rendered value
+  // paints the first frame.
+  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
+    }
 
-  _hide() {
-    this.openValue = false
-    if (this.hasOverlayTarget) this.overlayTarget.hidden = true
-    if (this.hasPanelTarget)   this.panelTarget.hidden   = true
     document.removeEventListener("keydown", this._onKey)
-    document.body.style.overflow = ""
-    this.triggerTarget?.focus?.()
+    this._releaseScroll()
+    // Only return focus on a real close, not on the initial render.
+    if (wasOpen !== undefined) {
+      this.triggerTarget?.focus?.()
+      this.dispatch("closed")
+    }
   }
 
   _onKey(event) {
-    if (event.key === "Escape") this._hide()
+    if (event.key === "Escape") this.close()
+  }
+
+  // Turbo snapshots the page before navigating away. Without this the scroll
+  // lock is captured while still applied, and a back navigation restores a page
+  // that cannot be scrolled.
+  _onBeforeCache() {
+    this.openValue = false
+  }
+
+  _releaseScroll() {
+    document.body.style.overflow = ""
   }
 }

data/templates/controllers/dropdown_menu_controller.js

@@ -2,35 +2,36 @@ import { Controller } from "@hotwired/stimulus"
 
 // senren--dropdown-menu
 // Local UI: toggle visibility, close on outside click and Escape, basic arrow nav.
+//
+// State lives in `openValue`. Actions assign it; openValueChanged performs
+// every DOM change — including the `data-state` attributes the chevron styling
+// reads — and owns the document listeners.
 export default class extends Controller {
   static targets = ["trigger", "menu"]
+  static values = { open: Boolean }
 
   connect() {
     this._onDocClick = this._onDocClick.bind(this)
     this._onKey = this._onKey.bind(this)
-    this._setOpenState(false)
   }
 
   disconnect() {
-    document.removeEventListener("click", this._onDocClick)
-    document.removeEventListener("keydown", this._onKey)
+    this._stopListening()
   }
 
   toggle(event) {
     event?.preventDefault()
-    this.menuTarget.hidden ? this._show() : this.close()
+    this.openValue = !this.openValue
   }
 
   close() {
-    this._setOpenState(false)
-    document.removeEventListener("click", this._onDocClick)
-    document.removeEventListener("keydown", this._onKey)
+    this.openValue = false
   }
 
   onTriggerKey(event) {
     if (["Enter", " ", "ArrowDown"].includes(event.key)) {
       event.preventDefault()
-      this._show()
+      this.openValue = true
       this._focusItem(0)
     }
   }
@@ -39,32 +40,44 @@ export default class extends Controller {
     const items = this._items()
     const idx = items.indexOf(document.activeElement)
     if (event.key === "ArrowDown") { event.preventDefault(); this._focusItem((idx + 1) % items.length) }
-    if (event.key === "ArrowUp")   { event.preventDefault(); this._focusItem((idx - 1 + items.length) % items.length) }
-    if (event.key === "Escape")    { this.close(); this.triggerTarget?.focus?.() }
+    if (event.key === "ArrowUp") { event.preventDefault(); this._focusItem((idx - 1 + items.length) % items.length) }
+    if (event.key === "Escape") { this.close(); this.triggerTarget?.focus?.() }
   }
 
-  _show() {
-    this._setOpenState(true)
-    document.addEventListener("click", this._onDocClick)
-    document.addEventListener("keydown", this._onKey)
-  }
+  openValueChanged(isOpen) {
+    const state = isOpen ? "open" : "closed"
 
-  _setOpenState(open) {
-    const state = open ? "open" : "closed"
-    this.menuTarget.hidden = !open
+    if (this.hasMenuTarget) this.menuTarget.hidden = !isOpen
     this.element.dataset.state = state
-    this.triggerTarget.dataset.state = state
-    this.triggerTarget.setAttribute("aria-expanded", open ? "true" : "false")
 
-    const triggerControl = this._triggerControl()
-    if (triggerControl && triggerControl !== this.triggerTarget) {
-      triggerControl.dataset.state = state
-      triggerControl.setAttribute("aria-expanded", open ? "true" : "false")
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.dataset.state = state
+      this.triggerTarget.setAttribute("aria-expanded", isOpen ? "true" : "false")
+
+      const control = this._triggerControl()
+      if (control && control !== this.triggerTarget) {
+        control.dataset.state = state
+        control.setAttribute("aria-expanded", isOpen ? "true" : "false")
+      }
+
+      this.triggerTarget.querySelectorAll("[data-senren-chevron]").forEach((chevron) => {
+        chevron.dataset.state = state
+      })
     }
 
-    this.triggerTarget.querySelectorAll("[data-senren-chevron]").forEach((chevron) => {
-      chevron.dataset.state = state
-    })
+    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)
   }
 
   _triggerControl() {

data/templates/controllers/hover_card_controller.js

@@ -14,4 +14,12 @@ export default class extends Controller {
     clearTimeout(this._showTimer)
     this._hideTimer = setTimeout(() => { if (this.hasPanelTarget) this.panelTarget.hidden = true }, 120)
   }
+
+  // Either timer can still be pending when a Turbo navigation removes the
+  // element, which retains this controller and its detached subtree until it
+  // fires.
+  disconnect() {
+    clearTimeout(this._showTimer)
+    clearTimeout(this._hideTimer)
+  }
 }

data/templates/controllers/invite_member_dialog_controller.js

@@ -8,6 +8,12 @@ export default class extends Controller {
     this.closeOnEscape = this.closeOnEscape.bind(this)
   }
 
+  // open() registers a document-level listener; without this the listener and
+  // the detached subtree survive every Turbo navigation made while open.
+  disconnect() {
+    document.removeEventListener("keydown", this.closeOnEscape)
+  }
+
   open() {
     this.overlayTarget.hidden = false
     this.panelTarget.hidden = false

data/templates/controllers/masked_input_controller.js

@@ -10,7 +10,14 @@ export default class extends Controller {
   static values = { mask: String }
 
   connect() {
-    this.element.addEventListener("input", this._onInput.bind(this))
+    // Keep the bound reference: Stimulus re-connects on Turbo morph/restore,
+    // and an unremovable listener would stack up one mask pass per cycle.
+    this._boundOnInput = this._onInput.bind(this)
+    this.element.addEventListener("input", this._boundOnInput)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("input", this._boundOnInput)
   }
 
   _onInput(event) {