@underverse-ui/underverse 1.0.33 → 1.0.34

package/AGENTS.md

@@ -51,7 +51,11 @@ import { OverlayScrollbarProvider } from "@underverse-ui/underverse";
 export function App() {
   return (
     <>
-      <OverlayScrollbarProvider enabled theme="os-theme-underverse" autoHide="leave" />
+      <OverlayScrollbarProvider
+        enabled
+        theme="os-theme-underverse"
+        autoHide="leave"
+      />
       {/* app */}
     </>
   );
@@ -60,8 +64,8 @@ export function App() {
 
 Behavior:
 
-- Provider initializes only on `[data-os-scrollbar]`.
-- Underverse components already mark their internal scroll containers.
+- Provider initializes globally by default on common scroll selectors (`.overflow-*`, `textarea`) and `[data-os-scrollbar]`.
+- Provider can run globally via custom `selector` (for example: `.overflow-auto, .overflow-y-auto, .overflow-x-auto, [data-os-scrollbar]`).
 - Use `data-os-ignore` on a node to opt out.
 
 ## i18n Notes

package/CHANGELOG.md

@@ -0,0 +1,57 @@
+# Changelog
+
+All notable changes to `@underverse-ui/underverse` are documented in this file.
+
+## [1.0.32] - 2026-02-24
+
+### Changed
+
+- Standardized OverlayScrollbars initialization to explicit marker targeting only:
+  - Provider now initializes only on `[data-os-scrollbar]`.
+  - Removed generic overflow class scanning (`.overflow-*`).
+- Hardened provider behavior for production:
+  - No initialization on `document.body` / `document.documentElement`.
+  - Excludes portal / modal / toast trees:
+    - `[data-radix-portal]`
+    - `[role="dialog"]`
+    - `[aria-modal="true"]`
+    - `[data-sonner-toaster]`
+  - Supports node-level opt-out with `data-os-ignore`.
+- Added provider configuration props:
+  - `enabled` (default `true`)
+  - `theme` (default `os-theme-underverse`)
+  - `visibility`
+  - `autoHide`
+  - `autoHideDelay`
+  - `dragScroll`
+  - `clickScroll`
+  - `selector` (default `.overflow-auto, .overflow-y-auto, .overflow-x-auto, .overflow-scroll, .overflow-y-scroll, .overflow-x-scroll, textarea, [data-os-scrollbar]`)
+  - `exclude` (default `html, body, [data-os-ignore], [data-radix-portal], [role='dialog'], [aria-modal='true'], [data-sonner-toaster]`)
+- Exported provider prop type:
+  - `OverlayScrollbarProviderProps`
+
+### Updated Components
+
+- Provider now covers common scrollable surfaces by default via global selector, so Underverse components do not require per-component manual marker wiring.
+
+### Internal
+
+- `Popover` now sets `role="dialog"` only when `modal=true`, avoiding accidental exclusion for non-modal popovers.
+- Moved to default global selector behavior, so apps no longer need to add `data-os-scrollbar` manually to each Underverse component.
+
+### Testing
+
+- Added controller-level tests for:
+  - selector initialization
+  - exclude behavior
+  - dynamic add/remove cleanup
+  - portal safety with wide selectors
+  - destroy cleanup (memory leak prevention)
+
+### Migration
+
+- Mount a single `OverlayScrollbarProvider` from the package at app root.
+- Remove app-local DOM-scanning scrollbar providers.
+- Keep `overlayscrollbars/overlayscrollbars.css` imported globally.
+- Default is already global selector mode. Override `selector` only if you need custom scope.
+- For app-specific opt-out nodes, use `data-os-ignore`.

package/README.md

@@ -138,6 +138,7 @@ import { Form, FormField, FormItem, FormLabel, FormMessage } from "@underverse-u
 ### Overlay Scrollbars (Optional, Recommended)
 
 Use `OverlayScrollbarProvider` to get overlay scrollbars (no layout space taken) across your app and Underverse components.
+See release notes in `CHANGELOG.md` for migration details by version.
 
 ```tsx
 import "overlayscrollbars/overlayscrollbars.css";
@@ -160,16 +161,37 @@ function App() {
 
 Provider behavior:
 
-- Initializes **only** on elements marked with `data-os-scrollbar`.
+- Initializes globally by default on common scroll containers (`.overflow-*`, `textarea`) and `[data-os-scrollbar]`.
 - Does **not** initialize on `document.body` / `document.documentElement`.
 - Skips portal/dialog trees (`[data-radix-portal]`, `[role="dialog"]`, `[aria-modal="true"]`, `[data-sonner-toaster]`).
 - Per-node opt-out is available via `data-os-ignore`.
 
+Provider props:
+
+- `enabled?: boolean`
+- `theme?: string`
+- `visibility?: "visible" | "hidden" | "auto"`
+- `autoHide?: "never" | "scroll" | "leave" | "move"`
+- `autoHideDelay?: number`
+- `dragScroll?: boolean`
+- `clickScroll?: boolean`
+- `selector?: string` default: `.overflow-auto, .overflow-y-auto, .overflow-x-auto, .overflow-scroll, .overflow-y-scroll, .overflow-x-scroll, textarea, [data-os-scrollbar]`
+- `exclude?: string` default: `html, body, [data-os-ignore], [data-radix-portal], [role='dialog'], [aria-modal='true'], [data-sonner-toaster]`
+
+Custom selector mode example:
+
+```tsx
+<OverlayScrollbarProvider
+  selector=".overflow-auto, .overflow-y-auto, .overflow-x-auto, [data-os-scrollbar]"
+/>
+```
+
 Migration notes:
 
 - Remove any local DOM-scanning scrollbar provider in your app.
 - Keep a single `OverlayScrollbarProvider` mounted once at app root.
-- If you have custom app-level scroll containers outside Underverse components, add `data-os-scrollbar` to those nodes.
+- You no longer need to add `data-os-scrollbar` to every Underverse component manually.
+- Use `data-os-scrollbar` only for custom scroll nodes that are not covered by your selector.
 
 ### Standalone React (Vite, CRA, etc.)
 

package/agent-recipes.json

@@ -28,6 +28,11 @@
       "title": "Enable overlay scrollbars",
       "code": "import \"overlayscrollbars/overlayscrollbars.css\";\nimport { OverlayScrollbarProvider } from \"@underverse-ui/underverse\";\n\nexport function App(){\n  return <><OverlayScrollbarProvider enabled theme=\"os-theme-underverse\" autoHide=\"leave\" />{/* app */}</>;\n}\n"
     },
+    {
+      "id": "overlay-scrollbar-global-selector",
+      "title": "Enable global selector mode",
+      "code": "import \"overlayscrollbars/overlayscrollbars.css\";\nimport { OverlayScrollbarProvider } from \"@underverse-ui/underverse\";\n\nexport function App(){\n  return <><OverlayScrollbarProvider selector=\".overflow-auto, .overflow-y-auto, .overflow-x-auto, [data-os-scrollbar]\" />{/* app */}</>;\n}\n"
+    },
     {
       "id": "api-discovery-order",
       "title": "How agents should discover API",

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "sourceEntry": "src/index.ts",
   "totalExports": 207,
   "exports": [

package/dist/index.cjs

@@ -4007,7 +4007,6 @@ var Popover = ({
               "div",
               {
                 ...contentProps,
-                "data-os-scrollbar": contentScrollable ? true : void 0,
                 className: cn(
                   "rounded-2xl md:rounded-3xl border bg-popover text-popover-foreground shadow-md",
                   "backdrop-blur-sm bg-popover/95 border-border/60 p-4",
@@ -4227,7 +4226,6 @@ var Sheet = ({
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "div",
             {
-              "data-os-scrollbar": true,
               className: "flex-1 overflow-auto p-4",
               style: {
                 opacity: open && !isAnimating ? 1 : 0,
@@ -4691,7 +4689,7 @@ var Tabs = ({
   );
   const activeTab = tabs.find((tab) => tab.value === active);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("w-full", orientation === "vertical" && "flex gap-6"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: containerClasses, role: "tablist", "aria-orientation": orientation, "data-os-scrollbar": orientation === "horizontal" ? true : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: containerClasses, role: "tablist", "aria-orientation": orientation, children: [
       tabs.map((tab, index) => {
         const isActive = active === tab.value;
         const Icon = tab.icon;
@@ -5241,7 +5239,7 @@ var Combobox = ({
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "data-os-scrollbar": true, className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn(size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn(size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText })
         ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
@@ -5834,7 +5832,7 @@ var ScrollArea = (0, import_react14.forwardRef)(
           className
         ),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport custom-scrollbar", contentClassName), "data-os-scrollbar": true, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport custom-scrollbar", contentClassName), children })
       }
     );
   }
@@ -6297,7 +6295,6 @@ var DatePicker = ({
           sizeStyles8[size].contentPadding,
           "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
-        contentScrollable: true,
         trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "button",
           {
@@ -6653,7 +6650,6 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         size === "sm" ? "p-3" : "p-5",
         "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
       ),
-      contentScrollable: true,
       trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "button",
         {
@@ -7104,7 +7100,6 @@ function WheelColumn({
         "div",
         {
           ref: scrollRef,
-          "data-os-scrollbar": true,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
             "select-none cursor-grab active:cursor-grabbing",
@@ -8528,7 +8523,6 @@ function WheelColumn2({
         "div",
         {
           ref: scrollRef,
-          "data-os-scrollbar": true,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
             "select-none cursor-grab active:cursor-grabbing",
@@ -9476,7 +9470,6 @@ var DateTimePicker = ({
           // Keep the popover usable on small viewports
           "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto"
         ),
-        contentScrollable: true,
         placement: "bottom-end",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-border", children: [
@@ -10148,7 +10141,7 @@ function CalendarTimelineHeader(props) {
               contentClassName: cn(
                 "w-auto p-0 rounded-2xl md:rounded-3xl overflow-hidden"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { "data-os-scrollbar": true, className: "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-border", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     Calendar3,
@@ -10292,7 +10285,7 @@ function CalendarTimelineHeader(props) {
           ]
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: headerRef, "data-os-scrollbar": true, className: "flex-1 min-w-0 overflow-x-auto overflow-y-hidden", children: slotHeaderNodes })
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: headerRef, className: "flex-1 min-w-0 overflow-x-auto overflow-y-hidden", children: slotHeaderNodes })
     ] })
   ] });
 }
@@ -11883,7 +11876,6 @@ function CalendarTimeline({
             "div",
             {
               ref: leftRef,
-              "data-os-scrollbar": true,
               className: "shrink-0 overflow-y-auto overflow-x-hidden",
               style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
               children: [
@@ -11915,7 +11907,6 @@ function CalendarTimeline({
             {
               ref: bodyRef,
               className: "relative flex-1 overflow-auto custom-scrollbar",
-              "data-os-scrollbar": true,
               onPointerMove,
               onPointerUp,
               onPointerLeave: () => setHoverCell(null),
@@ -12509,7 +12500,6 @@ var MultiCombobox = ({
         id: listboxId,
         role: "listbox",
         "aria-multiselectable": "true",
-        "data-os-scrollbar": true,
         style: { maxHeight },
         className: cn("overflow-y-auto p-1.5", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"),
         children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
@@ -14135,7 +14125,6 @@ function CategoryTreeSelect(props) {
             "p-2",
             "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
           ),
-          "data-os-scrollbar": true,
           children: [
             renderSearch(),
             renderTreeContent()
@@ -15146,7 +15135,6 @@ function Carousel({
         showThumbnails && totalSlides > slidesToShow && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "div",
           {
-            "data-os-scrollbar": true,
             className: cn(
               "absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-linear-to-t from-black/50 to-transparent overflow-x-auto",
               isHorizontal ? "flex-row" : "flex-col"
@@ -16038,7 +16026,6 @@ var TimelineRoot = React43.forwardRef(
       "div",
       {
         ref,
-        "data-os-scrollbar": mode === "horizontal" ? true : void 0,
         className: cn("relative", mode === "horizontal" && "flex gap-4 overflow-x-auto", mode === "vertical" && "space-y-0", className),
         ...rest,
         children: mode === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "space-y-0", children: content }) : content
@@ -17034,7 +17021,7 @@ var MusicPlayer = ({
         }
       ) })
     ] }),
-    showPlaylist && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { "data-os-scrollbar": true, className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "p-4", children: [
+    showPlaylist && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "p-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("h3", { className: "text-lg font-semibold text-foreground mb-3", children: [
         "Playlist (",
         playlist.length,
@@ -19033,21 +19020,127 @@ var LoadingBar = ({
 // ../../components/ui/OverlayScrollbarProvider.tsx
 var import_react33 = require("react");
 var import_overlayscrollbars = require("overlayscrollbars");
-var SCROLLABLE_SELECTOR = "[data-os-scrollbar]";
-var PORTAL_EXCLUDE_SELECTOR = [
+
+// ../../components/ui/overlay-scrollbar-controller.ts
+var DEFAULT_OVERLAY_SCROLLBAR_SELECTOR = [
+  ".overflow-auto",
+  ".overflow-y-auto",
+  ".overflow-x-auto",
+  ".overflow-scroll",
+  ".overflow-y-scroll",
+  ".overflow-x-scroll",
+  "textarea",
+  "[data-os-scrollbar]"
+].join(", ");
+var DEFAULT_OVERLAY_SCROLLBAR_EXCLUDE = [
+  "html",
+  "body",
+  "[data-os-ignore]",
   "[data-radix-portal]",
   "[role='dialog']",
   "[aria-modal='true']",
   "[data-sonner-toaster]"
 ].join(", ");
-function shouldSkip(element) {
-  if (element === document.body || element === document.documentElement) return true;
+function splitSelectorList(selectorList) {
+  return selectorList.split(",").map((part) => part.trim()).filter(Boolean);
+}
+function safeMatches(element, selector) {
+  try {
+    return element.matches(selector);
+  } catch {
+    return false;
+  }
+}
+function safeClosest(element, selector) {
+  try {
+    return element.closest(selector);
+  } catch {
+    return null;
+  }
+}
+function shouldSkipElement(element, excludeSelectors, ancestorExcludeSelectors) {
+  const tagName = element.tagName?.toLowerCase?.() ?? "";
+  if (tagName === "body" || tagName === "html") return true;
   if (element.classList.contains("scrollbar-none")) return true;
-  if (element.hasAttribute("data-os-ignore")) return true;
   if (element.hasAttribute("data-overlayscrollbars")) return true;
-  if (element.closest(PORTAL_EXCLUDE_SELECTOR)) return true;
+  if (excludeSelectors.some((selector) => safeMatches(element, selector))) return true;
+  if (ancestorExcludeSelectors.some((selector) => safeClosest(element, selector))) return true;
   return false;
 }
+function createOverlayScrollbarController({
+  selector,
+  exclude,
+  options,
+  createInstance,
+  root = document.body,
+  createObserver,
+  requestAnimationFrameImpl = requestAnimationFrame,
+  cancelAnimationFrameImpl = cancelAnimationFrame
+}) {
+  const instances = /* @__PURE__ */ new Map();
+  const excludeSelectors = splitSelectorList(exclude);
+  const ancestorExcludeSelectors = excludeSelectors.filter((item) => item !== "html" && item !== "body");
+  let rafId = 0;
+  const init = (element) => {
+    if (shouldSkipElement(element, excludeSelectors, ancestorExcludeSelectors)) return;
+    if (instances.has(element)) return;
+    instances.set(element, createInstance(element, options));
+  };
+  const scan = (root2) => {
+    if (root2 instanceof HTMLElement && safeMatches(root2, selector)) {
+      init(root2);
+    }
+    if (!("querySelectorAll" in root2)) return;
+    try {
+      root2.querySelectorAll(selector).forEach(init);
+    } catch {
+    }
+  };
+  const cleanup = () => {
+    instances.forEach((instance, element) => {
+      if (!element.isConnected) {
+        instance.destroy();
+        instances.delete(element);
+      }
+    });
+  };
+  scan(root);
+  const onMutations = (mutations) => {
+    if (rafId) return;
+    rafId = requestAnimationFrameImpl(() => {
+      rafId = 0;
+      const roots = /* @__PURE__ */ new Set();
+      mutations.forEach((mutation) => {
+        if (mutation.target && (typeof mutation.target.querySelectorAll === "function" || mutation.target instanceof HTMLElement)) {
+          roots.add(mutation.target);
+        }
+        Array.from(mutation.addedNodes).forEach((node) => {
+          if (node instanceof HTMLElement) {
+            roots.add(node);
+          }
+        });
+      });
+      roots.forEach(scan);
+      cleanup();
+    });
+  };
+  const observer = createObserver ? createObserver(onMutations) : new MutationObserver(onMutations);
+  observer.observe(root, { childList: true, subtree: true, attributes: true });
+  const destroy = () => {
+    if (rafId) cancelAnimationFrameImpl(rafId);
+    observer.disconnect();
+    instances.forEach((instance) => instance.destroy());
+    instances.clear();
+  };
+  return {
+    destroy,
+    scan,
+    cleanup,
+    getInstanceCount: () => instances.size
+  };
+}
+
+// ../../components/ui/OverlayScrollbarProvider.tsx
 function OverlayScrollbarProvider({
   enabled = true,
   theme = "os-theme-underverse",
@@ -19055,7 +19148,9 @@ function OverlayScrollbarProvider({
   autoHide = "leave",
   autoHideDelay = 600,
   dragScroll = true,
-  clickScroll = false
+  clickScroll = false,
+  selector = DEFAULT_OVERLAY_SCROLLBAR_SELECTOR,
+  exclude = DEFAULT_OVERLAY_SCROLLBAR_EXCLUDE
 } = {}) {
   (0, import_react33.useEffect)(() => {
     if (typeof window === "undefined") return;
@@ -19070,56 +19165,16 @@ function OverlayScrollbarProvider({
         clickScroll
       }
     };
-    const instances = /* @__PURE__ */ new Map();
-    let rafId = 0;
-    const init = (element) => {
-      if (shouldSkip(element)) return;
-      if (instances.has(element)) return;
-      instances.set(element, (0, import_overlayscrollbars.OverlayScrollbars)(element, options));
-    };
-    const scan = (root) => {
-      if (root instanceof HTMLElement && root.matches(SCROLLABLE_SELECTOR)) {
-        init(root);
-      }
-      if (!("querySelectorAll" in root)) return;
-      root.querySelectorAll(SCROLLABLE_SELECTOR).forEach(init);
-    };
-    const cleanup = () => {
-      instances.forEach((instance, element) => {
-        if (!element.isConnected) {
-          instance.destroy();
-          instances.delete(element);
-        }
-      });
-    };
-    scan(document.body);
-    const observer = new MutationObserver((mutations) => {
-      if (rafId) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = 0;
-        const scanRoots = /* @__PURE__ */ new Set();
-        mutations.forEach((mutation) => {
-          if (mutation.target instanceof HTMLElement || mutation.target instanceof Document || mutation.target instanceof DocumentFragment) {
-            scanRoots.add(mutation.target);
-          }
-          mutation.addedNodes.forEach((node) => {
-            if (node instanceof HTMLElement) {
-              scanRoots.add(node);
-            }
-          });
-        });
-        scanRoots.forEach(scan);
-        cleanup();
-      });
+    const controller = createOverlayScrollbarController({
+      selector,
+      exclude,
+      options,
+      createInstance: (element, instanceOptions) => (0, import_overlayscrollbars.OverlayScrollbars)(element, instanceOptions)
     });
-    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
     return () => {
-      if (rafId) cancelAnimationFrame(rafId);
-      observer.disconnect();
-      instances.forEach((instance) => instance.destroy());
-      instances.clear();
+      controller.destroy();
     };
-  }, [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll]);
+  }, [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, selector, exclude]);
   return null;
 }
 var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
@@ -19141,7 +19196,6 @@ var Table = import_react34.default.forwardRef(({ className, containerClassName,
         "backdrop-blur-sm transition-all duration-300",
         containerClassName
       ),
-      "data-os-scrollbar": true,
       children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
     }
   );
@@ -20073,13 +20127,8 @@ function DataTable({
         children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "div",
           {
-            className: "custom-scrollbar w-full",
-            "data-os-scrollbar": true,
-            style: stickyHeader ? {
-              maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
-              overflowY: "auto",
-              overflowX: "auto"
-            } : { overflowX: "auto" },
+            className: cn("w-full overflow-x-auto", stickyHeader && "overflow-y-auto"),
+            style: stickyHeader ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
               Table,
               {
@@ -21672,7 +21721,7 @@ var CommandList = (0, import_react42.forwardRef)((props, ref) => {
   if (props.items.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: "No results" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { ref: listRef, "data-os-scrollbar": true, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { ref: listRef, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Basic Blocks" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "p-1", children: props.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
       "button",
@@ -22765,7 +22814,7 @@ var EmojiList = (0, import_react44.forwardRef)((props, ref) => {
   if (props.items.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-80 p-4 text-center text-sm text-muted-foreground bg-card border border-border rounded-2xl shadow-lg", children: "No emoji found" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { "data-os-scrollbar": true, className: "w-80 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "w-80 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react41.Smile, { className: "w-4 h-4 text-primary" }),
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Emoji" })
@@ -23134,7 +23183,6 @@ function buildUEditorExtensions({
     import_extension_code_block_lowlight.default.configure({
       lowlight,
       HTMLAttributes: {
-        "data-os-scrollbar": "true",
         class: "rounded-lg bg-[#1e1e1e] p-4 font-mono text-sm overflow-x-auto"
       }
     }),
@@ -23465,7 +23513,6 @@ var EmojiPicker = ({ onSelect, onClose }) => {
       "div",
       {
         ref: scrollContainerRef,
-        "data-os-scrollbar": true,
         className: "overflow-y-auto px-3 py-2 shrink",
         style: { height: "20rem" },
         children: search ? (
@@ -24165,7 +24212,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
   if (commands.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "w-72 p-4 text-center text-muted-foreground text-sm", children: t("slashCommand.noResults") });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { ref: menuRef, "data-os-scrollbar": true, className: "w-72 max-h-80 overflow-y-auto", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { ref: menuRef, className: "w-72 max-h-80 overflow-y-auto", children: [
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("slashCommand.basicBlocks") }) }),
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "p-1", children: commands.map((cmd, index) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
       "button",
@@ -24927,7 +24974,6 @@ var UEditor = import_react52.default.forwardRef(({
           import_react53.EditorContent,
           {
             editor,
-            "data-os-scrollbar": true,
             className: "flex-1 overflow-y-auto",
             style: {
               minHeight,