import { dynamic, isServer } from "@solidjs/web";
import { omit, onCleanup, untrack } from "solid-js";
import { useCspDisableStyleElements, useCspNonce } from "../../csp-provider/csp-context.jsx";
import { composeRefs, userRef } from "../../internals/compose-refs.jsx";
import { mergeRootProps } from "../../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../../internals/resolve-class-style.jsx";
import { registerDisableScrollbarStyle } from "../../internals/scroll-area-utils/register-disable-scrollbar-style.jsx";
import { createScrollArea } from "./create-scroll-area.jsx";
import { ScrollAreaRootContext } from "./scroll-area-root-context.jsx";
/**
 * Groups all parts of the scroll area. Renders a `<div>` element.
 *
 * Thin structural adapter over {@link createScrollArea} — the root's reactive
 * state, element refs, derived state, and shared pointer/scroll handlers all
 * live in the primitive (which IS the value published to descendants via the
 * root context). This wrapper maps props → options, registers the shared
 * disable-scrollbar `<style>` against the owning document (ref-counted, CSP
 * nonce-carrying), and renders the presentation `<div>` with the api's
 * `root()` slot.
 */
export function ScrollAreaRoot(props) {
  const nonce = useCspNonce();
  const disableStyleElements = useCspDisableStyleElements();
  const c = createScrollArea({
    overflowEdgeThreshold: () => props.overflowEdgeThreshold
  });

  // Register the shared disable-scrollbar stylesheet against the owning
  // document. Ref-counted — the first root in the document injects the
  // `<style>`, subsequent roots share it, and the last unmount removes it.
  // `disableStyleElements` opts out entirely. `disableStyleElements()` /
  // `nonce()` are read once at setup; `untrack` keeps those snapshot reads
  // out of the component-body strict-read shell. Skipped on the server —
  // the registration touches `document` directly (it runs in the component
  // body, not an effect), and the disable-scrollbar style is purely a
  // client-side scrollbar-suppression concern with nothing to serialize.
  untrack(() => {
    if (!isServer && !disableStyleElements()) {
      const dispose = registerDisableScrollbarStyle(c.rootRef.current, nonce());
      onCleanup(dispose);
    }
  });
  const userStyling = resolveClassStyle(props, () => c.viewportState());
  const userProps = omit(props, "class", "style", "attrs", "as", "children", "overflowEdgeThreshold");
  const styledUserProps = mergeRootProps(userStyling, userProps);

  // Bind the slot bag to a `const` before the JSX spread — hydration-critical.
  // Spreading an inline call (`{...c.root(...)}`) makes the Solid SSR compiler
  // wrap it in a lazy thunk whose server-side resolution diverges from the
  // client's, dropping attributes from the SSR markup and shifting hydration
  // keys. A pre-bound variable spread is passed straight through. See
  // `collapsible-root.tsx` for the full explanation.
  const rootProps = c.root(styledUserProps);
  const Tag = dynamic(() => props.as ?? "div");
  return <Tag {...rootProps} ref={composeRefs(c.bindRoot, userRef(props))}>
			<ScrollAreaRootContext value={c}>{props.children}</ScrollAreaRootContext>
		</Tag>;
}
//# sourceMappingURL=scroll-area-root.jsx.map