@mirror-physics/fractal-ui 0.2.0-next.76 → 0.2.0-next.77

package/dist/index.js

@@ -2440,11 +2440,43 @@ var SidebarFooter = React16.forwardRef(
 SidebarFooter.displayName = "SidebarFooter";
 
 // src/components/SidePanel/SidePanel.tsx
+import * as React17 from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Close as Close2 } from "@mirror-physics/fractal-icons";
 import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
   useEscapeDismiss(80, onClose, open);
+  const bodyRef = React17.useRef(null);
+  const [scrollEdges, setScrollEdges] = React17.useState({ above: false, below: false });
+  React17.useLayoutEffect(() => {
+    const body = bodyRef.current;
+    if (!open || !body) return;
+    const measure = () => {
+      const maxScroll = Math.max(0, body.scrollHeight - body.clientHeight);
+      const top = Math.max(0, Math.min(body.scrollTop, maxScroll));
+      const above = maxScroll > 1 && top > 0;
+      const below = maxScroll - top > 1;
+      setScrollEdges((previous) => previous.above === above && previous.below === below ? previous : { above, below });
+    };
+    const resize = new ResizeObserver(measure);
+    const observeContent = () => {
+      resize.disconnect();
+      resize.observe(body);
+      for (const child of body.children) resize.observe(child);
+      measure();
+    };
+    const mutations = new MutationObserver(observeContent);
+    mutations.observe(body, { childList: true, subtree: true, characterData: true, attributes: true });
+    body.addEventListener("scroll", measure, { passive: true });
+    body.addEventListener("load", measure, true);
+    observeContent();
+    return () => {
+      resize.disconnect();
+      mutations.disconnect();
+      body.removeEventListener("scroll", measure);
+      body.removeEventListener("load", measure, true);
+    };
+  }, [open, loading]);
   if (!open) return null;
   return createPortal3(
     /* @__PURE__ */ jsx29("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs25(
@@ -2456,15 +2488,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs25("header", { className: "fractal-side-panel__header", children: [
+          /* @__PURE__ */ jsxs25("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
             /* @__PURE__ */ jsxs25("div", { className: "fractal-side-panel__heading", children: [
               typeof title === "string" ? /* @__PURE__ */ jsx29("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx29("div", { className: "fractal-side-panel__title", children: title }),
               description && /* @__PURE__ */ jsx29("p", { className: "fractal-side-panel__description", children: description })
             ] }),
             /* @__PURE__ */ jsx29("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx29(Close2, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ jsx29("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx29(UILoader, { label: loadingLabel }) : children }),
-          footer && /* @__PURE__ */ jsx29("footer", { className: "fractal-side-panel__footer", children: footer })
+          /* @__PURE__ */ jsx29("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx29(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ jsx29("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
         ]
       }
     ) }),
@@ -2473,17 +2505,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 }
 
 // src/components/Textarea/Textarea.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
-var Textarea = React17.forwardRef(
+var Textarea = React18.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
-var TextButton = React18.forwardRef(
+var TextButton = React19.forwardRef(
   ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs26(
     "button",
     {
@@ -2502,7 +2534,7 @@ var TextButton = React18.forwardRef(
 TextButton.displayName = "TextButton";
 
 // src/components/FileDropzone/FileDropzone.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { Close as Close3, FileArrowUp } from "@mirror-physics/fractal-icons";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 function FileDropzone({
@@ -2515,9 +2547,9 @@ function FileDropzone({
   description = "Files stay attached to this record.",
   className
 }) {
-  const inputId = React19.useId();
-  const inputRef = React19.useRef(null);
-  const [isDragging, setIsDragging] = React19.useState(false);
+  const inputId = React20.useId();
+  const inputRef = React20.useRef(null);
+  const [isDragging, setIsDragging] = React20.useState(false);
   const addFiles = (nextFiles) => {
     if (disabled) return;
     const additions = Array.from(nextFiles);