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

package/dist/index.cjs

@@ -2548,11 +2548,43 @@ var SidebarFooter = React16.forwardRef(
 SidebarFooter.displayName = "SidebarFooter";
 
 // src/components/SidePanel/SidePanel.tsx
+var React17 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
 var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime30 = require("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 (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
@@ -2564,15 +2596,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "fractal-side-panel__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
             /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-side-panel__heading", children: [
               typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-side-panel__title", children: title }),
               description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "fractal-side-panel__description", children: description })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_fractal_icons13.Close, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UILoader, { label: loadingLabel }) : children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
         ]
       }
     ) }),
@@ -2581,17 +2613,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 }
 
 // src/components/Textarea/Textarea.tsx
-var React17 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Textarea = React17.forwardRef(
+var Textarea = React18.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
-var React18 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var TextButton = React18.forwardRef(
+var TextButton = React19.forwardRef(
   ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "button",
     {
@@ -2610,7 +2642,7 @@ var TextButton = React18.forwardRef(
 TextButton.displayName = "TextButton";
 
 // src/components/FileDropzone/FileDropzone.tsx
-var React19 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 var import_fractal_icons14 = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function FileDropzone({
@@ -2623,9 +2655,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);