[Feature] Add Message Scroller component (#447)

* [Feature] Add Empty component

Port the shadcn Empty component: a centered empty-state surface for when
there is no data or content. Parts: Empty, EmptyHeader, EmptyMedia
(default/icon variants), EmptyTitle, EmptyDescription, EmptyContent.

Translates shadcn's cn-empty-* CSS layer to Tailwind v4 utilities. No JS.

Docs page, route, controller, menu, site_files and MCP registry updated.

* [Feature] Add Message Scroller component

Port the shadcn Message Scroller: a chat transcript scroller that follows
the live edge, anchors new turns near the top, and jumps to the latest
message. Built on top of Message (#446) and Bubble (#445).

shadcn delegates to a closed React primitive (@shadcn/react); this is a
from-scratch Stimulus controller (ruby-ui--message-scroller) — our own
code, no external lib:

- autoScroll follow-edge: pins to the bottom while the reader is there,
  releases on wheel/touch/keyboard/scrollbar away, re-engages on jump.
- scrollAnchor: settles an appended turn near the top keeping a peek of
  the previous item (previous_item_peek).
- defaultPosition: open at end / start / last-anchor.
- preserveOnPrepend: hold the visible row when history loads in above.
- Public API for streaming/ActionCable: scrollToEnd/scrollToStart/
  scrollToMessage; new rows are picked up via MutationObserver.
- rAF-based smooth scrolling (native smooth is unreliable on a contained
  viewport), honors prefers-reduced-motion.
- a11y: content role=log + aria-relevant, button sr-only label, button
  removed from tab order while inert.

Parts: MessageScrollerProvider, MessageScroller, MessageScrollerViewport,
MessageScrollerContent, MessageScrollerItem, MessageScrollerButton.

dependencies.yml: message_scroller depends on Message + Bubble. MCP
registry, docs page, route, controller, menu and site_files updated.

* [Bug Fix] Message Scroller: address review feedback

- Gate anchored-turn scrolling behind autoScroll/following, so a new turn
  never yanks a reader who scrolled up to older content (P1).
- Scroll button honors data-direction: a start-direction button now jumps
  to the start instead of the end (renamed action jumpToEnd → jump) (P2).
- Guard last-anchor opening position with hasContentTarget; the Stimulus
  target getter throws rather than returning undefined (P2).
- Include the flex row gap in prepend preservation so the visible row no
  longer drifts down by one gap per history insertion (P2).
- Only treat direct content children as transcript rows; markup mutated
  inside a message (subtree) is handled as streaming, not history (P2).

Rebuilt MCP registry.

* [Documentation] Message Scroller: faithful chat-window demo with Empty state

Add the shadcn-style chat window as the hero example: a Card with an Empty
state until the first message, then a scrolling transcript that follows the
live edge, plus an input footer. A docs-only Stimulus demo harness
(message-scroller-chat) clones server-rendered user/assistant templates on
send so the scroller's autoscroll/anchoring is demonstrated live — standing
in for a real ActionCable/streaming source. Uses the new Empty component.

* [Bug Fix] Message Scroller: direction-aware scroll button visibility

updateButton now derives each button's active state from its own
data-direction — an end button activates when away from the bottom, a
start button when away from the top — and iterates all button targets.
Previously a start-direction button used end logic, so it was inert at
the live edge and showed at the wrong end. (cubic P2)

Author: djalmaaraujo

docs/app/components/shared/components_list.rb

@@ -37,6 +37,7 @@ def components
           {name: "Link", path: docs_link_path},
           {name: "Masked Input", path: masked_input_path},
           {name: "Message", path: docs_message_path},
+          {name: "Message Scroller", path: docs_message_scroller_path},
           {name: "Pagination", path: docs_pagination_path},
           {name: "Popover", path: docs_popover_path},
           {name: "Progress", path: docs_progress_path},

docs/app/controllers/docs_controller.rb

@@ -174,6 +174,10 @@ def message
     render Views::Docs::Message.new
   end
 
+  def message_scroller
+    render Views::Docs::MessageScroller.new
+  end
+
   def pagination
     render Views::Docs::Pagination.new
   end

docs/app/javascript/controllers/index.js

@@ -7,8 +7,8 @@ import { application } from "./application"
 import IframeThemeController from "./iframe_theme_controller"
 application.register("iframe-theme", IframeThemeController)
 
-import ToastDemoController from "./toast_demo_controller"
-application.register("toast-demo", ToastDemoController)
+import MessageScrollerChatController from "./message_scroller_chat_controller"
+application.register("message-scroller-chat", MessageScrollerChatController)
 
 import RubyUi__AccordionController from "./ruby_ui/accordion_controller"
 application.register("ruby-ui--accordion", RubyUi__AccordionController)
@@ -76,6 +76,9 @@ application.register("ruby-ui--hover-card", RubyUi__HoverCardController)
 import RubyUi__MaskedInputController from "./ruby_ui/masked_input_controller"
 application.register("ruby-ui--masked-input", RubyUi__MaskedInputController)
 
+import RubyUi__MessageScrollerController from "./ruby_ui/message_scroller_controller"
+application.register("ruby-ui--message-scroller", RubyUi__MessageScrollerController)
+
 import RubyUi__PopoverController from "./ruby_ui/popover_controller"
 application.register("ruby-ui--popover", RubyUi__PopoverController)
 
@@ -117,3 +120,6 @@ application.register("ruby-ui--tooltip", RubyUi__TooltipController)
 
 import SidebarMenuController from "./sidebar_menu_controller"
 application.register("sidebar-menu", SidebarMenuController)
+
+import ToastDemoController from "./toast_demo_controller"
+application.register("toast-demo", ToastDemoController)

docs/app/javascript/controllers/message_scroller_chat_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Docs-only demo harness for the Message Scroller chat window.
+//
+// On submit it clones the server-rendered user/assistant <template> rows into
+// the scroller content and clears the empty state. The MessageScroller
+// controller observes the content and handles autoscroll/anchoring — this
+// controller only produces rows, the way a real ActionCable/streaming source
+// would. Connects to data-controller="message-scroller-chat".
+export default class extends Controller {
+  static targets = ["content", "empty", "scroller", "input", "userTemplate", "assistantTemplate"];
+  static values = {
+    replies: { type: Array, default: [] },
+  };
+
+  connect() {
+    this.turn = 0;
+  }
+
+  send(event) {
+    event.preventDefault();
+    const text = this.hasInputTarget ? this.inputTarget.value.trim() : "";
+    if (!text) return;
+
+    this.reveal();
+    this.appendRow(this.userTemplateTarget, text);
+    this.inputTarget.value = "";
+
+    const reply = this.repliesValue[this.turn % this.repliesValue.length] || "Got it — thanks!";
+    this.turn += 1;
+    // Let the assistant reply land a beat later, like a streamed response.
+    this.replyTimer = setTimeout(() => {
+      this.appendRow(this.assistantTemplateTarget, reply);
+    }, 500);
+  }
+
+  reset() {
+    if (this.replyTimer) clearTimeout(this.replyTimer);
+    if (this.hasContentTarget) this.contentTarget.replaceChildren();
+    this.scrollerTarget?.classList.add("hidden");
+    this.emptyTarget?.classList.remove("hidden");
+    this.turn = 0;
+  }
+
+  reveal() {
+    this.emptyTarget?.classList.add("hidden");
+    this.scrollerTarget?.classList.remove("hidden");
+  }
+
+  appendRow(template, text) {
+    if (!template || !this.hasContentTarget) return;
+    const row = template.content.firstElementChild.cloneNode(true);
+    const content = row.querySelector("[data-slot=bubble-content]");
+    if (content) content.textContent = text;
+    this.contentTarget.appendChild(row);
+  }
+
+  disconnect() {
+    if (this.replyTimer) clearTimeout(this.replyTimer);
+  }
+}