@alexgorbatchev/shadcn 0.0.19 → 0.0.20

package/dist/index.js

@@ -10,9 +10,12 @@ import {
   useDensity
 } from "./chunk-e6hk39ev.js";
 import {
-  PortalContext,
   usePortalContainer2
 } from "./chunk-j89xg1ak.js";
+import {
+  usePortalNode,
+  PortalProvider2
+} from "./chunk-aa7m22zj.js";
 import {
   DirectionProvider2,
   useDirection2
@@ -33,7 +36,7 @@ import {
   DropdownMenuRadioItem2,
   DropdownMenuSeparator2,
   DropdownMenuShortcut2
-} from "./chunk-mx21wpq0.js";
+} from "./chunk-d4bm5rzy.js";
 import {
   Popover2,
   PopoverTrigger2,
@@ -41,7 +44,7 @@ import {
   PopoverHeader2,
   PopoverTitle2,
   PopoverDescription2
-} from "./chunk-x7z9jzyf.js";
+} from "./chunk-4djw71cv.js";
 import {
   Skeleton2
 } from "./chunk-d70rcwk7.js";
@@ -77,7 +80,7 @@ import {
   DialogFooter2,
   DialogTitle2,
   DialogDescription2
-} from "./chunk-717ggspf.js";
+} from "./chunk-70vndezn.js";
 import {
   Slider2
 } from "./chunk-644cnngf.js";
@@ -92,7 +95,7 @@ import {
   Tooltip2,
   TooltipTrigger2,
   TooltipContent2
-} from "./chunk-czg9p52v.js";
+} from "./chunk-mz3e810d.js";
 import {
   RadioGroup2,
   RadioGroupItem2
@@ -105,7 +108,7 @@ import {
   CardAction2,
   CardContent2,
   CardFooter2
-} from "./chunk-v4yqjvzd.js";
+} from "./chunk-bygq5yqf.js";
 import {
   InputGroup2,
   InputGroupAddon2,
@@ -187,7 +190,7 @@ import {
   HoverCard2,
   HoverCardTrigger2,
   HoverCardContent2
-} from "./chunk-m54kq3he.js";
+} from "./chunk-hh43wg05.js";
 import {
   Sheet2,
   SheetTrigger2,
@@ -221,7 +224,7 @@ import {
   SidebarMenuSub2,
   SidebarMenuSubItem2,
   SidebarMenuSubButton2
-} from "./chunk-45kmek5e.js";
+} from "./chunk-h979cxnh.js";
 // src/components/ButtonLink.tsx
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -406,22 +409,27 @@ function ComboboxContent({
   const resolvedDensity = useDensity(density);
   const direction = useDirection();
   const container = usePortalContainer2();
+  const portal = usePortalNode();
   return /* @__PURE__ */ jsx3(ComboboxPrimitive.Portal, {
     container,
-    children: /* @__PURE__ */ jsx3(ComboboxPrimitive.Positioner, {
-      side,
-      sideOffset,
-      align,
-      alignOffset,
-      anchor,
-      className: "isolate ",
-      children: /* @__PURE__ */ jsx3(ComboboxPrimitive.Popup, {
-        dir: direction,
-        "data-density": resolvedDensity,
-        "data-slot": "combobox-content",
-        "data-chips": !!anchor,
-        className: (state) => cn2("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground border border-frame-edge shadow-frame duration-120 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none", typeof className === "function" ? className(state) : className),
-        ...props
+    ref: portal.ref,
+    children: /* @__PURE__ */ jsx3(PortalProvider2, {
+      container: portal.node,
+      children: /* @__PURE__ */ jsx3(ComboboxPrimitive.Positioner, {
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        anchor,
+        className: "isolate ",
+        children: /* @__PURE__ */ jsx3(ComboboxPrimitive.Popup, {
+          dir: direction,
+          "data-density": resolvedDensity,
+          "data-slot": "combobox-content",
+          "data-chips": !!anchor,
+          className: (state) => cn2("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground border border-frame-edge shadow-frame duration-120 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none", typeof className === "function" ? className(state) : className),
+          ...props
+        })
       })
     })
   });
@@ -574,6 +582,7 @@ function TabsContent({ density, className, ...props }) {
   return /* @__PURE__ */ jsx4(TabsPrimitive.Panel, {
     "data-density": density,
     "data-slot": "tabs-content",
+    "data-scroll": "none",
     className: (state) => cn2("flex-1 text-sm outline-none", typeof className === "function" ? className(state) : className),
     ...props
   });
@@ -890,12 +899,18 @@ function AlertDialogTrigger({ ...props }) {
     ...props
   });
 }
-function AlertDialogPortal({ container, ...props }) {
+function AlertDialogPortal({ container, ref, children, ...props }) {
   const resolvedContainer = usePortalContainer2(container);
+  const portal = usePortalNode(ref);
   return /* @__PURE__ */ jsx10(AlertDialogPrimitive.Portal, {
     "data-slot": "alert-dialog-portal",
     container: resolvedContainer,
-    ...props
+    ref: portal.ref,
+    ...props,
+    children: /* @__PURE__ */ jsx10(PortalProvider2, {
+      container: portal.node,
+      children
+    })
   });
 }
 function AlertDialogOverlay({ density, className, ...props }) {
@@ -917,6 +932,7 @@ function AlertDialogContent({ density, className, size = "default", ...props })
         dir: direction,
         "data-density": resolvedDensity,
         "data-slot": "alert-dialog-content",
+        "data-scroll": "none",
         "data-size": size,
         className: (state) => cn2("group/alert-dialog-content fixed top-1/2 left-1/2 grid w-full -translate-x-1/2 -translate-y-1/2 gap-panel rounded-md bg-popover p-panel text-popover-foreground border border-frame-edge shadow-frame duration-120 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none", typeof className === "function" ? className(state) : className),
         ...props
@@ -1044,29 +1060,34 @@ function SelectContent({
   const resolvedDensity = useDensity(density);
   const direction = useDirection4();
   const container = usePortalContainer2();
+  const portal = usePortalNode();
   return /* @__PURE__ */ jsx11(SelectPrimitive.Portal, {
     container,
-    children: /* @__PURE__ */ jsx11(SelectPrimitive.Positioner, {
-      side,
-      sideOffset,
-      align,
-      alignOffset,
-      alignItemWithTrigger,
-      className: "isolate ",
-      children: /* @__PURE__ */ jsxs8(SelectPrimitive.Popup, {
-        dir: direction,
-        "data-density": resolvedDensity,
-        "data-slot": "select-content",
-        "data-align-trigger": alignItemWithTrigger,
-        className: (state) => cn2("relative isolate max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground border border-frame-edge shadow-frame duration-120 data-[align-trigger=true]:animate-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:animate-none", typeof className === "function" ? className(state) : className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx11(SelectScrollUpButton, {}),
-          /* @__PURE__ */ jsx11(SelectPrimitive.List, {
-            children
-          }),
-          /* @__PURE__ */ jsx11(SelectScrollDownButton, {})
-        ]
+    ref: portal.ref,
+    children: /* @__PURE__ */ jsx11(PortalProvider2, {
+      container: portal.node,
+      children: /* @__PURE__ */ jsx11(SelectPrimitive.Positioner, {
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        alignItemWithTrigger,
+        className: "isolate ",
+        children: /* @__PURE__ */ jsxs8(SelectPrimitive.Popup, {
+          dir: direction,
+          "data-density": resolvedDensity,
+          "data-slot": "select-content",
+          "data-align-trigger": alignItemWithTrigger,
+          className: (state) => cn2("relative isolate max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground border border-frame-edge shadow-frame duration-120 data-[align-trigger=true]:animate-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:animate-none", typeof className === "function" ? className(state) : className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx11(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx11(SelectPrimitive.List, {
+              children
+            }),
+            /* @__PURE__ */ jsx11(SelectScrollDownButton, {})
+          ]
+        })
       })
     })
   });
@@ -1151,7 +1172,137 @@ function DensityProvider({
 // src/components/ThemeProvider.tsx
 import { useMemo } from "react";
 import { useIsomorphicLayoutEffect, useTernaryDarkMode } from "usehooks-ts";
-import { jsx as jsx13 } from "react/jsx-runtime";
+
+// src/components/ScrollGuard.tsx
+import { useEffect as useEffect2 } from "react";
+
+// src/utils/observeScrollGuards.ts
+function throwViolation(error) {
+  throw error;
+}
+function getViolation(element, view) {
+  if (!element.getClientRects().length)
+    return;
+  const style = view.getComputedStyle(element);
+  if (style.visibility !== "visible")
+    return;
+  const axes = [];
+  if (["auto", "scroll"].includes(style.overflowX) && element.scrollWidth > element.clientWidth) {
+    axes.push(`horizontal: ${element.scrollWidth}px > ${element.clientWidth}px`);
+  }
+  if (["auto", "scroll"].includes(style.overflowY) && element.scrollHeight > element.clientHeight) {
+    axes.push(`vertical: ${element.scrollHeight}px > ${element.clientHeight}px`);
+  }
+  if (!axes.length)
+    return;
+  const slot = element.getAttribute("data-slot");
+  const identity = element.id ? ` id="${element.id}"` : slot ? ` data-slot="${slot}"` : "";
+  return `<${element.localName}${identity}> (${axes.join(", ")})`;
+}
+function observeScrollGuards(ownerDocument, reportViolation = throwViolation) {
+  const view = ownerDocument.defaultView;
+  if (!view)
+    return () => {};
+  let frame;
+  let needsRefresh = true;
+  let guarded = [];
+  const observed = new Set;
+  const reported = new WeakSet;
+  const schedule = () => {
+    frame ??= view.requestAnimationFrame(check);
+  };
+  const resizeObserver = new view.ResizeObserver(schedule);
+  const refresh = () => {
+    guarded = [...ownerDocument.querySelectorAll('[data-scroll="none"]')];
+    const targets = new Set(guarded.flatMap((element) => [element, ...element.querySelectorAll("*")]));
+    for (const element of observed) {
+      if (!targets.has(element)) {
+        resizeObserver.unobserve(element);
+        observed.delete(element);
+      }
+    }
+    for (const element of targets) {
+      if (!observed.has(element)) {
+        resizeObserver.observe(element);
+        observed.add(element);
+      }
+    }
+    needsRefresh = false;
+  };
+  const check = () => {
+    frame = undefined;
+    if (needsRefresh)
+      refresh();
+    const violations = [];
+    for (const element of guarded) {
+      const violation = getViolation(element, view);
+      if (!violation) {
+        reported.delete(element);
+      } else if (!reported.has(element)) {
+        reported.add(element);
+        violations.push(violation);
+      }
+    }
+    if (violations.length) {
+      reportViolation(new Error(`[shadcn] Scrolling is forbidden by data-scroll="none": ${violations.join("; ")}. ` + "Move scrolling content into a nested ScrollArea or another explicit scroll viewport."));
+    }
+  };
+  const mutations = new view.MutationObserver((records) => {
+    needsRefresh ||= records.some((record) => record.type === "childList" || record.attributeName === "data-scroll");
+    schedule();
+  });
+  mutations.observe(ownerDocument.documentElement, {
+    subtree: true,
+    childList: true,
+    characterData: true,
+    attributes: true
+  });
+  view.addEventListener("resize", schedule);
+  ownerDocument.addEventListener("load", schedule, true);
+  ownerDocument.addEventListener("transitionend", schedule, true);
+  ownerDocument.addEventListener("animationend", schedule, true);
+  ownerDocument.fonts.addEventListener("loadingdone", schedule);
+  schedule();
+  return () => {
+    mutations.disconnect();
+    resizeObserver.disconnect();
+    if (frame !== undefined)
+      view.cancelAnimationFrame(frame);
+    view.removeEventListener("resize", schedule);
+    ownerDocument.removeEventListener("load", schedule, true);
+    ownerDocument.removeEventListener("transitionend", schedule, true);
+    ownerDocument.removeEventListener("animationend", schedule, true);
+    ownerDocument.fonts.removeEventListener("loadingdone", schedule);
+  };
+}
+
+// src/components/ScrollGuard.tsx
+"use client";
+var registrations = new WeakMap;
+function ScrollGuard({ ownerDocument }) {
+  useEffect2(() => {
+    if (process.env.NODE_ENV === "production")
+      return;
+    const target = ownerDocument ?? document;
+    let registration = registrations.get(target);
+    if (!registration) {
+      registration = { users: 0, disconnect: observeScrollGuards(target) };
+      registrations.set(target, registration);
+    }
+    registration.users++;
+    return () => {
+      registration.users--;
+      if (!registration.users) {
+        registration.disconnect();
+        registrations.delete(target);
+      }
+    };
+  }, [ownerDocument]);
+  return null;
+}
+
+// src/components/ThemeProvider.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function StoredThemeProvider({
   children,
   defaultTheme = "system",
@@ -1180,9 +1331,12 @@ function ThemePalette({
     document.documentElement.style.colorScheme = resolvedTheme;
   }, [resolvedTheme]);
   const value = useMemo(() => ({ theme, resolvedTheme, setTheme }), [theme, resolvedTheme, setTheme]);
-  return /* @__PURE__ */ jsx13(ThemeContext.Provider, {
+  return /* @__PURE__ */ jsxs9(ThemeContext.Provider, {
     value,
-    children
+    children: [
+      /* @__PURE__ */ jsx13(ScrollGuard, {}),
+      children
+    ]
   });
 }
 function ControlledThemeProvider({
@@ -1229,7 +1383,7 @@ function AspectRatio({ ratio, className, style, ...props }) {
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import { mergeProps as mergeProps5 } from "@base-ui/react/merge-props";
 import { useRender as useRender5 } from "@base-ui/react/use-render";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function Breadcrumb({ density, className, ...props }) {
   return /* @__PURE__ */ jsx15("nav", {
     "aria-label": "breadcrumb",
@@ -1293,7 +1447,7 @@ function BreadcrumbSeparator({ density, children, className, ...props }) {
   });
 }
 function BreadcrumbEllipsis({ density, className, ...props }) {
-  return /* @__PURE__ */ jsxs9("span", {
+  return /* @__PURE__ */ jsxs10("span", {
     "data-density": density,
     "data-slot": "breadcrumb-ellipsis",
     role: "presentation",
@@ -1364,7 +1518,7 @@ function ButtonGroupSeparator({
 }
 // src/components/NativeSelect.tsx
 import { ChevronDownIcon as ChevronDownIcon4 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function NativeSelect({
   density,
   className,
@@ -1372,7 +1526,7 @@ function NativeSelect({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs10("div", {
+  return /* @__PURE__ */ jsxs11("div", {
     dir,
     className: cn2("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
     "data-density": density,
@@ -1544,7 +1698,7 @@ function ItemFooter({ density, className, ...props }) {
 }
 // src/components/Pagination.tsx
 import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2, MoreHorizontalIcon as MoreHorizontalIcon2 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function Pagination({ density, className, ...props }) {
   return /* @__PURE__ */ jsx19("nav", {
     role: "navigation",
@@ -1591,7 +1745,7 @@ function PaginationPrevious({
   text = "Previous",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs11(PaginationLink, {
+  return /* @__PURE__ */ jsxs12(PaginationLink, {
     density,
     "aria-label": "Go to previous page",
     size: "default",
@@ -1610,7 +1764,7 @@ function PaginationPrevious({
   });
 }
 function PaginationNext({ density, className, text = "Next", ...props }) {
-  return /* @__PURE__ */ jsxs11(PaginationLink, {
+  return /* @__PURE__ */ jsxs12(PaginationLink, {
     density,
     "aria-label": "Go to next page",
     size: "default",
@@ -1629,7 +1783,7 @@ function PaginationNext({ density, className, text = "Next", ...props }) {
   });
 }
 function PaginationEllipsis({ density, className, ...props }) {
-  return /* @__PURE__ */ jsxs11("span", {
+  return /* @__PURE__ */ jsxs12("span", {
     "aria-hidden": true,
     "data-density": density,
     "data-slot": "pagination-ellipsis",
@@ -1646,7 +1800,7 @@ function PaginationEllipsis({ density, className, ...props }) {
 }
 // src/components/ScrollArea.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function ScrollArea({
   density,
   className,
@@ -1654,15 +1808,15 @@ function ScrollArea({
   scrollbars = /* @__PURE__ */ jsx20(ScrollBar, {}),
   ...props
 }) {
-  return /* @__PURE__ */ jsxs12(ScrollAreaPrimitive.Root, {
+  return /* @__PURE__ */ jsxs13(ScrollAreaPrimitive.Root, {
     "data-density": density,
     "data-slot": "scroll-area",
-    className: (state) => cn2("relative", typeof className === "function" ? className(state) : className),
+    className: (state) => cn2("relative flex min-h-0 flex-col", typeof className === "function" ? className(state) : className),
     ...props,
     children: [
       /* @__PURE__ */ jsx20(ScrollAreaPrimitive.Viewport, {
         "data-slot": "scroll-area-viewport",
-        className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-1",
+        className: "size-full min-h-0 flex-1 rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-1",
         children
       }),
       scrollbars,
@@ -1703,7 +1857,7 @@ function useDrawer() {
 
 // src/components/Drawer.tsx
 import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function Drawer({
   modal = true,
   showSwipeHandle = false,
@@ -1730,12 +1884,18 @@ function DrawerTrigger({ ...props }) {
     ...props
   });
 }
-function DrawerPortal({ container, ...props }) {
+function DrawerPortal({ container, ref, children, ...props }) {
   const resolvedContainer = usePortalContainer2(container);
+  const portal = usePortalNode(ref);
   return /* @__PURE__ */ jsx21(DrawerPrimitive.Portal, {
     "data-slot": "drawer-portal",
     container: resolvedContainer,
-    ...props
+    ref: portal.ref,
+    ...props,
+    children: /* @__PURE__ */ jsx21(PortalProvider2, {
+      container: portal.node,
+      children
+    })
   });
 }
 function DrawerClose({ ...props }) {
@@ -1767,7 +1927,7 @@ function DrawerContent({ density, className, children, ...props }) {
   const direction = useDirection2();
   const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
   const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
-  return /* @__PURE__ */ jsxs13(DrawerPortal, {
+  return /* @__PURE__ */ jsxs14(DrawerPortal, {
     "data-slot": "drawer-portal",
     children: [
       modal === true && /* @__PURE__ */ jsx21(DrawerOverlay, {
@@ -1778,9 +1938,10 @@ function DrawerContent({ density, className, children, ...props }) {
         "data-slot": "drawer-viewport",
         "data-modal": modal,
         className: "pointer-events-none fixed inset-0  select-none data-[modal=true]:pointer-events-auto",
-        children: /* @__PURE__ */ jsxs13(DrawerPrimitive.Popup, {
+        children: /* @__PURE__ */ jsxs14(DrawerPrimitive.Popup, {
           "data-density": resolvedDensity,
           "data-slot": "drawer-popup",
+          "data-scroll": "none",
           "data-swipe-axis": swipeAxis,
           "data-snap-points": hasSnapPoints ? "" : undefined,
           className: (state) => cn2("group/drawer-popup pointer-events-auto fixed  m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)] flex-col border border-frame-edge shadow-frame bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-md data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-md data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-md data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-md data-[swipe-direction=up]:border-b", "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95", "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full", "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]", "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-shrink:0]", "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]", "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)", "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row", "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]", "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", typeof className === "function" ? className(state) : className),
@@ -1789,6 +1950,7 @@ function DrawerContent({ density, className, children, ...props }) {
             showSwipeHandle && /* @__PURE__ */ jsx21(DrawerSwipeHandle, {}),
             /* @__PURE__ */ jsx21(DrawerPrimitive.Content, {
               "data-slot": "drawer-content",
+              "data-scroll": "none",
               className: "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-out select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none",
               children
             })
@@ -1834,19 +1996,25 @@ function DrawerDescription({ density, className, ...props }) {
 import { ChevronRightIcon as ChevronRightIcon3, CheckIcon as CheckIcon3 } from "lucide-react";
 import { useDirection as useDirection5 } from "@base-ui/react/direction-provider";
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function ContextMenu({ ...props }) {
   return /* @__PURE__ */ jsx22(ContextMenuPrimitive.Root, {
     "data-slot": "context-menu",
     ...props
   });
 }
-function ContextMenuPortal({ container, ...props }) {
+function ContextMenuPortal({ container, ref, children, ...props }) {
   const resolvedContainer = usePortalContainer2(container);
+  const portal = usePortalNode(ref);
   return /* @__PURE__ */ jsx22(ContextMenuPrimitive.Portal, {
     "data-slot": "context-menu-portal",
     container: resolvedContainer,
-    ...props
+    ref: portal.ref,
+    ...props,
+    children: /* @__PURE__ */ jsx22(PortalProvider2, {
+      container: portal.node,
+      children
+    })
   });
 }
 function ContextMenuTrigger({ density, className, ...props }) {
@@ -1918,7 +2086,7 @@ function ContextMenuSub({ ...props }) {
   });
 }
 function ContextMenuSubTrigger({ density, className, inset, children, ...props }) {
-  return /* @__PURE__ */ jsxs14(ContextMenuPrimitive.SubmenuTrigger, {
+  return /* @__PURE__ */ jsxs15(ContextMenuPrimitive.SubmenuTrigger, {
     "data-density": density,
     "data-slot": "context-menu-sub-trigger",
     "data-inset": inset,
@@ -1948,7 +2116,7 @@ function ContextMenuCheckboxItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs14(ContextMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ jsxs15(ContextMenuPrimitive.CheckboxItem, {
     "data-density": density,
     "data-slot": "context-menu-checkbox-item",
     "data-inset": inset,
@@ -1973,7 +2141,7 @@ function ContextMenuRadioGroup({ ...props }) {
   });
 }
 function ContextMenuRadioItem({ density, className, children, inset, ...props }) {
-  return /* @__PURE__ */ jsxs14(ContextMenuPrimitive.RadioItem, {
+  return /* @__PURE__ */ jsxs15(ContextMenuPrimitive.RadioItem, {
     "data-density": density,
     "data-slot": "context-menu-radio-item",
     "data-inset": inset,
@@ -2010,7 +2178,7 @@ function ContextMenuShortcut({ density, className, ...props }) {
 import { CheckIcon as CheckIcon4 } from "lucide-react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function Menubar({ density, className, ...props }) {
   return /* @__PURE__ */ jsx23(MenubarPrimitive, {
     "data-density": density,
@@ -2081,7 +2249,7 @@ function MenubarCheckboxItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(MenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ jsxs16(MenuPrimitive.CheckboxItem, {
     "data-density": density,
     "data-slot": "menubar-checkbox-item",
     "data-inset": inset,
@@ -2106,7 +2274,7 @@ function MenubarRadioGroup({ ...props }) {
   });
 }
 function MenubarRadioItem({ density, className, children, inset, ...props }) {
-  return /* @__PURE__ */ jsxs15(MenuPrimitive.RadioItem, {
+  return /* @__PURE__ */ jsxs16(MenuPrimitive.RadioItem, {
     "data-density": density,
     "data-slot": "menubar-radio-item",
     "data-inset": inset,
@@ -2175,7 +2343,7 @@ function MenubarSubContent({ density, className, ...props }) {
 import { ChevronDownIcon as ChevronDownIcon5 } from "lucide-react";
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function NavigationMenu({
   density,
   align = "start",
@@ -2184,7 +2352,7 @@ function NavigationMenu({
   ...props
 }) {
   const resolvedDensity = useDensity(density);
-  return /* @__PURE__ */ jsxs16(NavigationMenuPrimitive.Root, {
+  return /* @__PURE__ */ jsxs17(NavigationMenuPrimitive.Root, {
     "data-density": resolvedDensity,
     "data-slot": "navigation-menu",
     className: (state) => cn2("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", typeof className === "function" ? className(state) : className),
@@ -2216,7 +2384,7 @@ function NavigationMenuItem({ density, className, ...props }) {
 }
 var navigationMenuTriggerStyle = cva4("group/navigation-menu-trigger inline-flex h-control-lg w-max items-center justify-center rounded-sm px-control-x py-1.5 text-sm font-medium transition-colors outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted");
 function NavigationMenuTrigger({ density, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs16(NavigationMenuPrimitive.Trigger, {
+  return /* @__PURE__ */ jsxs17(NavigationMenuPrimitive.Trigger, {
     "data-density": density,
     "data-slot": "navigation-menu-trigger",
     className: (state) => cn2(navigationMenuTriggerStyle(), "group", typeof className === "function" ? className(state) : className),
@@ -2248,22 +2416,27 @@ function NavigationMenuPositioner({
   const resolvedDensity = useDensity(density);
   const direction = useDirection2();
   const container = usePortalContainer2();
+  const portal = usePortalNode();
   return /* @__PURE__ */ jsx24(NavigationMenuPrimitive.Portal, {
     container,
-    children: /* @__PURE__ */ jsx24(NavigationMenuPrimitive.Positioner, {
-      dir: direction,
-      side,
-      sideOffset,
-      align,
-      alignOffset,
-      className: (state) => cn2("isolate  h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", typeof className === "function" ? className(state) : className),
-      ...props,
-      children: /* @__PURE__ */ jsx24(NavigationMenuPrimitive.Popup, {
-        "data-density": resolvedDensity,
-        "data-slot": "navigation-menu-popup",
-        className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-sm bg-popover text-popover-foreground border border-frame-edge shadow-frame transition-[opacity,transform,width,height,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none  data-ending-style:opacity-0 data-ending-style:duration-150  data-starting-style:opacity-0",
-        children: /* @__PURE__ */ jsx24(NavigationMenuPrimitive.Viewport, {
-          className: "relative size-full overflow-hidden"
+    ref: portal.ref,
+    children: /* @__PURE__ */ jsx24(PortalProvider2, {
+      container: portal.node,
+      children: /* @__PURE__ */ jsx24(NavigationMenuPrimitive.Positioner, {
+        dir: direction,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        className: (state) => cn2("isolate  h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", typeof className === "function" ? className(state) : className),
+        ...props,
+        children: /* @__PURE__ */ jsx24(NavigationMenuPrimitive.Popup, {
+          "data-density": resolvedDensity,
+          "data-slot": "navigation-menu-popup",
+          className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-sm bg-popover text-popover-foreground border border-frame-edge shadow-frame transition-[opacity,transform,width,height,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none  data-ending-style:opacity-0 data-ending-style:duration-150  data-starting-style:opacity-0",
+          children: /* @__PURE__ */ jsx24(NavigationMenuPrimitive.Viewport, {
+            className: "relative size-full overflow-hidden"
+          })
         })
       })
     })
@@ -2294,18 +2467,24 @@ function NavigationMenuIndicator({
 // src/components/Toast.tsx
 import { Toast as ToastPrimitive } from "@base-ui/react/toast";
 import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, LoaderCircleIcon, XIcon as XIcon2 } from "lucide-react";
-import { jsx as jsx25, jsxs as jsxs17, Fragment } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18, Fragment } from "react/jsx-runtime";
 function ToastProvider(props) {
   return /* @__PURE__ */ jsx25(ToastPrimitive.Provider, {
     ...props
   });
 }
-function ToastPortal({ container, ...props }) {
+function ToastPortal({ container, ref, children, ...props }) {
   const resolvedContainer = usePortalContainer2(container);
+  const portal = usePortalNode(ref);
   return /* @__PURE__ */ jsx25(ToastPrimitive.Portal, {
     "data-slot": "toast-portal",
     container: resolvedContainer,
-    ...props
+    ref: portal.ref,
+    ...props,
+    children: /* @__PURE__ */ jsx25(PortalProvider2, {
+      container: portal.node,
+      children
+    })
   });
 }
 function ToastViewport({ density, dir, className, ...props }) {
@@ -2416,7 +2595,7 @@ function ToastList() {
   return /* @__PURE__ */ jsx25(Fragment, {
     children: toasts.map((toastItem) => /* @__PURE__ */ jsx25(Toast, {
       toast: toastItem,
-      children: /* @__PURE__ */ jsxs17(ToastContent, {
+      children: /* @__PURE__ */ jsxs18(ToastContent, {
         children: [
           /* @__PURE__ */ jsx25("span", {
             "data-slot": "toast-icon",
@@ -2425,7 +2604,7 @@ function ToastList() {
               type: toastItem.type
             })
           }),
-          /* @__PURE__ */ jsxs17("div", {
+          /* @__PURE__ */ jsxs18("div", {
             className: "flex min-w-0 flex-1 flex-col gap-1",
             children: [
               /* @__PURE__ */ jsx25(ToastTitle, {}),
@@ -2440,7 +2619,7 @@ function ToastList() {
   });
 }
 function ToastToaster({ children, density, ...props }) {
-  return /* @__PURE__ */ jsxs17(ToastProvider, {
+  return /* @__PURE__ */ jsxs18(ToastProvider, {
     ...props,
     children: [
       children,
@@ -2774,8 +2953,8 @@ function AttachmentGroup({ density, className, ...props }) {
   });
 }
 // src/components/InlineEdit.tsx
-import { useEffect as useEffect2, useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function InlineEdit({
   label,
   value,
@@ -2790,7 +2969,7 @@ function InlineEdit({
   const isFinished = useRef4(false);
   const [isSaving, setSaving] = useState4(false);
   const [error, setError] = useState4("");
-  useEffect2(() => {
+  useEffect3(() => {
     input.current?.focus();
     if (shouldSelectOnMount)
       input.current?.select();
@@ -2810,7 +2989,7 @@ function InlineEdit({
       setSaving(false);
     }
   };
-  return /* @__PURE__ */ jsxs18("form", {
+  return /* @__PURE__ */ jsxs19("form", {
     className: "flex min-w-0 flex-col gap-1",
     onSubmit: (event) => {
       event.preventDefault();
@@ -2880,7 +3059,7 @@ function StarRating({ label, value, disabled, density, onValueChange }) {
 }
 // src/components/ConfirmationDialog.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 function ConfirmationDialog({
   open,
   title,
@@ -2899,9 +3078,9 @@ function ConfirmationDialog({
         onOpenChange(next);
       }
     },
-    children: /* @__PURE__ */ jsxs19(AlertDialogContent, {
+    children: /* @__PURE__ */ jsxs20(AlertDialogContent, {
       children: [
-        /* @__PURE__ */ jsxs19(AlertDialogHeader, {
+        /* @__PURE__ */ jsxs20(AlertDialogHeader, {
           children: [
             /* @__PURE__ */ jsx32(AlertDialogTitle, {
               children: title
@@ -2917,7 +3096,7 @@ function ConfirmationDialog({
             children: error
           })
         }),
-        /* @__PURE__ */ jsxs19(AlertDialogFooter, {
+        /* @__PURE__ */ jsxs20(AlertDialogFooter, {
           children: [
             /* @__PURE__ */ jsx32(AlertDialogCancel, {
               disabled: isPending,
@@ -2951,10 +3130,10 @@ import { useRef as useRef5 } from "react";
 import { ImageIcon, UploadIcon } from "lucide-react";
 
 // src/hooks/useObjectURL.ts
-import { useEffect as useEffect3, useState as useState6 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 function useObjectURL(file) {
   const [url, setURL] = useState6();
-  useEffect3(() => {
+  useEffect4(() => {
     if (!file) {
       setURL(undefined);
       return;
@@ -2967,16 +3146,16 @@ function useObjectURL(file) {
 }
 
 // src/components/ImagePicker.tsx
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 function ImagePicker({ src, file, label, disabled, onFileChange, onClear }) {
   const input = useRef5(null);
   const preview = useObjectURL(file);
   const image = file === null ? undefined : preview ?? src;
-  return /* @__PURE__ */ jsxs20("figure", {
+  return /* @__PURE__ */ jsxs21("figure", {
     className: "flex min-w-0 flex-col items-center gap-3",
     "aria-label": label,
     children: [
-      /* @__PURE__ */ jsxs20(Avatar2, {
+      /* @__PURE__ */ jsxs21(Avatar2, {
         size: "preview",
         shape: "square",
         children: [
@@ -3006,10 +3185,10 @@ function ImagePicker({ src, file, label, disabled, onFileChange, onClear }) {
           event.currentTarget.value = "";
         }
       }),
-      /* @__PURE__ */ jsxs20("div", {
+      /* @__PURE__ */ jsxs21("div", {
         className: "flex flex-wrap justify-center gap-2",
         children: [
-          /* @__PURE__ */ jsxs20(Button2, {
+          /* @__PURE__ */ jsxs21(Button2, {
             type: "button",
             variant: "outline",
             disabled,
@@ -3033,14 +3212,6 @@ function ImagePicker({ src, file, label, disabled, onFileChange, onClear }) {
     ]
   });
 }
-// src/components/PortalProvider.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
-function PortalProvider({ container, children }) {
-  return /* @__PURE__ */ jsx34(PortalContext.Provider, {
-    value: container,
-    children
-  });
-}
 export {
   Accordion,
   AccordionContent,
@@ -3272,7 +3443,7 @@ export {
   PopoverHeader2 as PopoverHeader,
   PopoverTitle2 as PopoverTitle,
   PopoverTrigger2 as PopoverTrigger,
-  PortalProvider,
+  PortalProvider2 as PortalProvider,
   Progress2 as Progress,
   ProgressIndicator2 as ProgressIndicator,
   ProgressLabel2 as ProgressLabel,
@@ -3282,6 +3453,7 @@ export {
   RadioGroupItem2 as RadioGroupItem,
   ScrollArea,
   ScrollBar,
+  ScrollGuard,
   Select,
   SelectContent,
   SelectGroup,