// Port of shadcn's `message-scroller.tsx`'s `MessageScroller` (the styled
// frame). Wraps `@shadcn/react/message-scroller`'s `MessageScroller.Root`,
// which is a plain `<div ref={setRootElement} {...props} />` — this port
// registers the same element with the controller via `setRootElement` (a
// tag-variable ref, `el()`, standing in for the source's React `ref`
// callback) and otherwise renders byte-identical markup.
import { cn } from "#lib/utils.ts";
import type { MessageScrollerControllerGetter } from "./lib/controller.ts";
import { messageScroller as styles } from "./classes.ts";

export interface Input extends Marko.Input<"div"> {
  /** Controller getter provided by the nearest `<message-scroller-provider>`. */
  controller: MessageScrollerControllerGetter;
}

<const/{ controller, class: className, content, ...rest }=input/>

<div/el
  ...rest
  data-slot="message-scroller"
  class=cn(styles.root, className)
>
  <${content}/>
</div>

<lifecycle
  onMount() {
    controller().setRootElement(el());
  }
  onDestroy() {
    controller().setRootElement(null);
  }
/>