remoraid 2.20.2 → 2.26.4

package/dist/core/index.js

@@ -5440,7 +5440,10 @@ import React2, {
   useContext
 } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
-var getDefaultWidgetContext = (configuration) => import_lodash.merge({ name: configuration.widgetId, selected: true }, configuration.initialValues);
+var getDefaultWidgetContext = (configuration) => {
+  const mergedConfiguration = import_lodash.merge({ name: configuration.widgetId, selected: true }, configuration.initialValues);
+  return { ...mergedConfiguration, hidden: !mergedConfiguration.selected };
+};
 var widgetsContext = React2.createContext({
   widgets: {},
   activeWidget: null,
@@ -5451,7 +5454,8 @@ var widgetsContext = React2.createContext({
   isPageRegistered: () => false,
   updateWidgetSelection: () => {},
   updateWidgetSelectionBulk: () => {},
-  isWidgetSelected: () => false
+  isWidgetSelected: () => false,
+  hideWidget: () => {}
 });
 var useWidgets = () => {
   return useContext(widgetsContext);
@@ -5469,38 +5473,57 @@ function WidgetsProvider({
     setActiveWidget(widgetId);
   };
   const updateWidgetSelection = (pageId, widgetId, value) => {
-    if (!widgets[pageId]) {
+    const page = widgets[pageId];
+    if (!page) {
       console.error(`Cannot change selection of widget in page ${pageId}. Because this page does exist.`);
       return;
     }
-    if (!widgets[pageId][widgetId]) {
+    const widget = page[widgetId];
+    if (!widget) {
       console.error(`Cannot change selection of widget ${widgetId}. Because this widget does not exist on page ${pageId}.`);
       return;
     }
     setWidgets((prev) => ({
       ...prev,
       [pageId]: {
-        ...widgets[pageId],
-        [widgetId]: { ...widgets[pageId][widgetId], selected: value }
+        ...page,
+        [widgetId]: {
+          ...widget,
+          selected: value,
+          hidden: false
+        }
       }
     }));
   };
   const updateWidgetSelectionBulk = (pageId, selectedWidgetIds) => {
-    if (!widgets[pageId]) {
+    const page = widgets[pageId];
+    if (!page) {
       console.error(`Cannot change selection of widget in page ${pageId}. Because this page does exist.`);
       return;
     }
-    const updatedPage = widgets[pageId];
-    for (let widgetId of Object.keys(updatedPage)) {
-      updatedPage[widgetId] = {
-        ...updatedPage[widgetId],
-        selected: selectedWidgetIds.includes(widgetId)
+    setWidgets((prev) => {
+      const updatedPage = {};
+      for (const [widgetId, widget] of Object.entries(page)) {
+        if (!widget) {
+          continue;
+        }
+        const selected = selectedWidgetIds.includes(widgetId);
+        const selectionChanged = widget.selected !== selected;
+        if (!selectionChanged) {
+          updatedPage[widgetId] = widget;
+          continue;
+        }
+        updatedPage[widgetId] = {
+          ...widget,
+          selected,
+          hidden: false
+        };
+      }
+      return {
+        ...prev,
+        [pageId]: updatedPage
       };
-    }
-    setWidgets((prev) => ({
-      ...prev,
-      [pageId]: updatedPage
-    }));
+    });
   };
   const registerPage = (pageId, initialWidgets) => {
     setWidgets((prev) => ({
@@ -5546,10 +5569,21 @@ function WidgetsProvider({
     return true;
   };
   const isWidgetSelected = (pageId, widgetId) => {
-    if (!isWidgetRegistered(pageId, widgetId)) {
-      return false;
+    return Boolean(widgets[pageId]?.[widgetId]?.selected);
+  };
+  const hideWidget = (pageId, widgetId) => {
+    const widget = widgets[pageId]?.[widgetId];
+    if (!widget) {
+      console.error(`Cannot call 'hideWidget' for widget ${widgetId}. Because this widget does not exist on page ${pageId}.`);
+      return;
     }
-    return widgets[pageId][widgetId].selected;
+    setWidgets((prev) => ({
+      ...prev,
+      [pageId]: {
+        ...prev[pageId],
+        [widgetId]: { ...widget, selected: false, hidden: true }
+      }
+    }));
   };
   return /* @__PURE__ */ jsxDEV(widgetsContext.Provider, {
     value: {
@@ -5562,7 +5596,8 @@ function WidgetsProvider({
       registerWidget,
       registerPage,
       isWidgetRegistered,
-      isPageRegistered
+      isPageRegistered,
+      hideWidget
     },
     children
   }, undefined, false, undefined, this);
@@ -5657,6 +5692,16 @@ var getDefaultButtonIconSize = (buttonSize) => {
   }
   return "medium" /* Medium */;
 };
+var scrollToWidget = (widgetId) => {
+  const widgetElement = document.getElementById(widgetId);
+  if (!widgetElement) {
+    return;
+  }
+  widgetElement.scrollIntoView({
+    behavior: "smooth",
+    block: "start"
+  });
+};
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 import { px, rgba, useMantineTheme } from "@mantine/core";
@@ -5667,7 +5712,8 @@ import {
 } from "@tabler/icons-react";
 import React3, {
   useContext as useContext3,
-  useMemo as useMemo2
+  useMemo as useMemo2,
+  useLayoutEffect
 } from "react";
 
 // src/core/components/RemoraidProvider/HydrationStatusProvider/index.tsx
@@ -5733,6 +5779,7 @@ var createRemoraidTheme = (customTheme, dependencies) => {
     };
   }
   const defaultTheme = {
+    bodyColor: "light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-9))",
     containerSize: 1300,
     jsonStringifySpace: 2,
     transparentBackground,
@@ -5778,27 +5825,52 @@ var createRemoraidTheme = (customTheme, dependencies) => {
       ScrollArea: {
         scrollbarSize: 8,
         scrollHideDelay: 20,
-        type: "hover"
+        type: "hover",
+        styles: { thumb: { zIndex: 5 } }
       },
       HoverCard: {
-        shadow: "md",
         withArrow: true,
         transitionProps: {
-          transition: "pop",
           duration: transitionDurations.short
-        },
-        styles: {
-          dropdown: { border: "none", background: transparentBackground },
-          arrow: { border: "none" }
         }
       },
       Tooltip: {
-        withArrow: true
+        withArrow: true,
+        transitionProps: {
+          duration: transitionDurations.short
+        }
+      },
+      Menu: {
+        withArrow: true,
+        transitionProps: {
+          duration: transitionDurations.short
+        }
       }
     }
   };
   return import_lodash2.merge(defaultTheme, customTheme);
 };
+var getCssVars = (theme) => {
+  const {
+    bodyColor,
+    transitionDurations,
+    primaryGutter,
+    containerSize,
+    transparentBackground
+  } = theme;
+  return {
+    "--mantine-color-body": bodyColor,
+    "--remoraid-container-size": `${containerSize}px`,
+    "--remoraid-primary-gutter": typeof primaryGutter === "string" ? `var(--mantine-spacing-${primaryGutter})` : `${primaryGutter}px`,
+    ...transparentBackground && {
+      "--remoraid-transparent-background": transparentBackground
+    },
+    ...Object.entries(transitionDurations).reduce((t, [key, value]) => ({
+      ...t,
+      [`--remoraid-transition-duration-${key}`]: `${value}ms`
+    }), {})
+  };
+};
 var themeContext = React3.createContext(createRemoraidTheme());
 var useRemoraidTheme = () => {
   return useContext3(themeContext);
@@ -5816,6 +5888,14 @@ function ThemeProvider({
     };
     return createRemoraidTheme(typeof theme === "function" ? theme(dependencies) : theme, dependencies);
   }, [colorScheme, theme]);
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    const entries = Object.entries(getCssVars(remoraidTheme));
+    entries.forEach(([key, value]) => root.style.setProperty(key, value));
+    return () => {
+      entries.forEach(([key]) => root.style.removeProperty(key));
+    };
+  }, [remoraidTheme]);
   return /* @__PURE__ */ jsxDEV3(themeContext.Provider, {
     value: remoraidTheme,
     children
@@ -6543,7 +6623,15 @@ var AppShell_default = Object.assign(AppShell, {
   FooterMinimal
 });
 // src/core/components/WidgetSelectionHeader/index.tsx
-import { Chip as Chip2, Divider as Divider2, Flex as Flex3, Text } from "@mantine/core";
+import {
+  Box as Box4,
+  Chip as Chip2,
+  Divider as Divider2,
+  Flex as Flex3,
+  Menu,
+  Text,
+  useMantineTheme as useMantineTheme2
+} from "@mantine/core";
 
 // src/core/components/Page/index.tsx
 import { Stack as Stack3 } from "@mantine/core";
@@ -6590,7 +6678,8 @@ function Page({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-import { IconCheck } from "@tabler/icons-react";
+import { IconCheck, IconFocus, IconNavigation } from "@tabler/icons-react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
 
 // src/core/components/ScrollableChipGroup/index.tsx
 import {
@@ -6602,15 +6691,16 @@ var import_lodash7 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
 function ScrollableChipGroup({
   value,
+  ref,
   onChange,
-  gap,
+  gap = "xs",
   componentsProps,
-  children: childrenProp
+  children
 }) {
-  const children = asChildrenOfType(Chip, childrenProp, "Check children passed to 'ScrollableChipGroup' component.");
   const theme = useRemoraidTheme();
   return /* @__PURE__ */ jsxDEV16(ScrollArea2, {
-    ...import_lodash7.merge({}, theme.componentsProps.ScrollArea, componentsProps?.ScrollArea),
+    ref,
+    ...import_lodash7.merge({}, theme.componentsProps.ScrollArea, { style: { contain: "inline-size" } }, componentsProps?.ScrollArea),
     children: /* @__PURE__ */ jsxDEV16(Chip.Group, {
       value,
       onChange,
@@ -6619,7 +6709,7 @@ function ScrollableChipGroup({
       children: /* @__PURE__ */ jsxDEV16(Flex2, {
         justify: "flex-start",
         align: "center",
-        gap: gap ?? "xs",
+        gap,
         h: "auto",
         ...componentsProps?.container,
         children
@@ -6629,163 +6719,543 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
-function WidgetSelectionHeader({
-  title,
-  disabledWidgets,
-  mt
-}) {
-  const theme = useRemoraidTheme();
-  const { isPageRegistered, updateWidgetSelectionBulk, ...widgetsContext2 } = useWidgets();
-  const page = usePage();
-  if (!page) {
-    throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
-  }
-  const widgets = widgetsContext2.widgets[page.pageId] ?? {};
-  return /* @__PURE__ */ jsxDEV17(Flex3, {
-    justify: "flex-start",
-    align: "center",
-    gap: "xs",
-    mt,
-    children: [
-      /* @__PURE__ */ jsxDEV17(Text, {
-        size: "lg",
-        fw: 400,
-        children: title ?? page.name
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17(Divider2, {
-        orientation: "vertical"
-      }, undefined, false, undefined, this),
-      isPageRegistered(page.pageId) && /* @__PURE__ */ jsxDEV17(ScrollableChipGroup, {
-        value: Object.keys(widgets).filter((widgetId) => widgets[widgetId]?.selected),
-        onChange: (value) => {
-          updateWidgetSelectionBulk(page.pageId, value);
-        },
-        componentsProps: { ScrollArea: { flex: 1 } },
-        children: Object.keys(widgets).map((widgetId) => {
-          const widget = widgets[widgetId] ?? getDefaultWidgetContext({ widgetId });
-          return /* @__PURE__ */ jsxDEV17(Chip2, {
-            value: widgetId,
-            size: "sm",
-            disabled: disabledWidgets && disabledWidgets.includes(widgetId),
-            icon: /* @__PURE__ */ jsxDEV17(IconCheck, {
-              ...theme.componentsProps.icons.small
-            }, undefined, false, undefined, this),
-            children: widget.name
-          }, widgetId, false, undefined, this);
-        })
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-// src/core/components/BadgeGroup/index.tsx
+var import_lodash10 = __toESM(require_lodash(), 1);
+
+// src/core/components/Pinnable/index.tsx
 import {
-  Badge as Badge2,
-  Group as Group3,
-  HoverCard,
-  Stack as Stack4,
-  Transition as Transition2
-} from "@mantine/core";
-import React7 from "react";
+  useMemo as useMemo4,
+  useRef as useRef2,
+  useState as useState7
+} from "react";
+import { IconPin, IconPinnedOff } from "@tabler/icons-react";
+import { Box as Box3, Portal as Portal2 } from "@mantine/core";
 
-// src/core/components/BadgeMinimal/index.tsx
+// src/core/components/Controls/ControlButton/index.tsx
 import {
-  Badge,
+  ActionIcon,
   Tooltip as Tooltip2,
   Transition
 } from "@mantine/core";
+import { IconClick } from "@tabler/icons-react";
 var import_lodash8 = __toESM(require_lodash(), 1);
-import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
-function BadgeMinimal({
-  label,
-  tooltip,
+import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
+function ControlButton({
+  icon: Icon3 = IconClick,
   mounted = true,
+  size = "xs",
+  iconSize = "tiny" /* Tiny */,
+  onClick,
+  order,
+  color,
+  tooltip,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsxDEV18(Transition, {
+  return /* @__PURE__ */ jsxDEV17(Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsxDEV18(Tooltip2, {
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV17(Tooltip2, {
       ...import_lodash8.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
-      children: /* @__PURE__ */ jsxDEV18(Badge, {
-        variant: "default",
-        ...componentsProps?.badge,
+      children: /* @__PURE__ */ jsxDEV17(ActionIcon, {
+        "data-control-button": true,
+        size,
+        color,
+        onClick,
+        radius: "xl",
+        ...componentsProps?.button,
         style: {
-          ...transitionStyle,
-          cursor: "pointer",
-          ...componentsProps?.badge?.style
+          order,
+          ...import_lodash8.merge(transitionStyle, componentsProps?.button?.style)
         },
-        children: label
+        children: /* @__PURE__ */ jsxDEV17(Icon3, {
+          ...import_lodash8.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 
-// src/core/components/BadgeGroup/index.tsx
+// src/core/components/Controls/index.tsx
+import { useRef, useState as useState6 } from "react";
+import {
+  Group as Group3,
+  Paper as Paper2,
+  Transition as Transition2
+} from "@mantine/core";
+import { IconGripHorizontal } from "@tabler/icons-react";
 var import_lodash9 = __toESM(require_lodash(), 1);
-import { jsxDEV as jsxDEV19, Fragment as Fragment2 } from "react/jsx-dev-runtime";
-import { createElement } from "react";
-function BadgeGroup({
-  badges: badgesProp,
-  gap = "xs",
-  breakpoint: breakpointProp,
-  componentsProps
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+function Controls({
+  groupRef,
+  mounted = true,
+  dragContainerRef,
+  gutter = 5,
+  iconSize = "tiny" /* Tiny */,
+  additionalButtons: additionalButtonsProp,
+  componentsProps,
+  children: childrenProp
 }) {
-  const badges = badgesProp.map((badge) => asElementOrPropsOfType(BadgeMinimal, badge, "Check 'badges' property passed to 'BadgeGroup'."));
+  const additionalButtons = additionalButtonsProp?.map((additionalButton) => asElementOrPropsOfType(ControlButton, additionalButton, "Check the 'additionalButtons' property of 'Controls'."));
+  const children = asChildrenOfType(ControlButton, childrenProp, "Check children passed to 'Controls' component.");
   const theme = useRemoraidTheme();
-  const breakpoint = breakpointProp ?? theme.breakpoints.badgeGroupCollapse;
-  const numVisibleBadges = badges.filter((badge) => isValidElementOfType(BadgeMinimal, badge) ? badge.props.mounted : badge.mounted !== false).length;
-  const badgesElement = badges.map((badge, i) => {
-    if (isValidElementOfType(BadgeMinimal, badge)) {
-      return badge;
+  const [pos, setPos] = useState6({
+    x: 0,
+    y: 0
+  });
+  const offsetRef = useRef({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+  const clamp = (v, min, max) => {
+    return Math.min(Math.max(v, min), max);
+  };
+  const handlePointerDown = (e) => {
+    if (e.target instanceof Element && e.target.closest("button,[data-control-button]")) {
+      return;
     }
-    return /* @__PURE__ */ createElement(BadgeMinimal, {
-      ...badge,
-      key: i
+    if (!containerRef.current) {
+      return;
+    }
+    const paperRect = containerRef.current.getBoundingClientRect();
+    offsetRef.current = {
+      x: e.clientX - paperRect.right,
+      y: e.clientY - paperRect.top
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    if (!e.currentTarget.hasPointerCapture(e.pointerId)) {
+      return;
+    }
+    if (!containerRef.current || !dragContainerRef.current) {
+      return;
+    }
+    const boxRect = dragContainerRef.current.getBoundingClientRect();
+    const paperRect = containerRef.current.getBoundingClientRect();
+    const rawX = e.clientX - boxRect.right - offsetRef.current.x;
+    const rawY = e.clientY - boxRect.top - offsetRef.current.y;
+    const maxX = boxRect.width - paperRect.width;
+    const maxY = boxRect.height - paperRect.height;
+    setPos({
+      x: clamp(-rawX, 0, maxX),
+      y: clamp(rawY, 0, maxY)
     });
-  });
-  return /* @__PURE__ */ jsxDEV19(Fragment2, {
-    children: [
-      /* @__PURE__ */ jsxDEV19(Group3, {
-        gap,
+  };
+  const handlePointerUp = (e) => {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  };
+  return /* @__PURE__ */ jsxDEV18(Transition2, {
+    mounted,
+    keepMounted: true,
+    transition: "pop",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV18(Paper2, {
+      ref: containerRef,
+      pos: "absolute",
+      p: gutter,
+      bg: theme.transparentBackground,
+      shadow: "md",
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      ...componentsProps?.container,
+      style: {
+        right: pos.x,
+        top: pos.y,
+        ...import_lodash9.merge(transitionStyle, componentsProps?.container?.style)
+      },
+      className: clsx_default("remoraid-controls", componentsProps?.container?.className),
+      children: /* @__PURE__ */ jsxDEV18(Group3, {
+        gap: gutter,
+        ref: groupRef,
         wrap: "nowrap",
-        visibleFrom: numVisibleBadges > 1 ? breakpoint : undefined,
-        ...componentsProps?.container,
-        className: clsx_default("remoraid-badge-group", componentsProps?.container?.className),
-        children: badgesElement
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV19(Transition2, {
-        mounted: numVisibleBadges > 1,
-        transition: "fade",
-        duration: theme.transitionDurations.short,
-        timingFunction: "ease",
-        ...componentsProps?.cumulativeBadgeTransition,
-        children: (transitionStyle) => /* @__PURE__ */ jsxDEV19(HoverCard, {
-          ...import_lodash9.merge({}, theme.componentsProps.HoverCard, componentsProps?.HoverCard),
-          children: [
-            /* @__PURE__ */ jsxDEV19(HoverCard.Target, {
-              children: /* @__PURE__ */ jsxDEV19(Badge2, {
-                hiddenFrom: breakpoint,
-                variant: "dot",
-                ...componentsProps?.cumulativeBadge,
-                style: {
-                  cursor: "pointer",
-                  ...import_lodash9.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
-                },
-                children: [
-                  numVisibleBadges,
-                  " badges"
-                ]
-              }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV19(HoverCard.Dropdown, {
-              p: gap,
-              children: /* @__PURE__ */ jsxDEV19(Stack4, {
-                gap,
+        ...componentsProps?.group,
+        className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
+        children: [
+          /* @__PURE__ */ jsxDEV18(IconGripHorizontal, {
+            ...import_lodash9.merge({}, theme.componentsProps.icons[iconSize], { order: -100, color: "var(--mantine-color-default-border)" }, componentsProps?.gripIcon)
+          }, undefined, false, undefined, this),
+          children,
+          additionalButtons && additionalButtons.map((button, i) => {
+            if (isValidElementOfType(ControlButton, button)) {
+              return button;
+            }
+            return /* @__PURE__ */ jsxDEV18(ControlButton, {
+              ...button
+            }, i, false, undefined, this);
+          })
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/Pinnable/index.tsx
+import { jsxDEV as jsxDEV19 } from "react/jsx-dev-runtime";
+function Pinnable({
+  layoutType: layoutTypeProp,
+  section,
+  initialValue = false,
+  layoutId,
+  controlsContainer,
+  hidden = false,
+  componentsProps,
+  children
+}) {
+  const layoutType = layoutTypeProp ?? "frame" /* Frame */;
+  const { layouts } = useLayouts();
+  const [pinned, setPinned] = useState7(initialValue);
+  const containerRef = useRef2(null);
+  const layout = layouts[layoutId ?? remoraidAppShellLayoutId];
+  if (layout && layout.type !== layoutType) {
+    throw new TypeError(`Prop 'layoutId' in '${Pinnable.name}' refers to a layout of type ${layout.type}, expected ${layoutType}. Leave 'layoutId' undefined, if you want to use the layout in '${AppShell_default.name}' as reference layout.`);
+  }
+  const controlButton = useMemo4(() => /* @__PURE__ */ jsxDEV19(ControlButton, {
+    icon: pinned ? IconPinnedOff : IconPin,
+    tooltip: pinned ? "Unpin" : "Pin",
+    color: "green",
+    order: 100,
+    ...componentsProps?.button,
+    onClick: (e) => {
+      setPinned((p) => !p);
+      componentsProps?.button?.onClick?.(e);
+    }
+  }, undefined, false, undefined, this), [pinned, componentsProps?.button]);
+  const element = /* @__PURE__ */ jsxDEV19(Box3, {
+    pos: "relative",
+    ref: containerRef,
+    "data-hidden": hidden,
+    h: "100%",
+    ...componentsProps?.container,
+    className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
+    children: [
+      controlsContainer === undefined ? /* @__PURE__ */ jsxDEV19(Controls, {
+        dragContainerRef: containerRef,
+        ...componentsProps?.controls,
+        children: controlButton
+      }, undefined, false, undefined, this) : controlsContainer !== null && /* @__PURE__ */ jsxDEV19(Portal2, {
+        target: controlsContainer,
+        children: controlButton
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+  if (!layout) {
+    return null;
+  }
+  if (pinned && layoutType === "frame" /* Frame */) {
+    return /* @__PURE__ */ jsxDEV19(FrameLayout_default.Element, {
+      layoutId,
+      section,
+      hidden,
+      ...componentsProps?.layoutElement,
+      children: element
+    }, undefined, false, undefined, this);
+  }
+  return element;
+}
+
+// src/core/components/WidgetSelectionHeader/index.tsx
+import { jsxDEV as jsxDEV20 } from "react/jsx-dev-runtime";
+function WidgetSelectionHeader({
+  title,
+  pinnableSection = "top" /* Top */,
+  initiallyPinned = true,
+  disabledWidgets,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  const mantineTheme = useMantineTheme2();
+  const {
+    activeWidget,
+    isPageRegistered,
+    updateWidgetSelectionBulk,
+    ...widgetsContext2
+  } = useWidgets();
+  const page = usePage();
+  if (!page) {
+    throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
+  }
+  const [hover, setHover] = useState8(false);
+  const [isPinned, setIsPinned] = useState8(initiallyPinned);
+  const handleEnter = () => {
+    setHover(true);
+  };
+  const handleLeave = () => {
+    setHover(false);
+  };
+  const scrollAreaRef = useRef3(null);
+  const widgets = widgetsContext2.widgets[page.pageId] ?? {};
+  const selectedWidgets = Object.entries(widgets).reduce((t, [widgetId, widget]) => widget?.selected ? [...t, widgetId] : t, []);
+  const element = /* @__PURE__ */ jsxDEV20(Flex3, {
+    justify: "flex-start",
+    align: "center",
+    gap: "md",
+    ...componentsProps?.container,
+    onMouseEnter: (e) => {
+      if (!pinnableSection) {
+        handleEnter();
+      }
+      componentsProps?.container?.onMouseEnter?.(e);
+    },
+    onMouseLeave: (e) => {
+      if (!pinnableSection) {
+        handleEnter();
+      }
+      componentsProps?.container?.onMouseEnter?.(e);
+    },
+    className: clsx_default(!pinnableSection ? "remoraid-non-widget-segment" : undefined, !pinnableSection ? "remoraid-segment" : undefined, componentsProps?.container?.className),
+    children: [
+      /* @__PURE__ */ jsxDEV20(Text, {
+        size: "md",
+        ...componentsProps?.title,
+        children: title ?? page.name
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV20(Divider2, {
+        orientation: "vertical"
+      }, undefined, false, undefined, this),
+      isPageRegistered(page.pageId) && /* @__PURE__ */ jsxDEV20(ScrollableChipGroup, {
+        value: selectedWidgets,
+        ref: scrollAreaRef,
+        ...componentsProps?.ScrollableChipGroup,
+        onChange: (value) => {
+          updateWidgetSelectionBulk(page.pageId, value);
+          componentsProps?.ScrollableChipGroup?.onChange?.(value);
+        },
+        componentsProps: import_lodash10.merge({ ScrollArea: { flex: 1 } }, componentsProps?.ScrollableChipGroup?.componentsProps),
+        children: Object.entries(widgets).map(([widgetId, widget]) => {
+          if (!widget) {
+            return;
+          }
+          return /* @__PURE__ */ jsxDEV20(Menu, {
+            ...import_lodash10.merge({}, theme.componentsProps.Menu, { trigger: "hover" }, componentsProps?.widgetMenu),
+            children: [
+              /* @__PURE__ */ jsxDEV20(Menu.Target, {
+                children: /* @__PURE__ */ jsxDEV20(Box4, {
+                  children: /* @__PURE__ */ jsxDEV20(Chip2, {
+                    variant: selectedWidgets.includes(widgetId) ? "filled" : "outline",
+                    color: activeWidget === widgetId ? mantineTheme.primaryColor : "gray",
+                    value: widgetId,
+                    size: "sm",
+                    disabled: disabledWidgets?.includes(widgetId),
+                    icon: /* @__PURE__ */ jsxDEV20(IconCheck, {
+                      ...theme.componentsProps.icons.small
+                    }, undefined, false, undefined, this),
+                    ...componentsProps?.Chip,
+                    styles: import_lodash10.merge({
+                      label: {
+                        transition: "background-color var(--remoraid-transition-duration-short)"
+                      }
+                    }, componentsProps?.Chip?.styles),
+                    id: `remoraid-widget-selection-header-chip-${widgetId}`,
+                    children: widget.name
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV20(Menu.Dropdown, {
+                children: [
+                  /* @__PURE__ */ jsxDEV20(Menu.Item, {
+                    leftSection: /* @__PURE__ */ jsxDEV20(IconNavigation, {
+                      ...theme.componentsProps.icons.small
+                    }, undefined, false, undefined, this),
+                    onClick: () => {
+                      scrollToWidget(widgetId);
+                      handleLeave();
+                    },
+                    disabled: !widget.selected,
+                    children: "Scroll to widget"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV20(Menu.Item, {
+                    leftSection: /* @__PURE__ */ jsxDEV20(IconFocus, {
+                      ...theme.componentsProps.icons.small
+                    }, undefined, false, undefined, this),
+                    onClick: () => {
+                      updateWidgetSelectionBulk(page.pageId, [widgetId]);
+                      handleLeave();
+                    },
+                    disabled: selectedWidgets.length === 1 && selectedWidgets.includes(widgetId),
+                    children: "Isolate widget"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, widgetId, true, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+  useEffect4(() => {
+    if (!activeWidget) {
+      return;
+    }
+    if (!isPinned) {
+      return;
+    }
+    if (!scrollAreaRef?.current) {
+      return;
+    }
+    const activeWidgetChipElement = scrollAreaRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
+    if (!activeWidgetChipElement) {
+      return;
+    }
+    activeWidgetChipElement.scrollIntoView({
+      behavior: "smooth",
+      inline: "center"
+    });
+  }, [activeWidget]);
+  if (pinnableSection) {
+    return /* @__PURE__ */ jsxDEV20(Pinnable, {
+      section: pinnableSection,
+      initialValue: initiallyPinned,
+      ...componentsProps?.Pinnable,
+      componentsProps: {
+        ...componentsProps?.Pinnable?.componentsProps,
+        container: {
+          ...componentsProps?.Pinnable?.componentsProps?.container,
+          onMouseEnter: (e) => {
+            handleEnter();
+            componentsProps?.Pinnable?.componentsProps?.container?.onMouseEnter?.(e);
+          },
+          onMouseLeave: (e) => {
+            handleLeave();
+            componentsProps?.Pinnable?.componentsProps?.container?.onMouseLeave?.(e);
+          },
+          className: clsx_default("remoraid-segment", "remoraid-non-widget-segment", componentsProps?.Pinnable?.componentsProps?.container?.className)
+        },
+        button: {
+          ...componentsProps?.Pinnable?.componentsProps?.button,
+          onClick: (e) => {
+            setIsPinned(!isPinned);
+            handleLeave();
+            componentsProps?.Pinnable?.componentsProps?.button?.onClick?.(e);
+          }
+        },
+        layoutElement: {
+          includeContainer: false,
+          includePageContainer: pinnableSection === "top" /* Top */ || pinnableSection === "bottom" /* Bottom */,
+          ...componentsProps?.Pinnable?.componentsProps?.layoutElement
+        },
+        controls: {
+          mounted: hover,
+          ...componentsProps?.Pinnable?.componentsProps?.controls
+        }
+      },
+      children: element
+    }, undefined, false, undefined, this);
+  }
+  return element;
+}
+// src/core/components/BadgeGroup/index.tsx
+import {
+  Badge as Badge2,
+  Group as Group4,
+  HoverCard,
+  Stack as Stack4,
+  Transition as Transition4
+} from "@mantine/core";
+import React7 from "react";
+
+// src/core/components/BadgeMinimal/index.tsx
+import {
+  Badge,
+  Tooltip as Tooltip3,
+  Transition as Transition3
+} from "@mantine/core";
+var import_lodash11 = __toESM(require_lodash(), 1);
+import { jsxDEV as jsxDEV21 } from "react/jsx-dev-runtime";
+function BadgeMinimal({
+  label,
+  tooltip,
+  mounted = true,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsxDEV21(Transition3, {
+    mounted,
+    transition: "fade",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV21(Tooltip3, {
+      ...import_lodash11.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
+      children: /* @__PURE__ */ jsxDEV21(Badge, {
+        variant: "default",
+        ...componentsProps?.badge,
+        style: {
+          ...transitionStyle,
+          cursor: "pointer",
+          ...componentsProps?.badge?.style
+        },
+        children: label
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/BadgeGroup/index.tsx
+var import_lodash12 = __toESM(require_lodash(), 1);
+import { jsxDEV as jsxDEV22, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+import { createElement } from "react";
+function BadgeGroup({
+  badges: badgesProp,
+  gap = "xs",
+  breakpoint: breakpointProp,
+  componentsProps
+}) {
+  const badges = badgesProp.map((badge) => asElementOrPropsOfType(BadgeMinimal, badge, "Check 'badges' property passed to 'BadgeGroup'."));
+  const theme = useRemoraidTheme();
+  const breakpoint = breakpointProp ?? theme.breakpoints.badgeGroupCollapse;
+  const numVisibleBadges = badges.filter((badge) => isValidElementOfType(BadgeMinimal, badge) ? badge.props.mounted : badge.mounted !== false).length;
+  const badgesElement = badges.map((badge, i) => {
+    if (isValidElementOfType(BadgeMinimal, badge)) {
+      return badge;
+    }
+    return /* @__PURE__ */ createElement(BadgeMinimal, {
+      ...badge,
+      key: i
+    });
+  });
+  return /* @__PURE__ */ jsxDEV22(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxDEV22(Group4, {
+        gap,
+        wrap: "nowrap",
+        visibleFrom: numVisibleBadges > 1 ? breakpoint : undefined,
+        ...componentsProps?.container,
+        className: clsx_default("remoraid-badge-group", componentsProps?.container?.className),
+        children: badgesElement
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV22(Transition4, {
+        mounted: numVisibleBadges > 1,
+        transition: "fade",
+        duration: theme.transitionDurations.short,
+        timingFunction: "ease",
+        ...componentsProps?.cumulativeBadgeTransition,
+        children: (transitionStyle) => /* @__PURE__ */ jsxDEV22(HoverCard, {
+          ...import_lodash12.merge({}, theme.componentsProps.HoverCard, componentsProps?.HoverCard),
+          children: [
+            /* @__PURE__ */ jsxDEV22(HoverCard.Target, {
+              children: /* @__PURE__ */ jsxDEV22(Badge2, {
+                hiddenFrom: breakpoint,
+                variant: "dot",
+                ...componentsProps?.cumulativeBadge,
+                style: {
+                  cursor: "pointer",
+                  ...import_lodash12.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
+                },
+                children: [
+                  numVisibleBadges,
+                  " badges"
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV22(HoverCard.Dropdown, {
+              p: gap,
+              children: /* @__PURE__ */ jsxDEV22(Stack4, {
+                gap,
                 ...componentsProps?.hoverContainer,
                 children: badgesElement
               }, undefined, false, undefined, this)
@@ -6797,9 +7267,9 @@ function BadgeGroup({
   }, undefined, true, undefined, this);
 }
 // src/core/components/AlertMinimal/index.tsx
-import { Alert, Transition as Transition3 } from "@mantine/core";
-var import_lodash10 = __toESM(require_lodash(), 1);
-import { jsxDEV as jsxDEV20 } from "react/jsx-dev-runtime";
+import { Alert, Transition as Transition5 } from "@mantine/core";
+var import_lodash13 = __toESM(require_lodash(), 1);
+import { jsxDEV as jsxDEV23 } from "react/jsx-dev-runtime";
 function AlertMinimal({
   category,
   children,
@@ -6812,26 +7282,26 @@ function AlertMinimal({
     color,
     onClose,
     mounted = true,
-    icon: Icon2,
+    icon: Icon3,
     iconSize = "medium" /* Medium */,
     componentsProps
-  } = import_lodash10.merge({}, theme.componentsProps.alerts[category], props);
-  return /* @__PURE__ */ jsxDEV20(Transition3, {
+  } = import_lodash13.merge({}, theme.componentsProps.alerts[category], props);
+  return /* @__PURE__ */ jsxDEV23(Transition5, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsxDEV20(Alert, {
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV23(Alert, {
       title,
       color,
       variant: "light",
       onClose,
       withCloseButton: onClose !== undefined,
-      icon: Icon2 ? /* @__PURE__ */ jsxDEV20(Icon2, {
-        ...import_lodash10.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+      icon: Icon3 ? /* @__PURE__ */ jsxDEV23(Icon3, {
+        ...import_lodash13.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
       }, undefined, false, undefined, this) : undefined,
-      style: import_lodash10.merge(transitionStyle, componentsProps?.alert?.style),
+      style: import_lodash13.merge(transitionStyle, componentsProps?.alert?.style),
       children: [
         text,
         children
@@ -6840,333 +7310,98 @@ function AlertMinimal({
   }, undefined, false, undefined, this);
 }
 // src/core/components/RemoraidButton/index.tsx
-import {
-  ActionIcon,
-  Button,
-  Tooltip as Tooltip3,
-  Transition as Transition4
-} from "@mantine/core";
-import { IconClick } from "@tabler/icons-react";
-var import_lodash11 = __toESM(require_lodash(), 1);
-import { jsxDEV as jsxDEV21, Fragment as Fragment3 } from "react/jsx-dev-runtime";
-function RemoraidButton({
-  label,
-  responsive: ResponsiveProp,
-  breakpoint: breakpointProp,
-  collapsed: collapsedProp,
-  size = "sm",
-  color,
-  onClick,
-  loading,
-  variant = "default",
-  mounted = true,
-  icon: iconProp,
-  iconSize: iconSizeProp,
-  componentsProps
-}) {
-  const responsive = ResponsiveProp ?? true;
-  const breakpoint = breakpointProp ?? "md";
-  const collapsed = collapsedProp ?? false;
-  const iconSize = iconSizeProp ?? getDefaultButtonIconSize(size);
-  const Icon3 = iconProp ?? IconClick;
-  const theme = useRemoraidTheme();
-  const iconElement = /* @__PURE__ */ jsxDEV21(Icon3, {
-    ...import_lodash11.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
-  }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsxDEV21(Transition4, {
-    mounted,
-    transition: "fade",
-    duration: theme.transitionDurations.short,
-    timingFunction: "ease",
-    ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsxDEV21(Fragment3, {
-      children: [
-        /* @__PURE__ */ jsxDEV21(Tooltip3, {
-          ...import_lodash11.merge({}, theme.componentsProps.Tooltip, { label }, componentsProps?.tooltip),
-          children: /* @__PURE__ */ jsxDEV21(ActionIcon, {
-            "aria-label": label,
-            variant,
-            onClick,
-            loading,
-            size: size ? `input-${size}` : "input-sm",
-            color,
-            ...componentsProps?.button,
-            ...componentsProps?.ActionIcon,
-            hiddenFrom: !responsive ? undefined : breakpoint,
-            display: !responsive && !collapsed ? "none" : componentsProps?.ActionIcon?.display ?? componentsProps?.button?.display,
-            style: {
-              ...transitionStyle,
-              ...componentsProps?.ActionIcon?.style ?? componentsProps?.button?.style
-            },
-            children: iconElement
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV21(Button, {
-          onClick,
-          loading,
-          variant,
-          size,
-          color,
-          leftSection: iconProp ? iconElement : undefined,
-          ...componentsProps?.button,
-          ...componentsProps?.Button,
-          visibleFrom: !responsive ? undefined : breakpoint,
-          display: !responsive && collapsed ? "none" : componentsProps?.Button?.display ?? componentsProps?.button?.display,
-          style: {
-            ...transitionStyle,
-            ...componentsProps?.Button?.style ?? componentsProps?.button?.style
-          },
-          children: label
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-// src/core/components/Controls/ControlButton/index.tsx
 import {
   ActionIcon as ActionIcon2,
+  Button,
   Tooltip as Tooltip4,
-  Transition as Transition5
-} from "@mantine/core";
-import { IconClick as IconClick2 } from "@tabler/icons-react";
-var import_lodash12 = __toESM(require_lodash(), 1);
-import { jsxDEV as jsxDEV22 } from "react/jsx-dev-runtime";
-function ControlButton({
-  icon: Icon4 = IconClick2,
-  mounted = true,
-  size = "xs",
-  iconSize = "tiny" /* Tiny */,
-  onClick,
-  order,
-  color,
-  tooltip,
-  componentsProps
-}) {
-  const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsxDEV22(Transition5, {
-    mounted,
-    transition: "fade",
-    duration: theme.transitionDurations.short,
-    timingFunction: "ease",
-    ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsxDEV22(Tooltip4, {
-      ...import_lodash12.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
-      children: /* @__PURE__ */ jsxDEV22(ActionIcon2, {
-        "data-control-button": true,
-        size,
-        color,
-        onClick,
-        radius: "xl",
-        ...componentsProps?.button,
-        style: {
-          order,
-          ...import_lodash12.merge(transitionStyle, componentsProps?.button?.style)
-        },
-        children: /* @__PURE__ */ jsxDEV22(Icon4, {
-          ...import_lodash12.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/core/components/Controls/index.tsx
-import { useRef, useState as useState6 } from "react";
-import {
-  Group as Group4,
-  Paper as Paper2,
   Transition as Transition6
 } from "@mantine/core";
-import { IconGripHorizontal } from "@tabler/icons-react";
-var import_lodash13 = __toESM(require_lodash(), 1);
-import { jsxDEV as jsxDEV23 } from "react/jsx-dev-runtime";
-function Controls({
-  groupRef,
+import { IconClick as IconClick2 } from "@tabler/icons-react";
+var import_lodash14 = __toESM(require_lodash(), 1);
+import { jsxDEV as jsxDEV24, Fragment as Fragment3 } from "react/jsx-dev-runtime";
+function RemoraidButton({
+  label,
+  responsive: ResponsiveProp,
+  breakpoint: breakpointProp,
+  collapsed: collapsedProp,
+  size = "sm",
+  color,
+  onClick,
+  loading,
+  variant = "default",
   mounted = true,
-  dragContainerRef,
-  gutter = 5,
-  iconSize = "tiny" /* Tiny */,
-  additionalButtons: additionalButtonsProp,
-  componentsProps,
-  children: childrenProp
+  icon: iconProp,
+  iconSize: iconSizeProp,
+  componentsProps
 }) {
-  const additionalButtons = additionalButtonsProp?.map((additionalButton) => asElementOrPropsOfType(ControlButton, additionalButton, "Check the 'additionalButtons' property of 'Controls'."));
-  const children = asChildrenOfType(ControlButton, childrenProp, "Check children passed to 'Controls' component.");
+  const responsive = ResponsiveProp ?? true;
+  const breakpoint = breakpointProp ?? "md";
+  const collapsed = collapsedProp ?? false;
+  const iconSize = iconSizeProp ?? getDefaultButtonIconSize(size);
+  const Icon4 = iconProp ?? IconClick2;
   const theme = useRemoraidTheme();
-  const [pos, setPos] = useState6({
-    x: 0,
-    y: 0
-  });
-  const offsetRef = useRef({ x: 0, y: 0 });
-  const containerRef = useRef(null);
-  const clamp = (v, min, max) => {
-    return Math.min(Math.max(v, min), max);
-  };
-  const handlePointerDown = (e) => {
-    if (e.target instanceof Element && e.target.closest("button,[data-control-button]")) {
-      return;
-    }
-    if (!containerRef.current) {
-      return;
-    }
-    const paperRect = containerRef.current.getBoundingClientRect();
-    offsetRef.current = {
-      x: e.clientX - paperRect.right,
-      y: e.clientY - paperRect.top
-    };
-    e.currentTarget.setPointerCapture(e.pointerId);
-  };
-  const handlePointerMove = (e) => {
-    if (!e.currentTarget.hasPointerCapture(e.pointerId)) {
-      return;
-    }
-    if (!containerRef.current || !dragContainerRef.current) {
-      return;
-    }
-    const boxRect = dragContainerRef.current.getBoundingClientRect();
-    const paperRect = containerRef.current.getBoundingClientRect();
-    const rawX = e.clientX - boxRect.right - offsetRef.current.x;
-    const rawY = e.clientY - boxRect.top - offsetRef.current.y;
-    const maxX = boxRect.width - paperRect.width;
-    const maxY = boxRect.height - paperRect.height;
-    setPos({
-      x: clamp(-rawX, 0, maxX),
-      y: clamp(rawY, 0, maxY)
-    });
-  };
-  const handlePointerUp = (e) => {
-    e.currentTarget.releasePointerCapture(e.pointerId);
-  };
-  return /* @__PURE__ */ jsxDEV23(Transition6, {
+  const iconElement = /* @__PURE__ */ jsxDEV24(Icon4, {
+    ...import_lodash14.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV24(Transition6, {
     mounted,
-    keepMounted: true,
-    transition: "pop",
+    transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsxDEV23(Paper2, {
-      ref: containerRef,
-      pos: "absolute",
-      p: gutter,
-      bg: theme.transparentBackground,
-      shadow: "md",
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      ...componentsProps?.container,
-      style: {
-        right: pos.x,
-        top: pos.y,
-        ...import_lodash13.merge(transitionStyle, componentsProps?.container?.style)
-      },
-      className: clsx_default("remoraid-controls", componentsProps?.container?.className),
-      children: /* @__PURE__ */ jsxDEV23(Group4, {
-        gap: gutter,
-        ref: groupRef,
-        wrap: "nowrap",
-        ...componentsProps?.group,
-        className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
-        children: [
-          /* @__PURE__ */ jsxDEV23(IconGripHorizontal, {
-            ...import_lodash13.merge({}, theme.componentsProps.icons[iconSize], { order: -100, color: "var(--mantine-color-default-border)" }, componentsProps?.gripIcon)
-          }, undefined, false, undefined, this),
-          children,
-          additionalButtons && additionalButtons.map((button, i) => {
-            if (isValidElementOfType(ControlButton, button)) {
-              return button;
-            }
-            return /* @__PURE__ */ jsxDEV23(ControlButton, {
-              ...button
-            }, i, false, undefined, this);
-          })
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this)
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV24(Fragment3, {
+      children: [
+        /* @__PURE__ */ jsxDEV24(Tooltip4, {
+          ...import_lodash14.merge({}, theme.componentsProps.Tooltip, { label }, componentsProps?.tooltip),
+          children: /* @__PURE__ */ jsxDEV24(ActionIcon2, {
+            "aria-label": label,
+            variant,
+            onClick,
+            loading,
+            size: size ? `input-${size}` : "input-sm",
+            color,
+            ...componentsProps?.button,
+            ...componentsProps?.ActionIcon,
+            hiddenFrom: !responsive ? undefined : breakpoint,
+            display: !responsive && !collapsed ? "none" : componentsProps?.ActionIcon?.display ?? componentsProps?.button?.display,
+            style: {
+              ...transitionStyle,
+              ...componentsProps?.ActionIcon?.style ?? componentsProps?.button?.style
+            },
+            children: iconElement
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV24(Button, {
+          onClick,
+          loading,
+          variant,
+          size,
+          color,
+          leftSection: iconProp ? iconElement : undefined,
+          ...componentsProps?.button,
+          ...componentsProps?.Button,
+          visibleFrom: !responsive ? undefined : breakpoint,
+          display: !responsive && collapsed ? "none" : componentsProps?.Button?.display ?? componentsProps?.button?.display,
+          style: {
+            ...transitionStyle,
+            ...componentsProps?.Button?.style ?? componentsProps?.button?.style
+          },
+          children: label
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
 // src/core/components/Widget/WidgetWrapper/index.tsx
 import { Paper as Paper3, Transition as Transition7 } from "@mantine/core";
 import {
   useCallback as useCallback2,
-  useEffect as useEffect4,
-  useRef as useRef3,
-  useState as useState8
+  useEffect as useEffect5,
+  useRef as useRef4,
+  useState as useState9
 } from "react";
 import { IconX } from "@tabler/icons-react";
-
-// src/core/components/Pinnable/index.tsx
-import {
-  useMemo as useMemo4,
-  useRef as useRef2,
-  useState as useState7
-} from "react";
-import { IconPin, IconPinnedOff } from "@tabler/icons-react";
-import { Box as Box3, Portal as Portal2 } from "@mantine/core";
-import { jsxDEV as jsxDEV24 } from "react/jsx-dev-runtime";
-function Pinnable({
-  layoutType: layoutTypeProp,
-  section,
-  initialValue = false,
-  layoutId,
-  controlsContainer,
-  hidden = false,
-  componentsProps,
-  children
-}) {
-  const layoutType = layoutTypeProp ?? "frame" /* Frame */;
-  const { layouts } = useLayouts();
-  const [pinned, setPinned] = useState7(initialValue);
-  const containerRef = useRef2(null);
-  const layout = layouts[layoutId ?? remoraidAppShellLayoutId];
-  if (layout && layout.type !== layoutType) {
-    throw new TypeError(`Prop 'layoutId' in '${Pinnable.name}' refers to a layout of type ${layout.type}, expected ${layoutType}. Leave 'layoutId' undefined, if you want to use the layout in '${AppShell_default.name}' as reference layout.`);
-  }
-  const controlButton = useMemo4(() => /* @__PURE__ */ jsxDEV24(ControlButton, {
-    icon: pinned ? IconPinnedOff : IconPin,
-    tooltip: pinned ? "Unpin" : "Pin",
-    color: "green",
-    order: 100,
-    ...componentsProps?.button,
-    onClick: (e) => {
-      setPinned((p) => !p);
-      componentsProps?.button?.onClick?.(e);
-    }
-  }, undefined, false, undefined, this), [pinned, componentsProps?.button]);
-  const element = /* @__PURE__ */ jsxDEV24(Box3, {
-    pos: "relative",
-    ref: containerRef,
-    "data-hidden": hidden,
-    ...componentsProps?.container,
-    className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
-    children: [
-      controlsContainer === undefined ? /* @__PURE__ */ jsxDEV24(Controls, {
-        dragContainerRef: containerRef,
-        ...componentsProps?.controls,
-        children: controlButton
-      }, undefined, false, undefined, this) : controlsContainer !== null && /* @__PURE__ */ jsxDEV24(Portal2, {
-        target: controlsContainer,
-        children: controlButton
-      }, undefined, false, undefined, this),
-      children
-    ]
-  }, undefined, true, undefined, this);
-  if (!layout) {
-    return null;
-  }
-  if (pinned && layoutType === "frame" /* Frame */) {
-    return /* @__PURE__ */ jsxDEV24(FrameLayout_default.Element, {
-      layoutId,
-      section,
-      hidden,
-      ...componentsProps?.layoutElement,
-      children: element
-    }, undefined, false, undefined, this);
-  }
-  return element;
-}
-
-// src/core/components/Widget/WidgetWrapper/index.tsx
-var import_lodash14 = __toESM(require_lodash(), 1);
+var import_lodash15 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV25 } from "react/jsx-dev-runtime";
 function WidgetWrapper({
   config,
@@ -7177,7 +7412,8 @@ function WidgetWrapper({
   children
 }) {
   const {
-    isWidgetSelected,
+    widgets,
+    hideWidget,
     isPageRegistered,
     isWidgetRegistered,
     registerWidget,
@@ -7187,11 +7423,10 @@ function WidgetWrapper({
   } = useWidgets();
   const page = usePage();
   const theme = useRemoraidTheme();
-  const mounted = page !== null && isWidgetSelected(page.pageId, config.widgetId);
-  const [controlsContainer, setControlsContainer] = useState8(null);
-  const [hidden, setHidden] = useState8(!mounted);
+  const [controlsContainer, setControlsContainer] = useState9(null);
+  const widget = page ? widgets[page.pageId]?.[config.widgetId] : undefined;
   const pageRegistered = page ? isPageRegistered(page.pageId) : false;
-  const containerRef = useRef3(null);
+  const containerRef = useRef4(null);
   const controlsContainerRef = useCallback2((n) => {
     setControlsContainer(n);
   }, [setControlsContainer]);
@@ -7201,6 +7436,7 @@ function WidgetWrapper({
   const handleLeave = () => {
     updateActiveWidget(null);
   };
+  const mounted = Boolean(widget?.selected);
   let element = /* @__PURE__ */ jsxDEV25(Transition7, {
     mounted,
     transition: "fade-left",
@@ -7208,7 +7444,9 @@ function WidgetWrapper({
     timingFunction: "ease",
     ...componentsProps?.transition,
     onExited: () => {
-      setHidden(true);
+      if (page) {
+        hideWidget(page.pageId, config.widgetId);
+      }
       componentsProps?.transition?.onExited?.();
     },
     children: (transitionStyle) => /* @__PURE__ */ jsxDEV25(Paper3, {
@@ -7219,6 +7457,8 @@ function WidgetWrapper({
       mt,
       pos: "relative",
       h: "fit-content",
+      mah: "100%",
+      display: "flex",
       ...componentsProps?.container,
       onMouseEnter: (e) => {
         if (!pinnableSection) {
@@ -7232,7 +7472,8 @@ function WidgetWrapper({
         }
         componentsProps?.container?.onMouseLeave?.(e);
       },
-      style: import_lodash14.merge(transitionStyle, componentsProps?.container?.style),
+      style: import_lodash15.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
+      className: clsx_default("remoraid-segment", componentsProps?.container?.className),
       id: config.widgetId,
       children: [
         /* @__PURE__ */ jsxDEV25(Controls, {
@@ -7247,6 +7488,13 @@ function WidgetWrapper({
             color: "red",
             order: 200,
             ...componentsProps?.closeButton,
+            componentsProps: {
+              ...componentsProps?.closeButton?.componentsProps,
+              tooltip: {
+                disabled: !mounted,
+                ...componentsProps?.closeButton?.componentsProps?.tooltip
+              }
+            },
             onClick: (e) => {
               if (!page) {
                 return;
@@ -7265,7 +7513,7 @@ function WidgetWrapper({
     element = /* @__PURE__ */ jsxDEV25(Pinnable, {
       section: pinnableSection,
       controlsContainer,
-      hidden,
+      hidden: Boolean(widget?.hidden),
       ...componentsProps?.Pinnable,
       componentsProps: {
         ...componentsProps?.Pinnable?.componentsProps,
@@ -7296,7 +7544,7 @@ function WidgetWrapper({
       children: element
     }, undefined, false, undefined, this);
   }
-  useEffect4(() => {
+  useEffect5(() => {
     if (!page) {
       return;
     }
@@ -7304,16 +7552,6 @@ function WidgetWrapper({
       registerWidget(page.pageId, config);
     }
   }, [pageRegistered]);
-  useEffect4(() => {
-    if (mounted) {
-      const id = requestAnimationFrame(() => {
-        setHidden(false);
-      });
-      return () => {
-        cancelAnimationFrame(id);
-      };
-    }
-  }, [mounted]);
   return element;
 }
 // src/core/components/Widget/index.tsx
@@ -7323,9 +7561,12 @@ import {
   Group as Group5,
   Loader,
   Title,
-  Stack as Stack5
+  Stack as Stack5,
+  Box as Box5,
+  ScrollArea as ScrollArea3
 } from "@mantine/core";
-import { jsxDEV as jsxDEV26, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+var import_lodash16 = __toESM(require_lodash(), 1);
+import { jsxDEV as jsxDEV26 } from "react/jsx-dev-runtime";
 import { createElement as createElement2 } from "react";
 function Widget({
   id,
@@ -7344,6 +7585,7 @@ function Widget({
   const buttons = buttonsProp?.map((button) => asElementOrPropsOfType(RemoraidButton, button, "Check the 'buttons' property of this widget."));
   const alerts = alertsProp?.map((alert) => asElementOrPropsOfType(AlertMinimal, alert, "Check the 'alerts' property of this widget."));
   const badges = badgesProp?.map((badge) => asElementOrPropsOfType(BadgeMinimal, badge, "Check the 'badges' property of this widget."));
+  const theme = useRemoraidTheme();
   const badgesGap = (typeof gaps === "object" ? gaps.badges : gaps) ?? "xs";
   const buttonsGap = (typeof gaps === "object" ? gaps.buttons : gaps) ?? "xs";
   const alertsGap = (typeof gaps === "object" ? gaps.alerts : gaps) ?? "xs";
@@ -7359,72 +7601,79 @@ function Widget({
     mt,
     ...componentsProps?.wrapper,
     pinnableSection: pinnableSection ?? componentsProps?.wrapper?.pinnableSection,
-    children: [
-      /* @__PURE__ */ jsxDEV26(Group5, {
-        justify: "space-between",
-        wrap: "nowrap",
-        children: [
-          /* @__PURE__ */ jsxDEV26(Group5, {
-            gap: badgesGap,
-            wrap: "nowrap",
-            children: [
-              /* @__PURE__ */ jsxDEV26(Title, {
-                order: 1,
-                size: "h2",
-                lineClamp: 1,
-                ...componentsProps?.title,
-                children: title ?? id
-              }, undefined, false, undefined, this),
-              badges !== undefined && /* @__PURE__ */ jsxDEV26(BadgeGroup, {
-                badges,
-                gap: badgesGap,
-                ...componentsProps?.badgeGroup
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV26(Group5, {
-            gap: buttonsGap,
-            wrap: "nowrap",
-            children: buttons !== undefined && buttons.map((button, i) => {
-              if (isValidElementOfType(RemoraidButton, button)) {
-                return button;
-              }
-              return /* @__PURE__ */ createElement2(RemoraidButton, {
-                ...button,
-                key: i
-              });
-            })
+    children: /* @__PURE__ */ jsxDEV26(Stack5, {
+      gap: "md",
+      mih: 0,
+      ...componentsProps?.contentContainer,
+      children: [
+        /* @__PURE__ */ jsxDEV26(Group5, {
+          justify: "space-between",
+          wrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsxDEV26(Group5, {
+              gap: badgesGap,
+              wrap: "nowrap",
+              children: [
+                /* @__PURE__ */ jsxDEV26(Title, {
+                  order: 1,
+                  size: "h2",
+                  lineClamp: 1,
+                  ...componentsProps?.title,
+                  children: title ?? id
+                }, undefined, false, undefined, this),
+                badges !== undefined && /* @__PURE__ */ jsxDEV26(BadgeGroup, {
+                  badges,
+                  gap: badgesGap,
+                  ...componentsProps?.badgeGroup
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV26(Group5, {
+              gap: buttonsGap,
+              wrap: "nowrap",
+              children: buttons !== undefined && buttons.map((button, i) => {
+                if (isValidElementOfType(RemoraidButton, button)) {
+                  return button;
+                }
+                return /* @__PURE__ */ createElement2(RemoraidButton, {
+                  ...button,
+                  key: i
+                });
+              })
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV26(Box5, {
+          children: /* @__PURE__ */ jsxDEV26(Divider3, {
+            ...componentsProps?.divider
           }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV26(Divider3, {
-        my: "md",
-        ...componentsProps?.divider
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV26(Stack5, {
-        align: "stretch",
-        gap: alertsGap,
-        mb: alerts && alerts.length > 0 ? "md" : 0,
-        ...componentsProps?.alertsContainer,
-        children: alerts?.map((alert, i) => {
-          if (isValidElementOfType(AlertMinimal, alert)) {
-            return alert;
-          }
-          return /* @__PURE__ */ createElement2(AlertMinimal, {
-            ...alert,
-            key: i
-          });
-        })
-      }, undefined, false, undefined, this),
-      loading ? /* @__PURE__ */ jsxDEV26(Center, {
-        children: /* @__PURE__ */ jsxDEV26(Loader, {
-          ...componentsProps?.loader
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV26(Stack5, {
+          align: "stretch",
+          gap: alertsGap,
+          ...componentsProps?.alertsContainer,
+          className: clsx_default("remoraid-widget-alerts-container", componentsProps?.alertsContainer?.className),
+          children: alerts?.map((alert, i) => {
+            if (isValidElementOfType(AlertMinimal, alert)) {
+              return alert;
+            }
+            return /* @__PURE__ */ createElement2(AlertMinimal, {
+              ...alert,
+              key: i
+            });
+          })
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV26(ScrollArea3.Autosize, {
+          ...import_lodash16.merge(theme.componentsProps.ScrollArea, { flex: 1 }, componentsProps?.childrenContainer),
+          children: loading ? /* @__PURE__ */ jsxDEV26(Center, {
+            children: /* @__PURE__ */ jsxDEV26(Loader, {
+              ...componentsProps?.loader
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this) : children
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV26(Fragment4, {
-        children
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 // src/core/components/NotFoundPage/index.tsx
 import { usePathname as usePathname3 } from "next/navigation";
@@ -7643,7 +7892,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash15 = __toESM(require_lodash(), 1);
+var import_lodash17 = __toESM(require_lodash(), 1);
 import { Chip as Chip3, Group as Group7 } from "@mantine/core";
 import { IconLink as IconLink2 } from "@tabler/icons-react";
 import { jsxDEV as jsxDEV33 } from "react/jsx-dev-runtime";
@@ -7669,7 +7918,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash15.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash17.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsxDEV33(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -7698,6 +7947,7 @@ function NavbarSettingsWidget({
                     color: "var(--mantine-primary-color-filled)"
                   }, undefined, false, undefined, this),
                   variant: "outline",
+                  size: "sm",
                   children: label
                 }, i, false, undefined, this);
               })
@@ -7771,11 +8021,13 @@ export {
   useHydrationStatus,
   useHydratedMantineColorScheme,
   useFrameLayout,
+  scrollToWidget,
   remoraidAppShellLayoutId,
   isValidElementOfType,
   getElementTypeName,
   getDefaultWidgetContext,
   getDefaultButtonIconSize,
+  getCssVars,
   defaultUserExperienceCookieName,
   defaultUserExperience,
   defaultSettingsWidgetContext as defaultSettingsWidgetOptions,