@gridui/overlay 1.1.2 → 1.2.2

package/README.md

@@ -1,6 +1,6 @@
 # @gridui/overlay
 
-Core family. Public API: `OverlayOpen`, `RetainedLayer`, `RetainedLayerProps`, `useOverlayState`, `overlaySurfaceStyles`, `overlayBackdropStyles`.
+Core family. Public API: `interactionLayerProps`, `useInteractionOutline`, `InteractionOutlineOptions`, `useScrollbars`, `ScrollbarsOptions`, `scrollbarInteractionRef`, `OverlayOpen`, `RetainedLayer`, `RetainedLayerProps`, `useOverlayState`, `overlaySurfaceStyles`, `overlayBackdropStyles`.
 
 Import components from `@gridui/overlay` and load `@gridui/overlay/styles.css` after Theme.
 Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
@@ -20,3 +20,62 @@ item-aligned Select. Open/closed and Tooltip's instant/delayed open states are
 supported. Families keep dimensions, stacking, positioning, portals, focus,
 and dismissal. Drawer retains its directional panel motion and uses only the
 shared backdrop. Theme continues to own motion tokens and keyframes.
+
+## Interaction outlines
+
+`useInteractionOutline({ ref, selector })` returns a composed React ref for a
+scrolling viewport. Forward the caller's optional ref and select the native
+interactive descendants owned by that viewport. Theme styles own the indicator
+paint; the hook does not require an additional stylesheet.
+The hook mirrors each active Theme outline into an aria-hidden, input-transparent
+document plane using its resolved color, width, offset, and radius.
+Spread `interactionLayerProps` on a custom popup or dialog surface to define its
+interaction boundary. Built-in menu, selection, popover, and dialog surfaces
+already do this. Viewports share one isolated plane per boundary, or the page
+plane when there is no surface. The plane follows its surface's stacking level
+and source order; descendant z-index values remain local. Nested DOM surfaces
+retain their parent interaction boundary. Focus paints above hover within the
+same plane, while newer menus and dialogs can cover the underlying outlines.
+Inert and aria-hidden background viewports suppress both native and mirrored indicators.
+Nested viewports own their own targets. It preserves native focus and selection,
+tracks scroll, resize, theme, DOM changes and surface motion, and removes
+invisible or unmounted targets. Clipping bounds limit offscreen paint while
+allowing the outline's full outward extent. The layer never receives input.
+
+## Scrollbars
+
+`useScrollbars({ ref })` returns a composed React ref for one native scrolling
+viewport. Bind each owned viewport explicitly, including independently scrolling
+dialog sections. `useInteractionOutline` remains independent; compose its ref
+with this hook when a viewport needs both behaviors. Theme owns the paint, so
+no additional stylesheet is required for this hook.
+
+The hook keeps native content scrolling and renders square, proportional thumbs
+in an aria-hidden local layer. The transparent 10px track overlays the viewport
+edge. Its 4px thumb becomes 6px on hover or drag without changing content geometry.
+Track clicks, wheel input, and captured pointer dragging update the real viewport;
+keyboard focus remains on the real content. RTL horizontal scrolling and reversed
+vertical flex layouts retain their native coordinate behavior.
+
+The layer lives inside the viewport and follows its native scrolling, clipping,
+palette, transforms, and stacking context. It remains part of hover-opened panels.
+There is no document-level scrollbar portal, ancestor z-index reconstruction,
+descendant discovery, or permanent document input listener. Resize observation
+covers every direct content element; captured load events also update asynchronous
+media. Native refs, content DOM, and focus semantics remain intact.
+
+Textarea uses a local sibling layer in its parent because it cannot render child
+elements. The adapter measures the existing containing block without changing the
+parent's positioning, adding a wrapper, or adjusting padding and margins. It
+observes the parent and its direct children, preserves control-level palette
+overrides, and mirrors the native control's inert state. Native form reset refreshes
+the indicator after the default action, including canceled resets and live form
+reassociation. Coarse pointers pan the native viewport; forced colors use square
+system-colored thumbs.
+
+`scrollbarInteractionRef` binds Theme's hover and dragging state to a scrollbar
+element without owning scroll position, sizing, or pointer capture. It is a stable
+React 19 callback ref with cleanup, also usable as an imperative binding that
+returns a disposer. Native viewports and Sidebar's Radix scrollbar share this
+binding. Ref composition uses Radix's cleanup-aware implementation. Both layout
+hooks ignore mutations inside their decorative layers and observe real content.

package/dist/index.d.ts

@@ -7,5 +7,11 @@
 export type { RetainedLayerProps } from "./retained-layer/retained-layer";
 export { OverlayOpen } from "./retained-layer/retained-layer";
 export { RetainedLayer } from "./retained-layer/retained-layer";
+export { interactionLayerProps } from "./shared/interaction-layer";
+export { scrollbarInteractionRef } from "./shared/scrollbar-interaction-ref";
 export { overlayBackdropStyles, overlaySurfaceStyles } from "./shared/style";
+export type { InteractionOutlineOptions } from "./shared/use-interaction-outline";
+export { useInteractionOutline } from "./shared/use-interaction-outline";
 export { useOverlayState } from "./shared/use-overlay-state";
+export type { ScrollbarsOptions } from "./shared/use-scrollbars";
+export { useScrollbars } from "./shared/use-scrollbars";

package/dist/index.js

@@ -14,6 +14,120 @@ var RetainedLayer = (props) => {
   );
 };
 
+// src/shared/interaction-layer.ts
+var interactionLayerProps = { "data-gridui-interaction-layer": "" };
+var selector = "[data-gridui-interaction-layer]";
+var planes = /* @__PURE__ */ new WeakMap();
+var planeElements = /* @__PURE__ */ new WeakMap();
+var interactionLayerOwner = (viewport) => {
+  return viewport.closest(selector) ?? viewport.ownerDocument.body;
+};
+var refreshOutlinePlane = (plane) => {
+  const { owner, element, parent } = plane;
+  const document = owner.ownerDocument;
+  const style = document.defaultView.getComputedStyle(owner);
+  element.style.zIndex = owner === document.body || style.zIndex === "auto" ? style.getPropertyValue("--gridui-z-interaction") || "3" : style.zIndex;
+  if (parent) {
+    refreshOutlinePlane(parent);
+    const next = Array.from(parent.element.children).find((child) => {
+      const sibling = planeElements.get(child);
+      return sibling && sibling !== plane && Boolean(owner.compareDocumentPosition(sibling.owner) & Node.DOCUMENT_POSITION_FOLLOWING);
+    });
+    parent.element.insertBefore(element, next ?? null);
+  } else if (owner === document.body) {
+    if (!element.isConnected) {
+      document.body.append(element);
+    }
+  } else {
+    let anchor = owner;
+    while (anchor.parentElement && anchor.parentElement !== document.body) {
+      anchor = anchor.parentElement;
+    }
+    let next = anchor.nextElementSibling;
+    while (next) {
+      const sibling = planeElements.get(next);
+      if (!sibling || sibling === plane || !(sibling.owner.compareDocumentPosition(owner) & Node.DOCUMENT_POSITION_FOLLOWING)) {
+        break;
+      }
+      next = next.nextElementSibling;
+    }
+    document.body.insertBefore(element, next);
+  }
+};
+var acquireOutlinePlane = (owner) => {
+  const existing = planes.get(owner);
+  if (existing) {
+    existing.references++;
+    return existing;
+  }
+  const parentOwner = owner.parentElement?.closest(selector);
+  const parent = parentOwner ? acquireOutlinePlane(parentOwner) : void 0;
+  const element = owner.ownerDocument.createElement("div");
+  element.className = "gridui-interaction-outline-layer";
+  element.setAttribute("aria-hidden", "true");
+  const plane = {
+    owner,
+    element,
+    parent,
+    references: 1
+  };
+  planes.set(owner, plane);
+  planeElements.set(element, plane);
+  refreshOutlinePlane(plane);
+  return plane;
+};
+var releaseOutlinePlane = (plane) => {
+  if (--plane.references) {
+    return;
+  }
+  plane.element.remove();
+  planes.delete(plane.owner);
+  planeElements.delete(plane.element);
+  if (plane.parent) {
+    releaseOutlinePlane(plane.parent);
+  }
+};
+
+// src/shared/scrollbar-interaction-ref.ts
+var scrollbarInteractionRef = (element) => {
+  if (!element) {
+    return;
+  }
+  const hover = (event) => {
+    const box = element.getBoundingClientRect();
+    element.toggleAttribute("data-gridui-hovered", event.clientX >= box.left && event.clientX < box.right && event.clientY >= box.top && event.clientY < box.bottom);
+  };
+  const leave = () => {
+    element.removeAttribute("data-gridui-hovered");
+  };
+  const down = (event) => {
+    if (event.button === 0) {
+      element.setAttribute("data-gridui-dragging", "");
+    }
+  };
+  const finish = () => {
+    element.removeAttribute("data-gridui-dragging");
+  };
+  element.addEventListener("pointerenter", hover);
+  element.addEventListener("pointermove", hover);
+  element.addEventListener("pointerleave", leave);
+  element.addEventListener("pointerdown", down);
+  element.addEventListener("pointerup", finish);
+  element.addEventListener("pointercancel", finish);
+  element.addEventListener("lostpointercapture", finish);
+  return () => {
+    element.removeEventListener("pointerenter", hover);
+    element.removeEventListener("pointermove", hover);
+    element.removeEventListener("pointerleave", leave);
+    element.removeEventListener("pointerdown", down);
+    element.removeEventListener("pointerup", finish);
+    element.removeEventListener("pointercancel", finish);
+    element.removeEventListener("lostpointercapture", finish);
+    leave();
+    finish();
+  };
+};
+
 // src/shared/style.ts
 import { cva } from "class-variance-authority";
 var overlaySurfaceStyles = cva("gridui-overlay-surface gridui-u-border gridui-u-border-solid gridui-u-border-border gridui-u-bg-background gridui-u-text-foreground", {
@@ -36,13 +150,252 @@ var overlayBackdropStyles = cva("gridui-overlay-backdrop", {
   defaultVariants: { pace: "normal" }
 });
 
+// src/shared/content-mutation.ts
+var decorativeSelector = ".gridui-scrollbar-layer, .gridui-interaction-outline-layer";
+var isDecorative = (node) => {
+  const element = node.nodeType === 1 ? node : node.parentElement;
+  return !!element?.closest(decorativeSelector);
+};
+var hasContentMutation = (records) => {
+  return records.some((record) => {
+    return !isDecorative(record.target) && (record.type !== "childList" || [
+      ...record.addedNodes,
+      ...record.removedNodes
+    ].some((node) => {
+      return !isDecorative(node);
+    }));
+  });
+};
+
+// src/shared/use-interaction-outline.ts
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useLayoutEffect, useState } from "react";
+var useInteractionOutline = (options) => {
+  const { ref, selector: selector2 } = options;
+  const [
+    viewport,
+    setViewport
+  ] = useState(null);
+  useLayoutEffect(() => {
+    if (!viewport) {
+      return;
+    }
+    const document = viewport.ownerDocument;
+    const window = document.defaultView;
+    let plane;
+    viewport.setAttribute("data-gridui-outline-viewport", "");
+    const rings = /* @__PURE__ */ new Map();
+    let frame = 0;
+    let disposed = false;
+    const schedule = () => {
+      if (!disposed && !frame) {
+        frame = window.requestAnimationFrame(sync);
+      }
+    };
+    const resize = new ResizeObserver(schedule);
+    const sync = () => {
+      frame = 0;
+      for (const element of rings.keys()) {
+        element.removeAttribute("data-gridui-outline-rendered");
+      }
+      const owner = interactionLayerOwner(viewport);
+      if (plane && plane.owner !== owner) {
+        const previous = plane;
+        plane = acquireOutlinePlane(owner);
+        plane.element.append(...rings.values());
+        releaseOutlinePlane(previous);
+      }
+      if (plane) {
+        refreshOutlinePlane(plane);
+      }
+      const inactive = viewport.closest('[inert], [aria-hidden="true"]');
+      viewport.toggleAttribute("data-gridui-outline-inactive", !!inactive);
+      const candidates = inactive ? [] : Array.from(viewport.querySelectorAll(selector2)).filter((element) => {
+        return element.closest("[data-gridui-outline-viewport]") === viewport && element.matches(":hover, :active, :focus-visible, [data-highlighted]");
+      });
+      const current = /* @__PURE__ */ new Set();
+      let moving = false;
+      for (const element of candidates) {
+        const box = element.getBoundingClientRect();
+        const style = window.getComputedStyle(element);
+        if (!element.getClientRects().length || style.visibility !== "visible" || style.outlineStyle === "none" || parseFloat(style.outlineWidth) <= 0) {
+          continue;
+        }
+        let left = 0;
+        let top = 0;
+        let right = document.documentElement.clientWidth;
+        let bottom = document.documentElement.clientHeight;
+        let opacity = Number(style.opacity);
+        let clipped = false;
+        for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {
+          const appearance = window.getComputedStyle(ancestor);
+          const bounds = ancestor.getBoundingClientRect();
+          opacity *= Number(appearance.opacity);
+          moving ||= ancestor.getAnimations().some((animation) => {
+            return animation.playState === "running";
+          });
+          if (appearance.overflowX !== "visible") {
+            clipped = true;
+            left = Math.max(left, bounds.left + ancestor.clientLeft);
+            right = Math.min(right, bounds.left + ancestor.clientLeft + ancestor.clientWidth);
+          }
+          if (appearance.overflowY !== "visible") {
+            clipped = true;
+            top = Math.max(top, bounds.top + ancestor.clientTop);
+            bottom = Math.min(bottom, bounds.top + ancestor.clientTop + ancestor.clientHeight);
+          }
+        }
+        if (!clipped || opacity === 0 || box.right <= left || box.left >= right || box.bottom <= top || box.top >= bottom) {
+          continue;
+        }
+        current.add(element);
+        let ring = rings.get(element);
+        if (!ring) {
+          ring = document.createElement("div");
+          ring.className = "gridui-interaction-outline";
+          plane ??= acquireOutlinePlane(owner);
+          plane.element.append(ring);
+          rings.set(element, ring);
+          resize.observe(element);
+        }
+        const extent = Math.max(0, parseFloat(style.outlineWidth) + parseFloat(style.outlineOffset));
+        Object.assign(ring.style, {
+          left: `${box.left}px`,
+          top: `${box.top}px`,
+          width: `${box.width}px`,
+          height: `${box.height}px`,
+          outline: style.outline,
+          outlineOffset: style.outlineOffset,
+          borderRadius: style.borderRadius,
+          opacity: String(opacity),
+          zIndex: element.matches(":focus-visible") ? "3" : "2",
+          clipPath: `inset(${Math.max(0, top - box.top) - extent}px ${Math.max(0, box.right - right) - extent}px ${Math.max(0, box.bottom - bottom) - extent}px ${Math.max(0, left - box.left) - extent}px)`
+        });
+        element.setAttribute("data-gridui-outline-rendered", "");
+      }
+      for (const [
+        element,
+        ring
+      ] of rings) {
+        if (!current.has(element)) {
+          element.removeAttribute("data-gridui-outline-rendered");
+          ring.remove();
+          rings.delete(element);
+          resize.unobserve(element);
+        }
+      }
+      if (!rings.size && plane) {
+        releaseOutlinePlane(plane);
+        plane = void 0;
+      }
+      if (moving) {
+        schedule();
+      }
+    };
+    const mutation = new MutationObserver((records) => {
+      if (hasContentMutation(records)) {
+        schedule();
+      }
+    });
+    mutation.observe(viewport, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: [
+        "class",
+        "style",
+        "hidden",
+        "disabled",
+        "aria-disabled",
+        "aria-readonly",
+        "readonly",
+        "data-disabled",
+        "data-readonly",
+        "data-state",
+        "data-highlighted",
+        "aria-selected"
+      ]
+    });
+    const ancestors = new MutationObserver(schedule);
+    for (let ancestor = viewport; ancestor; ancestor = ancestor.parentElement) {
+      ancestors.observe(ancestor, {
+        attributes: true,
+        attributeFilter: [
+          "class",
+          "style",
+          "hidden",
+          "dir",
+          "data-theme",
+          "data-state",
+          "data-gridui-interaction-layer",
+          "aria-hidden",
+          "inert"
+        ]
+      });
+    }
+    const events = [
+      "scroll",
+      "pointerover",
+      "pointerout",
+      "pointerdown",
+      "pointerup",
+      "pointercancel",
+      "focusin",
+      "focusout",
+      "keydown",
+      "keyup",
+      "animationstart",
+      "transitionrun"
+    ];
+    for (const event of events) {
+      document.addEventListener(event, schedule, {
+        capture: true,
+        passive: true
+      });
+    }
+    const scheme = window.matchMedia("(prefers-color-scheme: dark)");
+    scheme.addEventListener("change", schedule);
+    window.addEventListener("resize", schedule);
+    resize.observe(viewport);
+    sync();
+    return () => {
+      disposed = true;
+      window.cancelAnimationFrame(frame);
+      resize.disconnect();
+      mutation.disconnect();
+      ancestors.disconnect();
+      for (const event of events) {
+        document.removeEventListener(event, schedule, true);
+      }
+      scheme.removeEventListener("change", schedule);
+      window.removeEventListener("resize", schedule);
+      viewport.removeAttribute("data-gridui-outline-viewport");
+      viewport.removeAttribute("data-gridui-outline-inactive");
+      for (const element of rings.keys()) {
+        element.removeAttribute("data-gridui-outline-rendered");
+      }
+      for (const ring of rings.values()) {
+        ring.remove();
+      }
+      if (plane) {
+        releaseOutlinePlane(plane);
+      }
+    };
+  }, [
+    viewport,
+    selector2
+  ]);
+  return useComposedRefs(setViewport, ref);
+};
+
 // src/shared/use-overlay-state.ts
-import { useState } from "react";
+import { useState as useState2 } from "react";
 var useOverlayState = (options) => {
   const [
     localOpen,
     setLocalOpen
-  ] = useState(options.defaultOpen ?? false);
+  ] = useState2(options.defaultOpen ?? false);
   return {
     open: options.open ?? localOpen,
     onOpenChange: (open) => {
@@ -53,11 +406,345 @@ var useOverlayState = (options) => {
     }
   };
 };
+
+// src/shared/textarea-scrollbar.ts
+var isTextarea = (element) => {
+  return element.tagName === "TEXTAREA";
+};
+var syncTextareaScrollbar = (viewport, layer, style) => {
+  const window = viewport.ownerDocument.defaultView;
+  layer.style.position = style.position === "fixed" ? "fixed" : "absolute";
+  const parent = layer.offsetParent;
+  const parentBox = parent?.getBoundingClientRect();
+  const parentScaleX = parent?.offsetWidth ? parentBox.width / parent.offsetWidth : 1;
+  const parentScaleY = parent?.offsetHeight ? parentBox.height / parent.offsetHeight : 1;
+  const box = viewport.getBoundingClientRect();
+  const controlScaleX = viewport.offsetWidth ? box.width / viewport.offsetWidth : 1;
+  const controlScaleY = viewport.offsetHeight ? box.height / viewport.offsetHeight : 1;
+  const current = layer.getBoundingClientRect();
+  const left = (parseFloat(layer.style.left) || 0) + (box.left + viewport.clientLeft * controlScaleX - current.left) / parentScaleX;
+  const top = (parseFloat(layer.style.top) || 0) + (box.top + viewport.clientTop * controlScaleY - current.top) / parentScaleY;
+  Object.assign(layer.style, {
+    left: `${left}px`,
+    top: `${top}px`,
+    transform: `scale(${controlScaleX / parentScaleX}, ${controlScaleY / parentScaleY})`,
+    transformOrigin: "0 0",
+    zIndex: style.zIndex === "auto" ? "var(--gridui-z-interaction)" : style.zIndex,
+    opacity: style.opacity,
+    visibility: style.visibility,
+    colorScheme: style.colorScheme
+  });
+  layer.inert = viewport.inert;
+  const inherited = window.getComputedStyle(viewport.parentElement);
+  for (const [
+    token,
+    fallback
+  ] of [
+    [
+      "--gridui-scrollbar-thumb",
+      "--gridui-muted"
+    ],
+    [
+      "--gridui-scrollbar-thumb-active",
+      "--gridui-foreground"
+    ],
+    [
+      "--gridui-scrollbar-track",
+      "--gridui-scrollbar-track"
+    ]
+  ]) {
+    const value = style.getPropertyValue(token) || style.getPropertyValue(fallback);
+    const parentValue = inherited.getPropertyValue(token) || inherited.getPropertyValue(fallback);
+    if (value && value !== parentValue) {
+      layer.style.setProperty(token, value);
+    } else {
+      layer.style.removeProperty(token);
+    }
+  }
+};
+
+// src/shared/use-scrollbars.ts
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+import { useId, useLayoutEffect as useLayoutEffect2, useRef, useState as useState3 } from "react";
+var useScrollbars = (options = {}) => {
+  const { ref } = options;
+  const owner = useId();
+  const [
+    viewport,
+    setViewport
+  ] = useState3(null);
+  const refresh = useRef(void 0);
+  useLayoutEffect2(() => {
+    if (!viewport) {
+      return;
+    }
+    const document = viewport.ownerDocument;
+    const window = document.defaultView;
+    const textarea = isTextarea(viewport) ? viewport : null;
+    const host = textarea ? viewport.parentElement : viewport;
+    const layer = document.createElement(viewport.matches("ol, ul") ? "li" : "span");
+    layer.className = "gridui-scrollbar-layer";
+    layer.setAttribute("aria-hidden", "true");
+    host.append(layer);
+    viewport.setAttribute("data-gridui-scrollbar-owner", owner);
+    viewport.setAttribute("data-gridui-scrollbar-id", owner);
+    const bars = /* @__PURE__ */ new Map();
+    const contents = /* @__PURE__ */ new Set();
+    let frame = 0;
+    let disposed = false;
+    let rtl = false;
+    let reverse = false;
+    const schedule = () => {
+      if (!disposed && !frame) {
+        frame = window.requestAnimationFrame(sync);
+      }
+    };
+    const extent = (vertical) => {
+      return vertical ? viewport.scrollHeight - viewport.clientHeight : viewport.scrollWidth - viewport.clientWidth;
+    };
+    const position = (vertical) => {
+      const value = vertical ? viewport.scrollTop : viewport.scrollLeft;
+      return (vertical ? reverse : rtl) ? extent(vertical) + value : value;
+    };
+    const write = (vertical, value) => {
+      if (viewport.inert) {
+        return;
+      }
+      const next = Math.max(0, Math.min(extent(vertical), value));
+      const native = (vertical ? reverse : rtl) ? next - extent(vertical) : next;
+      if (vertical) {
+        viewport.scrollTop = native;
+      } else {
+        viewport.scrollLeft = native;
+      }
+      sync();
+    };
+    const create = (vertical) => {
+      const track = document.createElement("span");
+      const thumb = document.createElement("span");
+      track.className = "gridui-scrollbar";
+      thumb.className = "gridui-scrollbar-thumb";
+      track.dataset.orientation = vertical ? "vertical" : "horizontal";
+      track.setAttribute("data-gridui-scrollbar-for", owner);
+      track.append(thumb);
+      layer.append(track);
+      const unbind = scrollbarInteractionRef(track);
+      const length = () => {
+        return vertical ? track.clientHeight : track.clientWidth;
+      };
+      const thumbLength = () => {
+        return vertical ? thumb.clientHeight : thumb.clientWidth;
+      };
+      const coordinate = (event) => {
+        const box = track.getBoundingClientRect();
+        const scale = (vertical ? box.height : box.width) / length();
+        return (vertical ? event.clientY - box.top : event.clientX - box.left) / scale;
+      };
+      let drag;
+      const finish = () => {
+        drag = void 0;
+      };
+      track.addEventListener("pointerdown", (event) => {
+        if (event.button !== 0) {
+          return;
+        }
+        event.preventDefault();
+        const max = extent(vertical);
+        const offset = max ? position(vertical) / max * (length() - thumbLength()) : 0;
+        const cursor = coordinate(event);
+        drag = {
+          pointerId: event.pointerId,
+          grab: event.target === thumb ? cursor - offset : thumbLength() / 2
+        };
+        track.setPointerCapture(event.pointerId);
+        write(vertical, (cursor - drag.grab) / Math.max(1, length() - thumbLength()) * max);
+      });
+      track.addEventListener("pointermove", (event) => {
+        if (drag?.pointerId === event.pointerId) {
+          write(vertical, (coordinate(event) - drag.grab) / Math.max(1, length() - thumbLength()) * extent(vertical));
+        }
+      });
+      track.addEventListener("pointerup", finish);
+      track.addEventListener("pointercancel", finish);
+      track.addEventListener("lostpointercapture", finish);
+      track.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      });
+      track.addEventListener("wheel", (event) => {
+        if (event.ctrlKey) {
+          return;
+        }
+        const style = window.getComputedStyle(viewport);
+        let unit = 1;
+        if (event.deltaMode === 1) {
+          unit = parseFloat(style.lineHeight) || 16;
+        } else if (event.deltaMode === 2) {
+          unit = vertical ? viewport.clientHeight : viewport.clientWidth;
+        }
+        const next = Math.max(0, Math.min(extent(vertical), position(vertical) + (vertical ? event.deltaY : event.deltaX || event.deltaY) * unit));
+        if (next !== position(vertical)) {
+          event.preventDefault();
+          write(vertical, next);
+        }
+      }, { passive: false });
+      return {
+        track,
+        thumb,
+        dispose() {
+          finish();
+          unbind();
+          track.remove();
+        }
+      };
+    };
+    const sync = () => {
+      if (disposed) {
+        return;
+      }
+      window.cancelAnimationFrame(frame);
+      frame = 0;
+      const style = window.getComputedStyle(viewport);
+      rtl = style.direction === "rtl";
+      reverse = style.flexDirection === "column-reverse";
+      const visible = viewport.clientWidth > 0 && viewport.clientHeight > 0;
+      const vertical = visible && /^(auto|scroll)$/.test(style.overflowY) && extent(true) > 1;
+      const horizontal = visible && /^(auto|scroll)$/.test(style.overflowX) && extent(false) > 1;
+      if (textarea) {
+        syncTextareaScrollbar(textarea, layer, style);
+      } else {
+        layer.style.transform = `translate(${viewport.scrollLeft}px, ${viewport.scrollTop}px)`;
+      }
+      for (const axis of [
+        true,
+        false
+      ]) {
+        if (!(axis ? vertical : horizontal)) {
+          const bar2 = bars.get(axis);
+          if (bar2) {
+            bar2.dispose();
+            bars.delete(axis);
+          }
+          continue;
+        }
+        let bar = bars.get(axis);
+        if (!bar) {
+          bar = create(axis);
+          bars.set(axis, bar);
+        }
+        const size = 10;
+        const width = axis ? size : viewport.clientWidth - (vertical ? size : 0);
+        const height = axis ? viewport.clientHeight - (horizontal ? size : 0) : size;
+        const length = axis ? height : width;
+        const view = axis ? viewport.clientHeight : viewport.clientWidth;
+        const thumb = Math.min(length, Math.max(24, length * view / (extent(axis) + view)));
+        Object.assign(bar.track.style, {
+          left: `${axis ? viewport.clientWidth - size : 0}px`,
+          top: `${axis ? 0 : viewport.clientHeight - size}px`,
+          width: `${width}px`,
+          height: `${height}px`
+        });
+        Object.assign(bar.thumb.style, axis ? {
+          height: `${thumb}px`,
+          transform: `translateY(${position(axis) / extent(axis) * (length - thumb)}px)`
+        } : {
+          width: `${thumb}px`,
+          transform: `translateX(${position(axis) / extent(axis) * (length - thumb)}px)`
+        });
+      }
+    };
+    const resize = new ResizeObserver(schedule);
+    const observeContents = () => {
+      const current = new Set(Array.from(host.children).filter((element) => {
+        return !element.classList.contains("gridui-scrollbar-layer");
+      }));
+      for (const content of contents) {
+        if (!current.has(content)) {
+          resize.unobserve(content);
+          contents.delete(content);
+        }
+      }
+      for (const content of current) {
+        if (!contents.has(content)) {
+          resize.observe(content);
+          contents.add(content);
+        }
+      }
+    };
+    const mutation = new MutationObserver((records) => {
+      if (hasContentMutation(records)) {
+        observeContents();
+        schedule();
+      }
+    });
+    mutation.observe(host, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: [
+        "class",
+        "style",
+        "hidden",
+        "inert",
+        "aria-hidden",
+        "dir",
+        "data-state"
+      ]
+    });
+    viewport.addEventListener("scroll", schedule, { passive: true });
+    viewport.addEventListener("input", schedule);
+    viewport.addEventListener("load", schedule, true);
+    resize.observe(viewport);
+    const reset = (event) => {
+      if (event.target === textarea?.form) {
+        schedule();
+      }
+    };
+    if (textarea) {
+      resize.observe(host);
+      document.addEventListener("reset", reset, true);
+    }
+    observeContents();
+    refresh.current = schedule;
+    sync();
+    return () => {
+      disposed = true;
+      refresh.current = void 0;
+      window.cancelAnimationFrame(frame);
+      for (const bar of bars.values()) {
+        bar.dispose();
+      }
+      resize.disconnect();
+      mutation.disconnect();
+      viewport.removeEventListener("scroll", schedule);
+      viewport.removeEventListener("input", schedule);
+      viewport.removeEventListener("load", schedule, true);
+      viewport.removeAttribute("data-gridui-scrollbar-owner");
+      viewport.removeAttribute("data-gridui-scrollbar-id");
+      if (textarea) {
+        document.removeEventListener("reset", reset, true);
+      }
+      layer.remove();
+    };
+  }, [
+    viewport,
+    owner
+  ]);
+  useLayoutEffect2(() => {
+    refresh.current?.();
+  });
+  return useComposedRefs2(setViewport, ref);
+};
 export {
   OverlayOpen,
   RetainedLayer,
+  interactionLayerProps,
   overlayBackdropStyles,
   overlaySurfaceStyles,
-  useOverlayState
+  scrollbarInteractionRef,
+  useInteractionOutline,
+  useOverlayState,
+  useScrollbars
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/retained-layer/retained-layer.tsx", "../src/shared/style.ts", "../src/shared/use-overlay-state.ts"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Overlay\n * @namespace RetainedLayer\n * @description Retained Layer\n */\n\nimport { Activity, createContext, type FC, type ReactNode, useContext } from \"react\";\n\nexport const OverlayOpen = createContext(false);\n\nexport type RetainedLayerProps = {\n    readonly children: ReactNode;\n};\n\nexport const RetainedLayer: FC<RetainedLayerProps> = (props: RetainedLayerProps) => {\n    const { children } = props;\n    const open = useContext(OverlayOpen);\n    return (<Activity\n        mode={!open ? \"hidden\" : \"visible\"}\n    >\n        {children}\n    </Activity>);\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Style\n */\n\nimport { cva } from \"class-variance-authority\";\n\nexport const overlaySurfaceStyles = cva(\"gridui-overlay-surface gridui-u-border gridui-u-border-solid gridui-u-border-border gridui-u-bg-background gridui-u-text-foreground\", {\n    variants: {\n        kind: {\n            popup: \"gridui-overlay-floating gridui-u-rounded-control\",\n            tooltip: \"gridui-overlay-tooltip gridui-u-rounded-control\",\n            dialog: \"gridui-overlay-dialog\",\n        },\n    },\n    defaultVariants: { kind: \"popup\" },\n});\n\nexport const overlayBackdropStyles = cva(\"gridui-overlay-backdrop\", {\n    variants: {\n        pace: {\n            normal: null,\n            deliberate: \"gridui-overlay-backdrop-deliberate\",\n        },\n    },\n    defaultVariants: { pace: \"normal\" },\n});\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Use Overlay State\n */\n\nimport { useState } from \"react\";\n\ntype OverlayStateOptions = {\n    readonly open?: boolean | undefined;\n    readonly defaultOpen?: boolean | undefined;\n    readonly onOpenChange?: ((open: boolean) => void) | undefined;\n};\n\nexport const useOverlayState = (options: OverlayStateOptions) => {\n    const [\n        localOpen,\n        setLocalOpen,\n    ] = useState(options.defaultOpen ?? false);\n    return {\n        open: options.open ?? localOpen,\n        onOpenChange: (open: boolean): void => {\n            if (options.open === undefined) {\n                setLocalOpen(open);\n            }\n            options.onOpenChange?.(open);\n        },\n    };\n};\n"],
-  "mappings": ";AAOA,SAAS,UAAU,eAAwC,kBAAkB;AAWjE;AATL,IAAM,cAAc,cAAc,KAAK;AAMvC,IAAM,gBAAwC,CAAC,UAA8B;AAChF,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,OAAO,WAAW,WAAW;AACnC,SAAQ;AAAA,IAAC;AAAA;AAAA,MACL,MAAM,CAAC,OAAO,WAAW;AAAA,MAExB;AAAA;AAAA,EACL;AACJ;;;AChBA,SAAS,WAAW;AAEb,IAAM,uBAAuB,IAAI,uIAAuI;AAAA,EAC3K,UAAU;AAAA,IACN,MAAM;AAAA,MACF,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACZ;AAAA,EACJ;AAAA,EACA,iBAAiB,EAAE,MAAM,QAAQ;AACrC,CAAC;AAEM,IAAM,wBAAwB,IAAI,2BAA2B;AAAA,EAChE,UAAU;AAAA,IACN,MAAM;AAAA,MACF,QAAQ;AAAA,MACR,YAAY;AAAA,IAChB;AAAA,EACJ;AAAA,EACA,iBAAiB,EAAE,MAAM,SAAS;AACtC,CAAC;;;ACrBD,SAAS,gBAAgB;AAQlB,IAAM,kBAAkB,CAAC,YAAiC;AAC7D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,EACJ,IAAI,SAAS,QAAQ,eAAe,KAAK;AACzC,SAAO;AAAA,IACH,MAAM,QAAQ,QAAQ;AAAA,IACtB,cAAc,CAAC,SAAwB;AACnC,UAAI,QAAQ,SAAS,QAAW;AAC5B,qBAAa,IAAI;AAAA,MACrB;AACA,cAAQ,eAAe,IAAI;AAAA,IAC/B;AAAA,EACJ;AACJ;",
-  "names": []
+  "sources": ["../src/retained-layer/retained-layer.tsx", "../src/shared/interaction-layer.ts", "../src/shared/scrollbar-interaction-ref.ts", "../src/shared/style.ts", "../src/shared/content-mutation.ts", "../src/shared/use-interaction-outline.ts", "../src/shared/use-overlay-state.ts", "../src/shared/textarea-scrollbar.ts", "../src/shared/use-scrollbars.ts"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Overlay\n * @namespace RetainedLayer\n * @description Retained Layer\n */\n\nimport { Activity, createContext, type FC, type ReactNode, useContext } from \"react\";\n\nexport const OverlayOpen = createContext(false);\n\nexport type RetainedLayerProps = {\n    readonly children: ReactNode;\n};\n\nexport const RetainedLayer: FC<RetainedLayerProps> = (props: RetainedLayerProps) => {\n    const { children } = props;\n    const open = useContext(OverlayOpen);\n    return (<Activity\n        mode={!open ? \"hidden\" : \"visible\"}\n    >\n        {children}\n    </Activity>);\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Interaction Layer\n */\n\n/** Marks a popup or dialog surface as an independent interaction paint boundary. */\nexport const interactionLayerProps = { \"data-gridui-interaction-layer\": \"\" } as const;\n\nconst selector = \"[data-gridui-interaction-layer]\";\nconst planes = new WeakMap<HTMLElement, OutlinePlane>();\nconst planeElements = new WeakMap<Element, OutlinePlane>();\n\ntype OutlinePlane = {\n    readonly owner: HTMLElement;\n    readonly element: HTMLDivElement;\n    readonly parent: OutlinePlane | undefined;\n    references: number;\n};\n\nexport const interactionLayerOwner = (viewport: HTMLElement): HTMLElement => {\n    return viewport.closest<HTMLElement>(selector) ?? viewport.ownerDocument.body;\n};\n\nexport const refreshOutlinePlane = (plane: OutlinePlane): void => {\n    const { owner, element, parent } = plane;\n    const document = owner.ownerDocument;\n    const style = document.defaultView!.getComputedStyle(owner);\n    element.style.zIndex = owner === document.body || style.zIndex === \"auto\"\n        ? style.getPropertyValue(\"--gridui-z-interaction\") || \"3\"\n        : style.zIndex;\n    if (parent) {\n        refreshOutlinePlane(parent);\n        const next = Array.from(parent.element.children).find(child => {\n            const sibling = planeElements.get(child);\n            return sibling && sibling !== plane && Boolean(owner.compareDocumentPosition(sibling.owner) & Node.DOCUMENT_POSITION_FOLLOWING);\n        });\n        parent.element.insertBefore(element, next ?? null);\n    } else if (owner === document.body) {\n        if (!element.isConnected) {\n            document.body.append(element);\n        }\n    } else {\n        // Follow the source surface in paint order, including multiple surfaces in one portal container.\n        let anchor = owner;\n        while (anchor.parentElement && anchor.parentElement !== document.body) {\n            anchor = anchor.parentElement;\n        }\n        let next = anchor.nextElementSibling;\n        while (next) {\n            const sibling = planeElements.get(next);\n            if (!sibling || sibling === plane || !(sibling.owner.compareDocumentPosition(owner) & Node.DOCUMENT_POSITION_FOLLOWING)) {\n                break;\n            }\n            next = next.nextElementSibling;\n        }\n        document.body.insertBefore(element, next);\n    }\n};\n\nexport const acquireOutlinePlane = (owner: HTMLElement): OutlinePlane => {\n    const existing = planes.get(owner);\n    if (existing) {\n        existing.references++;\n        return existing;\n    }\n    const parentOwner = owner.parentElement?.closest<HTMLElement>(selector);\n    const parent = parentOwner ? acquireOutlinePlane(parentOwner) : undefined;\n    const element = owner.ownerDocument.createElement(\"div\");\n    element.className = \"gridui-interaction-outline-layer\";\n    element.setAttribute(\"aria-hidden\", \"true\");\n    const plane: OutlinePlane = {\n        owner,\n        element,\n        parent,\n        references: 1,\n    };\n    planes.set(owner, plane);\n    planeElements.set(element, plane);\n    refreshOutlinePlane(plane);\n    return plane;\n};\n\nexport const releaseOutlinePlane = (plane: OutlinePlane): void => {\n    if (--plane.references) {\n        return;\n    }\n    plane.element.remove();\n    planes.delete(plane.owner);\n    planeElements.delete(plane.element);\n    if (plane.parent) {\n        releaseOutlinePlane(plane.parent);\n    }\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Scrollbar Interaction Ref\n */\n\n/** Share pointer paint with native scrollbars and Radix without owning scrolling. */\nexport const scrollbarInteractionRef = (element: HTMLElement | null): (() => void) | undefined => {\n    if (!element) {\n        return;\n    }\n    const hover = (event: PointerEvent) => {\n        const box = element.getBoundingClientRect();\n        element.toggleAttribute(\"data-gridui-hovered\", event.clientX >= box.left && event.clientX < box.right\n            && event.clientY >= box.top && event.clientY < box.bottom);\n    };\n    const leave = () => {\n        element.removeAttribute(\"data-gridui-hovered\");\n    };\n    const down = (event: PointerEvent) => {\n        if (event.button === 0) {\n            element.setAttribute(\"data-gridui-dragging\", \"\");\n        }\n    };\n    const finish = () => {\n        element.removeAttribute(\"data-gridui-dragging\");\n    };\n    element.addEventListener(\"pointerenter\", hover);\n    element.addEventListener(\"pointermove\", hover);\n    element.addEventListener(\"pointerleave\", leave);\n    element.addEventListener(\"pointerdown\", down);\n    element.addEventListener(\"pointerup\", finish);\n    element.addEventListener(\"pointercancel\", finish);\n    element.addEventListener(\"lostpointercapture\", finish);\n    return () => {\n        element.removeEventListener(\"pointerenter\", hover);\n        element.removeEventListener(\"pointermove\", hover);\n        element.removeEventListener(\"pointerleave\", leave);\n        element.removeEventListener(\"pointerdown\", down);\n        element.removeEventListener(\"pointerup\", finish);\n        element.removeEventListener(\"pointercancel\", finish);\n        element.removeEventListener(\"lostpointercapture\", finish);\n        leave();\n        finish();\n    };\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Style\n */\n\nimport { cva } from \"class-variance-authority\";\n\nexport const overlaySurfaceStyles = cva(\"gridui-overlay-surface gridui-u-border gridui-u-border-solid gridui-u-border-border gridui-u-bg-background gridui-u-text-foreground\", {\n    variants: {\n        kind: {\n            popup: \"gridui-overlay-floating gridui-u-rounded-control\",\n            tooltip: \"gridui-overlay-tooltip gridui-u-rounded-control\",\n            dialog: \"gridui-overlay-dialog\",\n        },\n    },\n    defaultVariants: { kind: \"popup\" },\n});\n\nexport const overlayBackdropStyles = cva(\"gridui-overlay-backdrop\", {\n    variants: {\n        pace: {\n            normal: null,\n            deliberate: \"gridui-overlay-backdrop-deliberate\",\n        },\n    },\n    defaultVariants: { pace: \"normal\" },\n});\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Content Mutation\n */\n\nconst decorativeSelector = \".gridui-scrollbar-layer, .gridui-interaction-outline-layer\";\n\nconst isDecorative = (node: Node): boolean => {\n    const element = node.nodeType === 1 ? node as Element : node.parentElement;\n    return !!element?.closest(decorativeSelector);\n};\n\n/** Ignore owned indicator paint while retaining mutations of the real content. */\nexport const hasContentMutation = (records: readonly MutationRecord[]): boolean => {\n    return records.some(record => {\n        return !isDecorative(record.target) && (record.type !== \"childList\"\n            || [\n                ...record.addedNodes,\n                ...record.removedNodes,\n            ].some(node => {\n                return !isDecorative(node);\n            }));\n    });\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Use Interaction Outline\n */\n\nimport { hasContentMutation } from \"./content-mutation\";\nimport { acquireOutlinePlane, interactionLayerOwner, refreshOutlinePlane, releaseOutlinePlane } from \"./interaction-layer\";\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { type Ref, type RefCallback, useLayoutEffect, useState } from \"react\";\n\nexport type InteractionOutlineOptions<T extends HTMLElement> = {\n    readonly ref?: Ref<T> | undefined;\n    readonly selector: string;\n};\n\n/** Mirror Theme's resolved outline outside a scrolling viewport's clipping ancestors. */\nexport const useInteractionOutline = <T extends HTMLElement>(options: InteractionOutlineOptions<T>): RefCallback<T> => {\n    const { ref, selector } = options;\n    const [\n        viewport,\n        setViewport,\n    ] = useState<T | null>(null);\n    useLayoutEffect(() => {\n        if (!viewport) {\n            return;\n        }\n        const document = viewport.ownerDocument;\n        const window = document.defaultView!;\n        let plane: ReturnType<typeof acquireOutlinePlane> | undefined;\n        viewport.setAttribute(\"data-gridui-outline-viewport\", \"\");\n        const rings = new Map<HTMLElement, HTMLDivElement>();\n        let frame = 0;\n        let disposed = false;\n        const schedule = () => {\n            if (!disposed && !frame) {\n                frame = window.requestAnimationFrame(sync);\n            }\n        };\n        const resize = new ResizeObserver(schedule);\n        const sync = () => {\n            frame = 0;\n            for (const element of rings.keys()) {\n                element.removeAttribute(\"data-gridui-outline-rendered\");\n            }\n            const owner = interactionLayerOwner(viewport);\n            if (plane && plane.owner !== owner) {\n                const previous = plane;\n                plane = acquireOutlinePlane(owner);\n                plane.element.append(...rings.values());\n                releaseOutlinePlane(previous);\n            }\n            if (plane) {\n                refreshOutlinePlane(plane);\n            }\n            const inactive = viewport.closest('[inert], [aria-hidden=\"true\"]');\n            viewport.toggleAttribute(\"data-gridui-outline-inactive\", !!inactive);\n            const candidates = inactive ? [] : Array.from(viewport.querySelectorAll<HTMLElement>(selector)).filter(element => {\n                return element.closest(\"[data-gridui-outline-viewport]\") === viewport\n                    && element.matches(\":hover, :active, :focus-visible, [data-highlighted]\");\n            });\n            const current = new Set<HTMLElement>();\n            let moving = false;\n            for (const element of candidates) {\n                const box = element.getBoundingClientRect();\n                const style = window.getComputedStyle(element);\n                if (!element.getClientRects().length || style.visibility !== \"visible\"\n                    || style.outlineStyle === \"none\" || parseFloat(style.outlineWidth) <= 0) {\n                    continue;\n                }\n                let left = 0;\n                let top = 0;\n                let right = document.documentElement.clientWidth;\n                let bottom = document.documentElement.clientHeight;\n                let opacity = Number(style.opacity);\n                let clipped = false;\n                for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {\n                    const appearance = window.getComputedStyle(ancestor);\n                    const bounds = ancestor.getBoundingClientRect();\n                    opacity *= Number(appearance.opacity);\n                    moving ||= ancestor.getAnimations().some(animation => {\n                        return animation.playState === \"running\";\n                    });\n                    if (appearance.overflowX !== \"visible\") {\n                        clipped = true;\n                        left = Math.max(left, bounds.left + ancestor.clientLeft);\n                        right = Math.min(right, bounds.left + ancestor.clientLeft + ancestor.clientWidth);\n                    }\n                    if (appearance.overflowY !== \"visible\") {\n                        clipped = true;\n                        top = Math.max(top, bounds.top + ancestor.clientTop);\n                        bottom = Math.min(bottom, bounds.top + ancestor.clientTop + ancestor.clientHeight);\n                    }\n                }\n                if (!clipped || opacity === 0 || box.right <= left || box.left >= right || box.bottom <= top || box.top >= bottom) {\n                    continue;\n                }\n                current.add(element);\n                let ring = rings.get(element);\n                if (!ring) {\n                    ring = document.createElement(\"div\");\n                    ring.className = \"gridui-interaction-outline\";\n                    plane ??= acquireOutlinePlane(owner);\n                    plane.element.append(ring);\n                    rings.set(element, ring);\n                    resize.observe(element);\n                }\n                const extent = Math.max(0, parseFloat(style.outlineWidth) + parseFloat(style.outlineOffset));\n                Object.assign(ring.style, {\n                    left: `${box.left}px`,\n                    top: `${box.top}px`,\n                    width: `${box.width}px`,\n                    height: `${box.height}px`,\n                    outline: style.outline,\n                    outlineOffset: style.outlineOffset,\n                    borderRadius: style.borderRadius,\n                    opacity: String(opacity),\n                    zIndex: element.matches(\":focus-visible\") ? \"3\" : \"2\",\n                    clipPath: `inset(${Math.max(0, top - box.top) - extent}px ${Math.max(0, box.right - right) - extent}px ${Math.max(0, box.bottom - bottom) - extent}px ${Math.max(0, left - box.left) - extent}px)`,\n                });\n                element.setAttribute(\"data-gridui-outline-rendered\", \"\");\n            }\n            for (const [\n                element,\n                ring,\n            ] of rings) {\n                if (!current.has(element)) {\n                    element.removeAttribute(\"data-gridui-outline-rendered\");\n                    ring.remove();\n                    rings.delete(element);\n                    resize.unobserve(element);\n                }\n            }\n            if (!rings.size && plane) {\n                releaseOutlinePlane(plane);\n                plane = undefined;\n            }\n            if (moving) {\n                schedule();\n            }\n        };\n        const mutation = new MutationObserver(records => {\n            if (hasContentMutation(records)) {\n                schedule();\n            }\n        });\n        mutation.observe(viewport, {\n            subtree: true,\n            childList: true,\n            characterData: true,\n            attributes: true,\n            attributeFilter: [\n                \"class\",\n                \"style\",\n                \"hidden\",\n                \"disabled\",\n                \"aria-disabled\",\n                \"aria-readonly\",\n                \"readonly\",\n                \"data-disabled\",\n                \"data-readonly\",\n                \"data-state\",\n                \"data-highlighted\",\n                \"aria-selected\",\n            ],\n        });\n        const ancestors = new MutationObserver(schedule);\n        for (let ancestor: HTMLElement | null = viewport; ancestor; ancestor = ancestor.parentElement) {\n            ancestors.observe(ancestor, {\n                attributes: true,\n                attributeFilter: [\n                    \"class\",\n                    \"style\",\n                    \"hidden\",\n                    \"dir\",\n                    \"data-theme\",\n                    \"data-state\",\n                    \"data-gridui-interaction-layer\",\n                    \"aria-hidden\",\n                    \"inert\",\n                ],\n            });\n        }\n        const events = [\n            \"scroll\",\n            \"pointerover\",\n            \"pointerout\",\n            \"pointerdown\",\n            \"pointerup\",\n            \"pointercancel\",\n            \"focusin\",\n            \"focusout\",\n            \"keydown\",\n            \"keyup\",\n            \"animationstart\",\n            \"transitionrun\",\n        ];\n        for (const event of events) {\n            document.addEventListener(event, schedule, {\n                capture: true,\n                passive: true,\n            });\n        }\n        const scheme = window.matchMedia(\"(prefers-color-scheme: dark)\");\n        scheme.addEventListener(\"change\", schedule);\n        window.addEventListener(\"resize\", schedule);\n        resize.observe(viewport);\n        sync();\n        return () => {\n            disposed = true;\n            window.cancelAnimationFrame(frame);\n            resize.disconnect();\n            mutation.disconnect();\n            ancestors.disconnect();\n            for (const event of events) {\n                document.removeEventListener(event, schedule, true);\n            }\n            scheme.removeEventListener(\"change\", schedule);\n            window.removeEventListener(\"resize\", schedule);\n            viewport.removeAttribute(\"data-gridui-outline-viewport\");\n            viewport.removeAttribute(\"data-gridui-outline-inactive\");\n            for (const element of rings.keys()) {\n                element.removeAttribute(\"data-gridui-outline-rendered\");\n            }\n            for (const ring of rings.values()) {\n                ring.remove();\n            }\n            if (plane) {\n                releaseOutlinePlane(plane);\n            }\n        };\n    }, [\n        viewport,\n        selector,\n    ]);\n    return useComposedRefs(setViewport, ref);\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Use Overlay State\n */\n\nimport { useState } from \"react\";\n\ntype OverlayStateOptions = {\n    readonly open?: boolean | undefined;\n    readonly defaultOpen?: boolean | undefined;\n    readonly onOpenChange?: ((open: boolean) => void) | undefined;\n};\n\nexport const useOverlayState = (options: OverlayStateOptions) => {\n    const [\n        localOpen,\n        setLocalOpen,\n    ] = useState(options.defaultOpen ?? false);\n    return {\n        open: options.open ?? localOpen,\n        onOpenChange: (open: boolean): void => {\n            if (options.open === undefined) {\n                setLocalOpen(open);\n            }\n            options.onOpenChange?.(open);\n        },\n    };\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Textarea Scrollbar\n */\n\nexport const isTextarea = (element: HTMLElement): element is HTMLTextAreaElement => {\n    return element.tagName === \"TEXTAREA\";\n};\n\n/** Position a sibling indicator in its actual containing block without changing it. */\nexport const syncTextareaScrollbar = (viewport: HTMLTextAreaElement, layer: HTMLElement, style: CSSStyleDeclaration): void => {\n    const window = viewport.ownerDocument.defaultView!;\n    layer.style.position = style.position === \"fixed\" ? \"fixed\" : \"absolute\";\n    const parent = layer.offsetParent as HTMLElement | null;\n    const parentBox = parent?.getBoundingClientRect();\n    const parentScaleX = parent?.offsetWidth ? parentBox!.width / parent.offsetWidth : 1;\n    const parentScaleY = parent?.offsetHeight ? parentBox!.height / parent.offsetHeight : 1;\n    const box = viewport.getBoundingClientRect();\n    const controlScaleX = viewport.offsetWidth ? box.width / viewport.offsetWidth : 1;\n    const controlScaleY = viewport.offsetHeight ? box.height / viewport.offsetHeight : 1;\n    const current = layer.getBoundingClientRect();\n    const left = (parseFloat(layer.style.left) || 0)\n        + (box.left + viewport.clientLeft * controlScaleX - current.left) / parentScaleX;\n    const top = (parseFloat(layer.style.top) || 0)\n        + (box.top + viewport.clientTop * controlScaleY - current.top) / parentScaleY;\n    Object.assign(layer.style, {\n        left: `${left}px`,\n        top: `${top}px`,\n        transform: `scale(${controlScaleX / parentScaleX}, ${controlScaleY / parentScaleY})`,\n        transformOrigin: \"0 0\",\n        zIndex: style.zIndex === \"auto\" ? \"var(--gridui-z-interaction)\" : style.zIndex,\n        opacity: style.opacity,\n        visibility: style.visibility,\n        colorScheme: style.colorScheme,\n    });\n    layer.inert = viewport.inert;\n    const inherited = window.getComputedStyle(viewport.parentElement!);\n    for (const [\n        token,\n        fallback,\n    ] of [\n            [\n                \"--gridui-scrollbar-thumb\",\n                \"--gridui-muted\",\n            ],\n            [\n                \"--gridui-scrollbar-thumb-active\",\n                \"--gridui-foreground\",\n            ],\n            [\n                \"--gridui-scrollbar-track\",\n                \"--gridui-scrollbar-track\",\n            ],\n        ] as const) {\n        const value = style.getPropertyValue(token) || style.getPropertyValue(fallback);\n        const parentValue = inherited.getPropertyValue(token) || inherited.getPropertyValue(fallback);\n        if (value && value !== parentValue) {\n            layer.style.setProperty(token, value);\n        } else {\n            layer.style.removeProperty(token);\n        }\n    }\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Use Scrollbars\n */\n\nimport { hasContentMutation } from \"./content-mutation\";\nimport { scrollbarInteractionRef } from \"./scrollbar-interaction-ref\";\nimport { isTextarea, syncTextareaScrollbar } from \"./textarea-scrollbar\";\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { type Ref, type RefCallback, useId, useLayoutEffect, useRef, useState } from \"react\";\n\nexport type ScrollbarsOptions<T extends HTMLElement> = {\n    readonly ref?: Ref<T> | undefined;\n};\n\ntype Scrollbar = {\n    readonly track: HTMLElement;\n    readonly thumb: HTMLElement;\n    readonly dispose: () => void;\n};\n\n/** Attach square scrollbars to one native viewport, within its local DOM owner. */\nexport const useScrollbars = <T extends HTMLElement>(options: ScrollbarsOptions<T> = {}): RefCallback<T> => {\n    const { ref } = options;\n    const owner = useId();\n    const [\n        viewport,\n        setViewport,\n    ] = useState<T | null>(null);\n    const refresh = useRef<(() => void) | undefined>(undefined);\n    useLayoutEffect(() => {\n        if (!viewport) {\n            return;\n        }\n        const document = viewport.ownerDocument;\n        const window = document.defaultView!;\n        // Textarea cannot render descendants. Its indicator is a local sibling.\n        const textarea = isTextarea(viewport) ? viewport : null;\n        const host = textarea ? viewport.parentElement! : viewport;\n        const layer = document.createElement(viewport.matches(\"ol, ul\") ? \"li\" : \"span\");\n        layer.className = \"gridui-scrollbar-layer\";\n        layer.setAttribute(\"aria-hidden\", \"true\");\n        host.append(layer);\n        viewport.setAttribute(\"data-gridui-scrollbar-owner\", owner);\n        viewport.setAttribute(\"data-gridui-scrollbar-id\", owner);\n        const bars = new Map<boolean, Scrollbar>();\n        const contents = new Set<Element>();\n        let frame = 0;\n        let disposed = false;\n        let rtl = false;\n        let reverse = false;\n        const schedule = () => {\n            if (!disposed && !frame) {\n                frame = window.requestAnimationFrame(sync);\n            }\n        };\n        const extent = (vertical: boolean): number => {\n            return vertical ? viewport.scrollHeight - viewport.clientHeight : viewport.scrollWidth - viewport.clientWidth;\n        };\n        const position = (vertical: boolean): number => {\n            const value = vertical ? viewport.scrollTop : viewport.scrollLeft;\n            return (vertical ? reverse : rtl) ? extent(vertical) + value : value;\n        };\n        const write = (vertical: boolean, value: number) => {\n            if (viewport.inert) {\n                return;\n            }\n            const next = Math.max(0, Math.min(extent(vertical), value));\n            const native = (vertical ? reverse : rtl) ? next - extent(vertical) : next;\n            if (vertical) {\n                viewport.scrollTop = native;\n            } else {\n                viewport.scrollLeft = native;\n            }\n            sync();\n        };\n        const create = (vertical: boolean): Scrollbar => {\n            const track = document.createElement(\"span\");\n            const thumb = document.createElement(\"span\");\n            track.className = \"gridui-scrollbar\";\n            thumb.className = \"gridui-scrollbar-thumb\";\n            track.dataset.orientation = vertical ? \"vertical\" : \"horizontal\";\n            track.setAttribute(\"data-gridui-scrollbar-for\", owner);\n            track.append(thumb);\n            layer.append(track);\n            const unbind = scrollbarInteractionRef(track)!;\n            const length = () => {\n                return vertical ? track.clientHeight : track.clientWidth;\n            };\n            const thumbLength = () => {\n                return vertical ? thumb.clientHeight : thumb.clientWidth;\n            };\n            const coordinate = (event: PointerEvent) => {\n                const box = track.getBoundingClientRect();\n                const scale = (vertical ? box.height : box.width) / length();\n                return (vertical ? event.clientY - box.top : event.clientX - box.left) / scale;\n            };\n            let drag: {\n                readonly pointerId: number;\n                readonly grab: number;\n            } | undefined;\n            const finish = () => {\n                drag = undefined;\n            };\n            track.addEventListener(\"pointerdown\", event => {\n                if (event.button !== 0) {\n                    return;\n                }\n                event.preventDefault();\n                const max = extent(vertical);\n                const offset = max ? position(vertical) / max * (length() - thumbLength()) : 0;\n                const cursor = coordinate(event);\n                drag = {\n                    pointerId: event.pointerId,\n                    grab: event.target === thumb ? cursor - offset : thumbLength() / 2,\n                };\n                track.setPointerCapture(event.pointerId);\n                write(vertical, (cursor - drag.grab) / Math.max(1, length() - thumbLength()) * max);\n            });\n            track.addEventListener(\"pointermove\", event => {\n                if (drag?.pointerId === event.pointerId) {\n                    write(vertical, (coordinate(event) - drag.grab) / Math.max(1, length() - thumbLength()) * extent(vertical));\n                }\n            });\n            track.addEventListener(\"pointerup\", finish);\n            track.addEventListener(\"pointercancel\", finish);\n            track.addEventListener(\"lostpointercapture\", finish);\n            track.addEventListener(\"click\", event => {\n                event.preventDefault();\n                event.stopPropagation();\n            });\n            track.addEventListener(\"wheel\", event => {\n                if (event.ctrlKey) {\n                    return;\n                }\n                const style = window.getComputedStyle(viewport);\n                let unit = 1;\n                if (event.deltaMode === 1) {\n                    unit = parseFloat(style.lineHeight) || 16;\n                } else if (event.deltaMode === 2) {\n                    unit = vertical ? viewport.clientHeight : viewport.clientWidth;\n                }\n                const next = Math.max(0, Math.min(extent(vertical), position(vertical) + (vertical ? event.deltaY : event.deltaX || event.deltaY) * unit));\n                if (next !== position(vertical)) {\n                    event.preventDefault();\n                    write(vertical, next);\n                }\n            }, { passive: false });\n            return {\n                track,\n                thumb,\n                dispose() {\n                    finish();\n                    unbind();\n                    track.remove();\n                },\n            };\n        };\n        const sync = () => {\n            if (disposed) {\n                return;\n            }\n            window.cancelAnimationFrame(frame);\n            frame = 0;\n            const style = window.getComputedStyle(viewport);\n            rtl = style.direction === \"rtl\";\n            reverse = style.flexDirection === \"column-reverse\";\n            const visible = viewport.clientWidth > 0 && viewport.clientHeight > 0;\n            const vertical = visible && /^(auto|scroll)$/.test(style.overflowY) && extent(true) > 1;\n            const horizontal = visible && /^(auto|scroll)$/.test(style.overflowX) && extent(false) > 1;\n            if (textarea) {\n                syncTextareaScrollbar(textarea, layer, style);\n            } else {\n                // Compensate native content scrolling inside the viewport's own clip and layer.\n                layer.style.transform = `translate(${viewport.scrollLeft}px, ${viewport.scrollTop}px)`;\n            }\n            for (const axis of [\n                true,\n                false,\n            ]) {\n                if (!(axis ? vertical : horizontal)) {\n                    const bar = bars.get(axis);\n                    if (bar) {\n                        bar.dispose();\n                        bars.delete(axis);\n                    }\n                    continue;\n                }\n                let bar = bars.get(axis);\n                if (!bar) {\n                    bar = create(axis);\n                    bars.set(axis, bar);\n                }\n                const size = 10;\n                const width = axis ? size : viewport.clientWidth - (vertical ? size : 0);\n                const height = axis ? viewport.clientHeight - (horizontal ? size : 0) : size;\n                const length = axis ? height : width;\n                const view = axis ? viewport.clientHeight : viewport.clientWidth;\n                const thumb = Math.min(length, Math.max(24, length * view / (extent(axis) + view)));\n                Object.assign(bar.track.style, {\n                    left: `${axis ? viewport.clientWidth - size : 0}px`,\n                    top: `${axis ? 0 : viewport.clientHeight - size}px`,\n                    width: `${width}px`,\n                    height: `${height}px`,\n                });\n                Object.assign(bar.thumb.style, axis\n                    ? {\n                        height: `${thumb}px`,\n                        transform: `translateY(${position(axis) / extent(axis) * (length - thumb)}px)`,\n                    }\n                    : {\n                        width: `${thumb}px`,\n                        transform: `translateX(${position(axis) / extent(axis) * (length - thumb)}px)`,\n                    });\n            }\n        };\n        const resize = new ResizeObserver(schedule);\n        const observeContents = () => {\n            const current = new Set(Array.from(host.children).filter(element => {\n                return !element.classList.contains(\"gridui-scrollbar-layer\");\n            }));\n            for (const content of contents) {\n                if (!current.has(content)) {\n                    resize.unobserve(content);\n                    contents.delete(content);\n                }\n            }\n            for (const content of current) {\n                if (!contents.has(content)) {\n                    resize.observe(content);\n                    contents.add(content);\n                }\n            }\n        };\n        const mutation = new MutationObserver(records => {\n            if (hasContentMutation(records)) {\n                observeContents();\n                schedule();\n            }\n        });\n        mutation.observe(host, {\n            subtree: true,\n            childList: true,\n            characterData: true,\n            attributes: true,\n            attributeFilter: [\n                \"class\",\n                \"style\",\n                \"hidden\",\n                \"inert\",\n                \"aria-hidden\",\n                \"dir\",\n                \"data-state\",\n            ],\n        });\n        viewport.addEventListener(\"scroll\", schedule, { passive: true });\n        viewport.addEventListener(\"input\", schedule);\n        viewport.addEventListener(\"load\", schedule, true);\n        resize.observe(viewport);\n        const reset = (event: Event) => {\n            if (event.target === textarea?.form) {\n                schedule();\n            }\n        };\n        if (textarea) {\n            resize.observe(host);\n            document.addEventListener(\"reset\", reset, true);\n        }\n        observeContents();\n        refresh.current = schedule;\n        sync();\n        return () => {\n            disposed = true;\n            refresh.current = undefined;\n            window.cancelAnimationFrame(frame);\n            for (const bar of bars.values()) { bar.dispose(); }\n            resize.disconnect();\n            mutation.disconnect();\n            viewport.removeEventListener(\"scroll\", schedule);\n            viewport.removeEventListener(\"input\", schedule);\n            viewport.removeEventListener(\"load\", schedule, true);\n            viewport.removeAttribute(\"data-gridui-scrollbar-owner\");\n            viewport.removeAttribute(\"data-gridui-scrollbar-id\");\n            if (textarea) {\n                document.removeEventListener(\"reset\", reset, true);\n            }\n            layer.remove();\n        };\n    }, [\n        viewport,\n        owner,\n    ]);\n    useLayoutEffect(() => {\n        refresh.current?.();\n    });\n    return useComposedRefs(setViewport, ref);\n};\n"],
+  "mappings": "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",
+  "names": ["selector", "useState", "useComposedRefs", "useLayoutEffect", "useState", "bar"]
 }

package/dist/shared/content-mutation.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Overlay
+ * @namespace Shared
+ * @description Content Mutation
+ */
+/** Ignore owned indicator paint while retaining mutations of the real content. */
+export declare const hasContentMutation: (records: readonly MutationRecord[]) => boolean;

package/dist/shared/interaction-layer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @author WMXPY
+ * @package Overlay
+ * @namespace Shared
+ * @description Interaction Layer
+ */
+/** Marks a popup or dialog surface as an independent interaction paint boundary. */
+export declare const interactionLayerProps: {
+    readonly "data-gridui-interaction-layer": "";
+};
+type OutlinePlane = {
+    readonly owner: HTMLElement;
+    readonly element: HTMLDivElement;
+    readonly parent: OutlinePlane | undefined;
+    references: number;
+};
+export declare const interactionLayerOwner: (viewport: HTMLElement) => HTMLElement;
+export declare const refreshOutlinePlane: (plane: OutlinePlane) => void;
+export declare const acquireOutlinePlane: (owner: HTMLElement) => OutlinePlane;
+export declare const releaseOutlinePlane: (plane: OutlinePlane) => void;
+export {};

package/dist/shared/scrollbar-interaction-ref.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Overlay
+ * @namespace Shared
+ * @description Scrollbar Interaction Ref
+ */
+/** Share pointer paint with native scrollbars and Radix without owning scrolling. */
+export declare const scrollbarInteractionRef: (element: HTMLElement | null) => (() => void) | undefined;

package/dist/shared/style.d.ts

@@ -5,7 +5,7 @@
  * @description Style
  */
 export declare const overlaySurfaceStyles: (props?: ({
-    kind?: "popup" | "tooltip" | "dialog" | null | undefined;
+    kind?: "dialog" | "popup" | "tooltip" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const overlayBackdropStyles: (props?: ({
     pace?: "normal" | "deliberate" | null | undefined;

package/dist/shared/textarea-scrollbar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author WMXPY
+ * @package Overlay
+ * @namespace Shared
+ * @description Textarea Scrollbar
+ */
+export declare const isTextarea: (element: HTMLElement) => element is HTMLTextAreaElement;
+/** Position a sibling indicator in its actual containing block without changing it. */
+export declare const syncTextareaScrollbar: (viewport: HTMLTextAreaElement, layer: HTMLElement, style: CSSStyleDeclaration) => void;

package/dist/shared/use-interaction-outline.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @author WMXPY
+ * @package Overlay
+ * @namespace Shared
+ * @description Use Interaction Outline
+ */
+import { type Ref, type RefCallback } from "react";
+export type InteractionOutlineOptions<T extends HTMLElement> = {
+    readonly ref?: Ref<T> | undefined;
+    readonly selector: string;
+};
+/** Mirror Theme's resolved outline outside a scrolling viewport's clipping ancestors. */
+export declare const useInteractionOutline: <T extends HTMLElement>(options: InteractionOutlineOptions<T>) => RefCallback<T>;

package/dist/shared/use-scrollbars.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Overlay
+ * @namespace Shared
+ * @description Use Scrollbars
+ */
+import { type Ref, type RefCallback } from "react";
+export type ScrollbarsOptions<T extends HTMLElement> = {
+    readonly ref?: Ref<T> | undefined;
+};
+/** Attach square scrollbars to one native viewport, within its local DOM owner. */
+export declare const useScrollbars: <T extends HTMLElement>(options?: ScrollbarsOptions<T>) => RefCallback<T>;

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer utilities {
@@ -87,7 +87,7 @@
   initial-value: solid;
 }
 @layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-border-style: solid;
     }

package/docs/catalog.json

@@ -0,0 +1,78 @@
+{
+  "schemaVersion": 1,
+  "name": "@gridui/overlay",
+  "version": "1.2.2",
+  "category": "core",
+  "description": "GridUI React overlay",
+  "usage": "`overlaySurfaceStyles({ kind })` shares the surface border, colors, motion, and reduced-motion behavior. `kind` is `popup` (default), `tooltip`, or `dialog`. `overlayBackdropStyles({ pace })` shares backdrop fades at `normal` (default) or `deliberate` pace. Load this stylesheet before the consuming family.",
+  "documentation": [
+    "README.md"
+  ],
+  "exports": [
+    {
+      "name": "interactionLayerProps",
+      "kind": "value",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "InteractionOutlineOptions",
+      "kind": "type",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "overlayBackdropStyles",
+      "kind": "value",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "OverlayOpen",
+      "kind": "value",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "overlaySurfaceStyles",
+      "kind": "value",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "RetainedLayer",
+      "kind": "component",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "RetainedLayerProps",
+      "kind": "type",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "scrollbarInteractionRef",
+      "kind": "function",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "ScrollbarsOptions",
+      "kind": "type",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "useInteractionOutline",
+      "kind": "function",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "useOverlayState",
+      "kind": "function",
+      "importPath": "@gridui/overlay"
+    },
+    {
+      "name": "useScrollbars",
+      "kind": "function",
+      "importPath": "@gridui/overlay"
+    }
+  ],
+  "styles": [
+    "@gridui/theme/styles.css",
+    "@gridui/overlay/styles.css"
+  ],
+  "examples": []
+}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@gridui/overlay",
-  "version": "1.1.2",
+  "version": "1.2.2",
   "description": "GridUI React overlay",
   "license": "UNLICENSED",
   "type": "module",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "docs"
   ],
   "sideEffects": [
     "**/*.css"
@@ -26,7 +27,8 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/theme": "^2.3.2",
+    "@gridui/theme": "^2.5.3",
+    "@radix-ui/react-compose-refs": "1.1.5",
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {
@@ -43,8 +45,6 @@
   },
   "scripts": {
     "build": "node ../../scripts/compilation/package.ts",
-    "compile": "tsc --project tsconfig.json",
-    "test": "jest --passWithNoTests",
-    "coverage": "jest --coverage --passWithNoTests"
+    "compile": "tsc --project tsconfig.json"
   }
 }