shadcn_view_component 0.3.3

data/app/components/shadcn/menubar/sub_trigger/component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Menubar
+    module SubTrigger
+      # Its own file for two differences from the dropdown's, both one token
+      # wide and both upstream's: `outline-none` where the dropdown writes
+      # `outline-hidden`, and a chevron sized `h-4 w-4` where the dropdown
+      # writes `size-4` (menubar.tsx:238). The same size, spelled differently —
+      # and `parity_spec` compares tokens, so the spelling is the port.
+      class Component < Shadcn::DropdownMenu::SubTrigger::Component
+        slot_name :"menubar-sub-trigger"
+
+        style do
+          base {
+            "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm " \
+            "outline-none select-none focus:bg-accent focus:text-accent-foreground " \
+            "data-[inset]:pl-8 data-[state=open]:bg-accent " \
+            "data-[state=open]:text-accent-foreground"
+          }
+        end
+
+        private
+
+        def chevron
+          render(Icon::Component.new("chevron-right", class: "ml-auto h-4 w-4"))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/menubar/trigger/component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Menubar
+    module Trigger
+      # One name on the bar.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"menubar-trigger"
+
+        style do
+          base {
+            "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden " \
+            "select-none focus:bg-accent focus:text-accent-foreground " \
+            "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            role: "menuitem",
+            "aria-haspopup" => "menu",
+            "aria-expanded" => "false",
+            "data-state" => "closed",
+            "data-shadcn--dropdown-menu-target" => "trigger",
+            "data-shadcn--menubar-target" => "trigger",
+            # Two controllers listening to one element: the menu's, which opens
+            # and closes it, and the bar's, which decides what the arrows do and
+            # what a hover means while another menu is already open.
+            "data-action" => "click->shadcn--dropdown-menu#toggle " \
+                             "keydown->shadcn--dropdown-menu#triggerKeydown " \
+                             "keydown->shadcn--menubar#keydown " \
+                             "pointerenter->shadcn--menubar#pointerEnter " \
+                             "focus->shadcn--menubar#focused"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/menubar.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The Menubar family — sixteen slots, and the third built on the dropdown's.
+  #
+  # Measured against `dropdown-menu.tsx`: eight carry byte-identical class
+  # strings once the prefix is normalised, and those are declared with `from:`.
+  # The rest differ for real and are written out: the items round to `rounded-xs`
+  # where the dropdown rounds to `rounded-sm`, the sub-trigger takes
+  # `outline-none` rather than `outline-hidden`, and anything reading a
+  # `--radix-*` property reads `--radix-menubar-*`.
+  module Menubar
+    extend Parts
+
+    part :label, slot: "menubar-label", from: DropdownMenu::Label::Component
+
+    part :separator, slot: "menubar-separator", from: DropdownMenu::Separator::Component
+
+    part :shortcut, slot: "menubar-shortcut", from: DropdownMenu::Shortcut::Component
+
+    part :group, slot: "menubar-group", from: DropdownMenu::Group::Component
+
+    part :radio_group, slot: "menubar-radio-group", from: DropdownMenu::RadioGroup::Component
+
+    part :item, slot: "menubar-item", from: DropdownMenu::Item::Component
+
+    # `rounded-xs`, where the dropdown's are `rounded-sm`. One token, and the
+    # only reason these are not `from:` like the rest.
+    part :checkbox_item, slot: "menubar-checkbox-item",
+                         from: DropdownMenu::CheckboxItem::Component,
+                         classes: "relative flex cursor-default items-center gap-2 rounded-xs " \
+                                  "py-1.5 pr-2 pl-8 text-sm outline-hidden select-none " \
+                                  "focus:bg-accent focus:text-accent-foreground " \
+                                  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 " \
+                                  "[&_svg]:pointer-events-none [&_svg]:shrink-0 " \
+                                  "[&_svg:not([class*='size-'])]:size-4"
+
+    part :radio_item, slot: "menubar-radio-item",
+                      from: DropdownMenu::RadioItem::Component,
+                      classes: "relative flex cursor-default items-center gap-2 rounded-xs " \
+                               "py-1.5 pr-2 pl-8 text-sm outline-hidden select-none " \
+                               "focus:bg-accent focus:text-accent-foreground " \
+                               "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 " \
+                               "[&_svg]:pointer-events-none [&_svg]:shrink-0 " \
+                               "[&_svg:not([class*='size-'])]:size-4"
+  end
+end

data/app/components/shadcn/message/component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Message
+    # Port of registry/new-york-v4/ui/message.tsx
+    #
+    # `align:` is not a cva variant upstream — the classes are one string and the
+    # side is chosen by `data-[align=end]:flex-row-reverse` reading the attribute
+    # this writes (message.tsx:23-26). Its own file all the same, because a
+    # computed attribute is exactly what `part` does not do.
+    class Component < ApplicationViewComponent
+      slot_name :message
+
+      style do
+        base {
+          "group/message relative flex w-full min-w-0 gap-2 text-sm " \
+          "data-[align=end]:flex-row-reverse"
+        }
+      end
+
+      attr_reader :align
+
+      def initialize(align: :start, **attributes)
+        @align = align&.to_sym || :start
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{ "data-align" => align }.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/message/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Message
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Actions" and "Attachment".
+      def actions
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/message/previews/actions.html.erb

@@ -0,0 +1,51 @@
+<%# Upstream's "Actions" and "Attachment".
+
+    Both live in the content column rather than beside the bubble, which is
+    what makes them line up with it whichever way the message is aligned: the
+    footer holds the row of buttons, and an attachment sits above the bubble as
+    another block in the same column.
+
+    The buttons are `icon-xs` ghosts and each has a name of its own — an
+    icon-only control that says nothing is a control a screen reader cannot
+    offer, which is the thing upstream's own accessibility note on this page is
+    about. %>
+<div class="flex w-[420px] flex-col gap-6">
+  <%= render(Shadcn::Message::Group::Component.new) do %>
+    <%= render(Shadcn::Message::Component.new(align: :end)) do %>
+      <%= render(Shadcn::Message::Content::Component.new) do %>
+        <%= render(Shadcn::Attachment::Component.new(size: :sm)) do %>
+          <%= render(Shadcn::Attachment::Media::Component.new) { "PDF" } %>
+          <%= render(Shadcn::Attachment::Content::Component.new) do %>
+            <%= render(Shadcn::Attachment::Title::Component.new) { "contract.pdf" } %>
+            <%= render(Shadcn::Attachment::Description::Component.new) { "184 KB" } %>
+          <% end %>
+        <% end %>
+        <%= render(Shadcn::Bubble::Component.new(align: :end)) do %>
+          <%= render(Shadcn::Bubble::Content::Component.new) { "Signed and sent back." } %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render(Shadcn::Message::Component.new) do %>
+      <%= render(Shadcn::Message::Avatar::Component.new) do %>
+        <%= render(Shadcn::Avatar::Component.new(class: "size-8")) do |avatar| %>
+          <% avatar.with_fallback { "SC" } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::Message::Content::Component.new) do %>
+        <%= render(Shadcn::Bubble::Component.new(variant: :muted)) do %>
+          <%= render(Shadcn::Bubble::Content::Component.new) { "Got it — filing it now." } %>
+        <% end %>
+        <%= render(Shadcn::Message::Footer::Component.new) do %>
+          <div class="flex items-center gap-1">
+            <% [[ "check", "Copy" ], [ "circle", "Retry" ], [ "x", "Dismiss" ]].each do |icon, label| %>
+              <%= render(Shadcn::Button::Component.new(variant: :ghost, size: :"icon-xs", "aria-label": label)) do %>
+                <%= render(Shadcn::Icon::Component.new(icon)) %>
+              <% end %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/message/previews/default.html.erb

@@ -0,0 +1,35 @@
+<%# The composition upstream's own demo renders, read from it rather than
+    inferred from the TSX: a group of messages, each an avatar beside a
+    content column, and the *bubble* nested inside that column. The message
+    lays out the row; the bubble is what carries the surface.
+
+    `align: :end` is what turns a message around — `data-[align=end]` reverses
+    the row and pushes the bubble and the footer to the other side. %>
+<div class="flex w-[420px] flex-col gap-6">
+  <%= render(Shadcn::Message::Group::Component.new) do %>
+    <%= render(Shadcn::Message::Component.new) do %>
+      <%= render(Shadcn::Message::Avatar::Component.new) do %>
+        <%= render(Shadcn::Avatar::Component.new(class: "size-8")) do |avatar| %>
+          <% avatar.with_fallback { "SC" } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::Message::Content::Component.new) do %>
+        <%= render(Shadcn::Bubble::Component.new(variant: :muted)) do %>
+          <%= render(Shadcn::Bubble::Content::Component.new) do %>
+            I checked the registry and the component is published.
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render(Shadcn::Message::Component.new(align: :end)) do %>
+      <%= render(Shadcn::Message::Content::Component.new) do %>
+        <%= render(Shadcn::Message::Header::Component.new) { "You" } %>
+        <%= render(Shadcn::Bubble::Component.new(align: :end)) do %>
+          <%= render(Shadcn::Bubble::Content::Component.new) { "Thanks — I will pull it in." } %>
+        <% end %>
+        <%= render(Shadcn::Message::Footer::Component.new) { "9:41 AM" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/message.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Message family that are just an element with a
+  # `data-slot` and a fixed set of classes. Anything with variants, slots or
+  # markup of its own keeps its own `component.rb`.
+  #
+  # Five of the six are exactly that: only `Message` itself computes an
+  # attribute, from `align:`.
+  module Message
+    extend Parts
+
+    part :group, slot: "message-group", classes: "flex min-w-0 flex-col gap-2"
+
+    part :avatar, slot: "message-avatar",
+                  classes: "flex w-fit min-w-8 shrink-0 items-center justify-center self-end " \
+                           "overflow-hidden rounded-full bg-muted " \
+                           "group-has-data-[slot=message-footer]/message:-translate-y-8"
+
+    part :content, slot: "message-content",
+                   classes: "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word " \
+                            "group-data-[align=end]/message:*:data-slot:self-end"
+
+    part :header, slot: "message-header",
+                  classes: "flex max-w-full min-w-0 items-center px-3 text-xs font-medium " \
+                           "text-muted-foreground " \
+                           "group-has-data-[variant=ghost]/message:px-0"
+
+    part :footer, slot: "message-footer",
+                  classes: "flex max-w-full min-w-0 items-center px-3 text-xs font-medium " \
+                           "text-muted-foreground " \
+                           "group-has-data-[variant=ghost]/message:px-0 " \
+                           "group-data-[align=end]/message:justify-end"
+  end
+end

data/app/components/shadcn/message_scroller/button/component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module MessageScroller
+    module Button
+      # The floating "jump to the end" control, and its start-side twin.
+      #
+      # A Button with different defaults — `secondary`, `icon-sm` — plus the
+      # positioning and the transition, so it subclasses rather than being
+      # declared with `part … from:`, which restamps the slot and leaves the
+      # arguments alone.
+      #
+      # `data-active` is the controller's to write and decides everything
+      # visible: the button is not hidden when there is nowhere to scroll, it is
+      # scaled, faded and pushed off its edge, with a slower easing on the way
+      # out than on the way in. Rendered `false` so it starts out of sight
+      # without a frame of flicker before the controller connects.
+      class Component < Shadcn::Button::Component
+        slot_name :"message-scroller-button"
+
+        style do
+          base {
+            "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background " \
+            "text-foreground transition-[translate,scale,opacity] duration-200 " \
+            "hover:bg-muted hover:text-foreground " \
+            "data-[active=false]:pointer-events-none data-[active=false]:scale-95 " \
+            "data-[active=false]:opacity-0 data-[active=false]:duration-400 " \
+            "data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] " \
+            "data-[active=true]:translate-y-0 data-[active=true]:scale-100 " \
+            "data-[active=true]:opacity-100 " \
+            "data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] " \
+            "data-[direction=end]:bottom-4 " \
+            "data-[direction=end]:data-[active=false]:translate-y-full " \
+            "data-[direction=start]:top-4 " \
+            "data-[direction=start]:data-[active=false]:-translate-y-full " \
+            "rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180"
+          }
+        end
+
+        attr_reader :direction
+
+        def initialize(direction: :end, variant: :secondary, size: :"icon-sm", **attributes)
+          @direction = direction&.to_sym || :end
+          super(variant:, size:, **attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-direction" => direction,
+            "data-active" => "false",
+            # Out of the tab order while there is nowhere to scroll, as the
+            # primitive does (components.tsx:400). It is invisible and
+            # `pointer-events-none` in that state, so leaving it tabbable would
+            # give a keyboard a stop that a pointer does not have.
+            tabindex: -1,
+            "data-shadcn--message-scroller-target" => "button",
+            "data-action" => "shadcn--message-scroller#jump"
+          }.merge(defaults))
+        end
+
+        # The chevron and its name. Upstream renders one arrow and rotates it for
+        # the start direction (message-scroller.tsx:108-115), which is why there
+        # is one icon here and a `rotate-180` in the classes above.
+        def call
+          return render_element(body: content) if content.present?
+
+          render_element(
+            body: safe_join([
+              render(Shadcn::Icon::Component.new("chevron-down")),
+              tag.span(shadcn_t("message_scroller.#{direction == :end ? 'scroll_to_end' : 'scroll_to_start'}"),
+                       class: "sr-only")
+            ])
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/message_scroller/component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module MessageScroller
+    # Port of registry/new-york-v4/ui/message-scroller.tsx, which is a thin
+    # wrapper over `@shadcn/react/message-scroller` — vendored at
+    # `vendor/shadcn-react/` so the Stimulus port has a source to answer to.
+    #
+    # Upstream's `MessageScrollerProvider` renders no DOM at all: it is pure
+    # context holding the five options below (components.tsx:89-107). There is
+    # nothing to reproduce, so the options are Stimulus values and the
+    # controller lives on this element — the same answer `useSidebar` got.
+    class Component < ApplicationViewComponent
+      slot_name :"message-scroller"
+
+      style do
+        base {
+          "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden"
+        }
+      end
+
+      attr_reader :auto_scroll, :default_scroll_position, :scroll_edge_threshold,
+                  :scroll_margin, :scroll_previous_item_peek
+
+      # Defaults are upstream's own (components.tsx:89-96). `scrollEdgeThreshold`,
+      # `scrollMargin` and `scrollPreviousItemPeek` are undefined there and fall
+      # back inside the primitive; passing nil here leaves the value off the
+      # element so the controller's own default applies, rather than baking a
+      # number this file cannot check.
+      def initialize(auto_scroll: false, default_scroll_position: :end,
+                     scroll_edge_threshold: nil, scroll_margin: nil,
+                     scroll_previous_item_peek: nil, **attributes)
+        @auto_scroll = auto_scroll
+        @default_scroll_position = default_scroll_position
+        @scroll_edge_threshold = scroll_edge_threshold
+        @scroll_margin = scroll_margin
+        @scroll_previous_item_peek = scroll_previous_item_peek
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**values.merge(defaults))
+      end
+
+      private
+
+      def values
+        {
+          "data-controller" => "shadcn--message-scroller",
+          "data-shadcn--message-scroller-auto-scroll-value" => auto_scroll,
+          "data-shadcn--message-scroller-default-scroll-position-value" => default_scroll_position,
+          "data-shadcn--message-scroller-scroll-edge-threshold-value" => scroll_edge_threshold,
+          "data-shadcn--message-scroller-scroll-margin-value" => scroll_margin,
+          "data-shadcn--message-scroller-scroll-previous-item-peek-value" => scroll_previous_item_peek
+        }.compact
+      end
+    end
+  end
+end

data/app/components/shadcn/message_scroller/content/component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module MessageScroller
+    module Content
+      # The column of messages, and the tail spacer under it.
+      #
+      # The spacer is not decoration and not a slot: it is a hidden sibling of
+      # the rows whose height the controller sets, so the last message can be
+      # scrolled to the *top* of the viewport rather than stopping at the bottom
+      # (components.tsx:301-307). It is also the reason `scroll_geometry.js`
+      # measures the rows instead of reading `scrollHeight`, which the spacer
+      # inflates.
+      #
+      # `role="log"` with `aria-relevant="additions"` is upstream's default and
+      # is what makes an arriving message announce itself. Both are defaults, so
+      # a caller who knows better can say so.
+      class Component < ApplicationViewComponent
+        slot_name :"message-scroller-content"
+
+        style do
+          base { "flex h-max min-h-full flex-col gap-8" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "log",
+            "aria-relevant" => "additions",
+            "data-shadcn--message-scroller-target" => "content"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ content, spacer ]))
+        end
+
+        private
+
+        def spacer
+          tag.div(
+            "aria-hidden": true,
+            "data-message-scroller-spacer": "",
+            "data-shadcn--message-scroller-target": "spacer",
+            hidden: true
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/message_scroller/item/component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module MessageScroller
+    module Item
+      # One row. Its two attributes are the markup's half of the contract with
+      # `scroll_geometry.js`, which reads `dataset.messageId` and
+      # `dataset.scrollAnchor` — so they are rendered whether or not a controller
+      # is present.
+      #
+      # `data-scroll-anchor` is written as the string `"false"` rather than
+      # omitted, exactly as upstream does (components.tsx:340). Nothing here
+      # depends on the difference, but a host's CSS might.
+      #
+      # `content-visibility: auto` lets the browser skip laying out rows that are
+      # off screen, and `contain-intrinsic-size` is the guess it uses for their
+      # height until it does. They arrive as arbitrary properties because
+      # Tailwind has no utility for either.
+      class Component < ApplicationViewComponent
+        slot_name :"message-scroller-item"
+
+        style do
+          base {
+            "min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]"
+          }
+        end
+
+        attr_reader :message_id, :scroll_anchor
+
+        def initialize(message_id: nil, scroll_anchor: false, **attributes)
+          @message_id = message_id
+          @scroll_anchor = scroll_anchor
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-message-id" => message_id,
+            "data-scroll-anchor" => scroll_anchor.to_s
+          }.compact.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/message_scroller/preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module MessageScroller
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/message_scroller/previews/default.html.erb

@@ -0,0 +1,72 @@
+<%# The markup only. The Stimulus controller does not exist yet, so nothing
+    here follows the live end, sizes the tail spacer or lights the buttons —
+    both stay at `data-active="false"`, which is how they render.
+
+    That is deliberate rather than unfinished: the rows carry `data-message-id`
+    and `data-scroll-anchor`, which is the markup's half of the contract
+    `shadcn/scroll_geometry.js` already reads, and building the controller
+    against real markup beats inventing target names for it. See
+    `.claude/docs/features/message-scroller.md`.
+
+    The height is the preview's, not the component's: the scroller is
+    `size-full`, so it takes whatever it is put in — and with no height at all
+    there is nothing to scroll and nothing to see. %>
+<%# `bg-card`, and that is not decoration. The buttons are `bg-background` with
+    no border width — upstream's own string (message-scroller.tsx:102), and the
+    `new-york-v4` Button's `secondary` variant adds no border either — so on a
+    surface that is *also* `--background` they have no visible edge at all. They
+    are meant to float over a panel, which is what a chat log sits in.
+
+    Worth knowing before comparing this to ui.shadcn.com: that page now serves
+    the Base UI registry, whose Button is `rounded-2xl border`. Measured on the
+    live demo. Its buttons look different because it is a different Button, not
+    because this port dropped something. %>
+<div class="h-[420px] w-[420px] rounded-xl border bg-card">
+  <%= render(Shadcn::MessageScroller::Component.new(auto_scroll: true)) do %>
+    <%= render(Shadcn::MessageScroller::Viewport::Component.new) do %>
+      <%= render(Shadcn::MessageScroller::Content::Component.new(class: "p-4")) do %>
+        <%# Enough of them to overflow the frame. A scroller whose content
+            fits has nothing to follow and nothing to publish: `scrollHeight`
+            equals `clientHeight`, `data-scrollable` never appears, and every
+            assertion about it passes for the wrong reason. %>
+        <% [
+             [ "Is the registry entry published?", :start ],
+             [ "It is — the component and the example both went out this morning.", :end ],
+             [ "Good. What changed in the last release?", :start ],
+             [ "The scroller keeps the viewport steady when older messages load above it.", :end ],
+             [ "That is the part everyone gets wrong.", :start ],
+             [ "It is also the part with the most tests upstream.", :end ],
+             [ "Does it still follow the end while a reply streams in?", :start ],
+             [ "It does, and it stops the moment you scroll up to read.", :end ],
+             [ "What brings it back?", :start ],
+             [ "The button at the bottom, or reaching the end yourself.", :end ],
+             [ "And the tail spacer?", :start ],
+             [ "It is what lets the last message reach the top instead of the bottom.", :end ]
+           ].each_with_index do |(text, align), index| %>
+          <% id = "m#{index + 1}" %>
+          <%# No row here is anchored, deliberately. `scroll_anchor: true` marks
+              a turn the scroller takes to the *top* of the viewport, and it
+              acts on any anchor it has not handled yet — so a server-rendered
+              one is jumped to on load and then holds following off, which is
+              correct and makes a fixture that says nothing about anything else.
+              The behaviour is covered where it actually happens, on a turn that
+              arrives: see `spec/system/message_scroller_spec.rb`. %>
+          <%= render(Shadcn::MessageScroller::Item::Component.new(message_id: id)) do %>
+            <%= render(Shadcn::Message::Component.new(align:)) do %>
+              <%= render(Shadcn::Message::Content::Component.new) do %>
+                <%= render(Shadcn::Bubble::Component.new(
+                      variant: align == :end ? :default : :muted, align:
+                    )) do %>
+                  <%= render(Shadcn::Bubble::Content::Component.new) { text } %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render(Shadcn::MessageScroller::Button::Component.new(direction: :start)) %>
+    <%= render(Shadcn::MessageScroller::Button::Component.new) %>
+  <% end %>
+</div>

data/app/components/shadcn/message_scroller/viewport/component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module MessageScroller
+    module Viewport
+      # The scroll container. Three of its classes are shadcn's own CSS rather
+      # than Tailwind's — `scroll-fade-b`, `scrollbar-thin`,
+      # `scrollbar-gutter-stable` — reproduced at the end of `shadcn.css`;
+      # without them these would be inert and `parity_spec`, which compares class
+      # text and not generated CSS, would not notice.
+      #
+      # `data-autoscrolling:scrollbar-none` is the one variant here that reads an
+      # attribute the controller writes: the scrollbar is hidden while a
+      # programmatic scroll is in flight, so a smooth jump does not flicker one
+      # in and out.
+      class Component < ApplicationViewComponent
+        slot_name :"message-scroller-viewport"
+
+        style do
+          base {
+            "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin " \
+            "scrollbar-gutter-stable overflow-y-auto overscroll-contain " \
+            "contain-content data-autoscrolling:scrollbar-none"
+          }
+        end
+
+        # `tabindex: 0` is the primitive's (components.tsx:209) and is not
+        # decoration: a scrollable region with no focusable content inside it
+        # cannot be scrolled from a keyboard at all unless it is focusable
+        # itself. axe fails the page without it, which is how the omission was
+        # found.
+        def element_attributes(**defaults)
+          super(**{
+            tabindex: 0,
+            "data-shadcn--message-scroller-target" => "viewport"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end