remoraid 2.20.2 → 2.26.4

package/dist/core/index.cjs

@@ -5472,11 +5472,13 @@ __export(exports_core, {
   useHydrationStatus: () => useHydrationStatus,
   useHydratedMantineColorScheme: () => useHydratedMantineColorScheme,
   useFrameLayout: () => useFrameLayout,
+  scrollToWidget: () => scrollToWidget,
   remoraidAppShellLayoutId: () => remoraidAppShellLayoutId,
   isValidElementOfType: () => isValidElementOfType,
   getElementTypeName: () => getElementTypeName,
   getDefaultWidgetContext: () => getDefaultWidgetContext,
   getDefaultButtonIconSize: () => getDefaultButtonIconSize,
+  getCssVars: () => getCssVars,
   defaultUserExperienceCookieName: () => defaultUserExperienceCookieName,
   defaultUserExperience: () => defaultUserExperience,
   defaultSettingsWidgetOptions: () => defaultSettingsWidgetContext,
@@ -5534,7 +5536,10 @@ module.exports = __toCommonJS(exports_core);
 var import_lodash = __toESM(require_lodash());
 var import_react = __toESM(require("react"));
 var jsx_dev_runtime = require("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 = import_react.default.createContext({
   widgets: {},
   activeWidget: null,
@@ -5545,7 +5550,8 @@ var widgetsContext = import_react.default.createContext({
   isPageRegistered: () => false,
   updateWidgetSelection: () => {},
   updateWidgetSelectionBulk: () => {},
-  isWidgetSelected: () => false
+  isWidgetSelected: () => false,
+  hideWidget: () => {}
 });
 var useWidgets = () => {
   return import_react.useContext(widgetsContext);
@@ -5563,38 +5569,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) => ({
@@ -5640,10 +5665,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__ */ jsx_dev_runtime.jsxDEV(widgetsContext.Provider, {
     value: {
@@ -5656,7 +5692,8 @@ function WidgetsProvider({
       registerWidget,
       registerPage,
       isWidgetRegistered,
-      isPageRegistered
+      isPageRegistered,
+      hideWidget
     },
     children
   }, undefined, false, undefined, this);
@@ -5749,6 +5786,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
 var import_core2 = require("@mantine/core");
@@ -5812,6 +5859,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,
@@ -5857,27 +5905,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 = import_react4.default.createContext(createRemoraidTheme());
 var useRemoraidTheme = () => {
   return import_react4.useContext(themeContext);
@@ -5895,6 +5968,14 @@ function ThemeProvider({
     };
     return createRemoraidTheme(typeof theme === "function" ? theme(dependencies) : theme, dependencies);
   }, [colorScheme, theme]);
+  import_react4.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__ */ jsx_dev_runtime3.jsxDEV(themeContext.Provider, {
     value: remoraidTheme,
     children
@@ -6590,7 +6671,7 @@ var AppShell_default = Object.assign(AppShell, {
   FooterMinimal
 });
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_core11 = require("@mantine/core");
+var import_core14 = require("@mantine/core");
 
 // src/core/components/Page/index.tsx
 var import_core9 = require("@mantine/core");
@@ -6634,7 +6715,8 @@ function Page({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_icons_react4 = require("@tabler/icons-react");
+var import_icons_react7 = require("@tabler/icons-react");
+var import_react14 = require("react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
 var import_core10 = require("@mantine/core");
@@ -6642,15 +6724,16 @@ var import_lodash7 = __toESM(require_lodash());
 var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
 function ScrollableChipGroup({
   value,
+  ref,
   onChange,
-  gap,
+  gap = "xs",
   componentsProps,
-  children: childrenProp
+  children
 }) {
-  const children = asChildrenOfType(import_core10.Chip, childrenProp, "Check children passed to 'ScrollableChipGroup' component.");
   const theme = useRemoraidTheme();
   return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.ScrollArea, {
-    ...import_lodash7.merge({}, theme.componentsProps.ScrollArea, componentsProps?.ScrollArea),
+    ref,
+    ...import_lodash7.merge({}, theme.componentsProps.ScrollArea, { style: { contain: "inline-size" } }, componentsProps?.ScrollArea),
     children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Chip.Group, {
       value,
       onChange,
@@ -6659,7 +6742,7 @@ function ScrollableChipGroup({
       children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Flex, {
         justify: "flex-start",
         align: "center",
-        gap: gap ?? "xs",
+        gap,
         h: "auto",
         ...componentsProps?.container,
         children
@@ -6669,211 +6752,579 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var jsx_dev_runtime17 = require("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__ */ jsx_dev_runtime17.jsxDEV(import_core11.Flex, {
-    justify: "flex-start",
-    align: "center",
-    gap: "xs",
-    mt,
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Text, {
-        size: "lg",
-        fw: 400,
-        children: title ?? page.name
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Divider, {
-        orientation: "vertical"
-      }, undefined, false, undefined, this),
-      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(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__ */ jsx_dev_runtime17.jsxDEV(import_core11.Chip, {
-            value: widgetId,
-            size: "sm",
-            disabled: disabledWidgets && disabledWidgets.includes(widgetId),
-            icon: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_icons_react4.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());
+
+// src/core/components/Pinnable/index.tsx
+var import_react13 = require("react");
+var import_icons_react6 = require("@tabler/icons-react");
 var import_core13 = require("@mantine/core");
-var import_react12 = __toESM(require("react"));
 
-// src/core/components/BadgeMinimal/index.tsx
-var import_core12 = require("@mantine/core");
+// src/core/components/Controls/ControlButton/index.tsx
+var import_core11 = require("@mantine/core");
+var import_icons_react4 = require("@tabler/icons-react");
 var import_lodash8 = __toESM(require_lodash());
-var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
-function BadgeMinimal({
-  label,
-  tooltip,
+var jsx_dev_runtime17 = require("react/jsx-dev-runtime");
+function ControlButton({
+  icon: Icon3 = import_icons_react4.IconClick,
   mounted = true,
+  size = "xs",
+  iconSize = "tiny" /* Tiny */,
+  onClick,
+  order,
+  color,
+  tooltip,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.Tooltip, {
       ...import_lodash8.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
-      children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Badge, {
-        variant: "default",
-        ...componentsProps?.badge,
+      children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core11.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__ */ jsx_dev_runtime17.jsxDEV(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
+var import_react12 = require("react");
+var import_core12 = require("@mantine/core");
+var import_icons_react5 = require("@tabler/icons-react");
 var import_lodash9 = __toESM(require_lodash());
-var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
-var react = require("react");
-function BadgeGroup({
-  badges: badgesProp,
-  gap = "xs",
-  breakpoint: breakpointProp,
-  componentsProps
+var jsx_dev_runtime18 = require("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] = import_react12.useState({
+    x: 0,
+    y: 0
+  });
+  const offsetRef = import_react12.useRef({ x: 0, y: 0 });
+  const containerRef = import_react12.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__ */ react.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__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Group, {
-        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__ */ jsx_dev_runtime19.jsxDEV(import_core13.Transition, {
-        mounted: numVisibleBadges > 1,
-        transition: "fade",
-        duration: theme.transitionDurations.short,
-        timingFunction: "ease",
-        ...componentsProps?.cumulativeBadgeTransition,
-        children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.HoverCard, {
-          ...import_lodash9.merge({}, theme.componentsProps.HoverCard, componentsProps?.HoverCard),
-          children: [
-            /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.HoverCard.Target, {
-              children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Badge, {
-                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__ */ jsx_dev_runtime19.jsxDEV(import_core13.HoverCard.Dropdown, {
-              p: gap,
-              children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Stack, {
-                gap,
-                ...componentsProps?.hoverContainer,
-                children: badgesElement
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-// src/core/components/AlertMinimal/index.tsx
-var import_core14 = require("@mantine/core");
-var import_lodash10 = __toESM(require_lodash());
-var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
-function AlertMinimal({
-  category,
-  children,
-  ...props
-}) {
-  const theme = useRemoraidTheme();
-  const {
-    title,
-    text,
-    color,
-    onClose,
-    mounted = true,
-    icon: Icon2,
-    iconSize = "medium" /* Medium */,
-    componentsProps
-  } = import_lodash10.merge({}, theme.componentsProps.alerts[category], props);
-  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Transition, {
+  };
+  const handlePointerUp = (e) => {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  };
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Transition, {
     mounted,
-    transition: "fade",
+    keepMounted: true,
+    transition: "pop",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Alert, {
-      title,
-      color,
-      variant: "light",
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Paper, {
+      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__ */ jsx_dev_runtime18.jsxDEV(import_core12.Group, {
+        gap: gutter,
+        ref: groupRef,
+        wrap: "nowrap",
+        ...componentsProps?.group,
+        className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_icons_react5.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__ */ jsx_dev_runtime18.jsxDEV(ControlButton, {
+              ...button
+            }, i, false, undefined, this);
+          })
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/Pinnable/index.tsx
+var jsx_dev_runtime19 = require("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] = import_react13.useState(initialValue);
+  const containerRef = import_react13.useRef(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 = import_react13.useMemo(() => /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(ControlButton, {
+    icon: pinned ? import_icons_react6.IconPinnedOff : import_icons_react6.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__ */ jsx_dev_runtime19.jsxDEV(import_core13.Box, {
+    pos: "relative",
+    ref: containerRef,
+    "data-hidden": hidden,
+    h: "100%",
+    ...componentsProps?.container,
+    className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
+    children: [
+      controlsContainer === undefined ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Controls, {
+        dragContainerRef: containerRef,
+        ...componentsProps?.controls,
+        children: controlButton
+      }, undefined, false, undefined, this) : controlsContainer !== null && /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Portal, {
+        target: controlsContainer,
+        children: controlButton
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+  if (!layout) {
+    return null;
+  }
+  if (pinned && layoutType === "frame" /* Frame */) {
+    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(FrameLayout_default.Element, {
+      layoutId,
+      section,
+      hidden,
+      ...componentsProps?.layoutElement,
+      children: element
+    }, undefined, false, undefined, this);
+  }
+  return element;
+}
+
+// src/core/components/WidgetSelectionHeader/index.tsx
+var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
+function WidgetSelectionHeader({
+  title,
+  pinnableSection = "top" /* Top */,
+  initiallyPinned = true,
+  disabledWidgets,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  const mantineTheme = import_core14.useMantineTheme();
+  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] = import_react14.useState(false);
+  const [isPinned, setIsPinned] = import_react14.useState(initiallyPinned);
+  const handleEnter = () => {
+    setHover(true);
+  };
+  const handleLeave = () => {
+    setHover(false);
+  };
+  const scrollAreaRef = import_react14.useRef(null);
+  const widgets = widgetsContext2.widgets[page.pageId] ?? {};
+  const selectedWidgets = Object.entries(widgets).reduce((t, [widgetId, widget]) => widget?.selected ? [...t, widgetId] : t, []);
+  const element = /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Flex, {
+    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__ */ jsx_dev_runtime20.jsxDEV(import_core14.Text, {
+        size: "md",
+        ...componentsProps?.title,
+        children: title ?? page.name
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Divider, {
+        orientation: "vertical"
+      }, undefined, false, undefined, this),
+      isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(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__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu, {
+            ...import_lodash10.merge({}, theme.componentsProps.Menu, { trigger: "hover" }, componentsProps?.widgetMenu),
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu.Target, {
+                children: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Box, {
+                  children: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Chip, {
+                    variant: selectedWidgets.includes(widgetId) ? "filled" : "outline",
+                    color: activeWidget === widgetId ? mantineTheme.primaryColor : "gray",
+                    value: widgetId,
+                    size: "sm",
+                    disabled: disabledWidgets?.includes(widgetId),
+                    icon: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_icons_react7.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__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu.Dropdown, {
+                children: [
+                  /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu.Item, {
+                    leftSection: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_icons_react7.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__ */ jsx_dev_runtime20.jsxDEV(import_core14.Menu.Item, {
+                    leftSection: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_icons_react7.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);
+  import_react14.useEffect(() => {
+    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__ */ jsx_dev_runtime20.jsxDEV(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
+var import_core16 = require("@mantine/core");
+var import_react15 = __toESM(require("react"));
+
+// src/core/components/BadgeMinimal/index.tsx
+var import_core15 = require("@mantine/core");
+var import_lodash11 = __toESM(require_lodash());
+var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
+function BadgeMinimal({
+  label,
+  tooltip,
+  mounted = true,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Transition, {
+    mounted,
+    transition: "fade",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Tooltip, {
+      ...import_lodash11.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
+      children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.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());
+var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
+var react = require("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__ */ react.createElement(BadgeMinimal, {
+      ...badge,
+      key: i
+    });
+  });
+  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(jsx_dev_runtime22.Fragment, {
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Group, {
+        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__ */ jsx_dev_runtime22.jsxDEV(import_core16.Transition, {
+        mounted: numVisibleBadges > 1,
+        transition: "fade",
+        duration: theme.transitionDurations.short,
+        timingFunction: "ease",
+        ...componentsProps?.cumulativeBadgeTransition,
+        children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.HoverCard, {
+          ...import_lodash12.merge({}, theme.componentsProps.HoverCard, componentsProps?.HoverCard),
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.HoverCard.Target, {
+              children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Badge, {
+                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__ */ jsx_dev_runtime22.jsxDEV(import_core16.HoverCard.Dropdown, {
+              p: gap,
+              children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Stack, {
+                gap,
+                ...componentsProps?.hoverContainer,
+                children: badgesElement
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/core/components/AlertMinimal/index.tsx
+var import_core17 = require("@mantine/core");
+var import_lodash13 = __toESM(require_lodash());
+var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
+function AlertMinimal({
+  category,
+  children,
+  ...props
+}) {
+  const theme = useRemoraidTheme();
+  const {
+    title,
+    text,
+    color,
+    onClose,
+    mounted = true,
+    icon: Icon3,
+    iconSize = "medium" /* Medium */,
+    componentsProps
+  } = import_lodash13.merge({}, theme.componentsProps.alerts[category], props);
+  return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core17.Transition, {
+    mounted,
+    transition: "fade",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core17.Alert, {
+      title,
+      color,
+      variant: "light",
       onClose,
       withCloseButton: onClose !== undefined,
-      icon: Icon2 ? /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Icon2, {
-        ...import_lodash10.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+      icon: Icon3 ? /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(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
       ]
     }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-// src/core/components/RemoraidButton/index.tsx
-var import_core15 = require("@mantine/core");
-var import_icons_react5 = require("@tabler/icons-react");
-var import_lodash11 = __toESM(require_lodash());
-var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
+  }, undefined, false, undefined, this);
+}
+// src/core/components/RemoraidButton/index.tsx
+var import_core18 = require("@mantine/core");
+var import_icons_react8 = require("@tabler/icons-react");
+var import_lodash14 = __toESM(require_lodash());
+var jsx_dev_runtime24 = require("react/jsx-dev-runtime");
 function RemoraidButton({
   label,
   responsive: ResponsiveProp,
@@ -6893,22 +7344,22 @@ function RemoraidButton({
   const breakpoint = breakpointProp ?? "md";
   const collapsed = collapsedProp ?? false;
   const iconSize = iconSizeProp ?? getDefaultButtonIconSize(size);
-  const Icon3 = iconProp ?? import_icons_react5.IconClick;
+  const Icon4 = iconProp ?? import_icons_react8.IconClick;
   const theme = useRemoraidTheme();
-  const iconElement = /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Icon3, {
-    ...import_lodash11.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+  const iconElement = /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(Icon4, {
+    ...import_lodash14.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
   }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(jsx_dev_runtime21.Fragment, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(jsx_dev_runtime24.Fragment, {
       children: [
-        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Tooltip, {
-          ...import_lodash11.merge({}, theme.componentsProps.Tooltip, { label }, componentsProps?.tooltip),
-          children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.ActionIcon, {
+        /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Tooltip, {
+          ...import_lodash14.merge({}, theme.componentsProps.Tooltip, { label }, componentsProps?.tooltip),
+          children: /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.ActionIcon, {
             "aria-label": label,
             variant,
             onClick,
@@ -6926,7 +7377,7 @@ function RemoraidButton({
             children: iconElement
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core15.Button, {
+        /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Button, {
           onClick,
           loading,
           variant,
@@ -6947,234 +7398,11 @@ function RemoraidButton({
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
-// src/core/components/Controls/ControlButton/index.tsx
-var import_core16 = require("@mantine/core");
-var import_icons_react6 = require("@tabler/icons-react");
-var import_lodash12 = __toESM(require_lodash());
-var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
-function ControlButton({
-  icon: Icon4 = import_icons_react6.IconClick,
-  mounted = true,
-  size = "xs",
-  iconSize = "tiny" /* Tiny */,
-  onClick,
-  order,
-  color,
-  tooltip,
-  componentsProps
-}) {
-  const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Transition, {
-    mounted,
-    transition: "fade",
-    duration: theme.transitionDurations.short,
-    timingFunction: "ease",
-    ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Tooltip, {
-      ...import_lodash12.merge({}, theme.componentsProps.Tooltip, { label: tooltip, disabled: !Boolean(tooltip) }, componentsProps?.tooltip),
-      children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.ActionIcon, {
-        "data-control-button": true,
-        size,
-        color,
-        onClick,
-        radius: "xl",
-        ...componentsProps?.button,
-        style: {
-          order,
-          ...import_lodash12.merge(transitionStyle, componentsProps?.button?.style)
-        },
-        children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(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
-var import_react13 = require("react");
-var import_core17 = require("@mantine/core");
-var import_icons_react7 = require("@tabler/icons-react");
-var import_lodash13 = __toESM(require_lodash());
-var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
-function Controls({
-  groupRef,
-  mounted = true,
-  dragContainerRef,
-  gutter = 5,
-  iconSize = "tiny" /* Tiny */,
-  additionalButtons: additionalButtonsProp,
-  componentsProps,
-  children: childrenProp
-}) {
-  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 [pos, setPos] = import_react13.useState({
-    x: 0,
-    y: 0
-  });
-  const offsetRef = import_react13.useRef({ x: 0, y: 0 });
-  const containerRef = import_react13.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__ */ jsx_dev_runtime23.jsxDEV(import_core17.Transition, {
-    mounted,
-    keepMounted: true,
-    transition: "pop",
-    duration: theme.transitionDurations.short,
-    timingFunction: "ease",
-    ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core17.Paper, {
-      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__ */ jsx_dev_runtime23.jsxDEV(import_core17.Group, {
-        gap: gutter,
-        ref: groupRef,
-        wrap: "nowrap",
-        ...componentsProps?.group,
-        className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_icons_react7.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__ */ jsx_dev_runtime23.jsxDEV(ControlButton, {
-              ...button
-            }, i, false, undefined, this);
-          })
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
 // src/core/components/Widget/WidgetWrapper/index.tsx
 var import_core19 = require("@mantine/core");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
-
-// src/core/components/Pinnable/index.tsx
-var import_react14 = require("react");
-var import_icons_react8 = require("@tabler/icons-react");
-var import_core18 = require("@mantine/core");
-var jsx_dev_runtime24 = require("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] = import_react14.useState(initialValue);
-  const containerRef = import_react14.useRef(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 = import_react14.useMemo(() => /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(ControlButton, {
-    icon: pinned ? import_icons_react8.IconPinnedOff : import_icons_react8.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__ */ jsx_dev_runtime24.jsxDEV(import_core18.Box, {
-    pos: "relative",
-    ref: containerRef,
-    "data-hidden": hidden,
-    ...componentsProps?.container,
-    className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
-    children: [
-      controlsContainer === undefined ? /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(Controls, {
-        dragContainerRef: containerRef,
-        ...componentsProps?.controls,
-        children: controlButton
-      }, undefined, false, undefined, this) : controlsContainer !== null && /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Portal, {
-        target: controlsContainer,
-        children: controlButton
-      }, undefined, false, undefined, this),
-      children
-    ]
-  }, undefined, true, undefined, this);
-  if (!layout) {
-    return null;
-  }
-  if (pinned && layoutType === "frame" /* Frame */) {
-    return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(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());
+var import_lodash15 = __toESM(require_lodash());
 var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
 function WidgetWrapper({
   config,
@@ -7185,7 +7413,8 @@ function WidgetWrapper({
   children
 }) {
   const {
-    isWidgetSelected,
+    widgets,
+    hideWidget,
     isPageRegistered,
     isWidgetRegistered,
     registerWidget,
@@ -7195,12 +7424,11 @@ function WidgetWrapper({
   } = useWidgets();
   const page = usePage();
   const theme = useRemoraidTheme();
-  const mounted = page !== null && isWidgetSelected(page.pageId, config.widgetId);
-  const [controlsContainer, setControlsContainer] = import_react15.useState(null);
-  const [hidden, setHidden] = import_react15.useState(!mounted);
+  const [controlsContainer, setControlsContainer] = import_react16.useState(null);
+  const widget = page ? widgets[page.pageId]?.[config.widgetId] : undefined;
   const pageRegistered = page ? isPageRegistered(page.pageId) : false;
-  const containerRef = import_react15.useRef(null);
-  const controlsContainerRef = import_react15.useCallback((n) => {
+  const containerRef = import_react16.useRef(null);
+  const controlsContainerRef = import_react16.useCallback((n) => {
     setControlsContainer(n);
   }, [setControlsContainer]);
   const handleEnter = () => {
@@ -7209,6 +7437,7 @@ function WidgetWrapper({
   const handleLeave = () => {
     updateActiveWidget(null);
   };
+  const mounted = Boolean(widget?.selected);
   let element = /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core19.Transition, {
     mounted,
     transition: "fade-left",
@@ -7216,7 +7445,9 @@ function WidgetWrapper({
     timingFunction: "ease",
     ...componentsProps?.transition,
     onExited: () => {
-      setHidden(true);
+      if (page) {
+        hideWidget(page.pageId, config.widgetId);
+      }
       componentsProps?.transition?.onExited?.();
     },
     children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core19.Paper, {
@@ -7227,6 +7458,8 @@ function WidgetWrapper({
       mt,
       pos: "relative",
       h: "fit-content",
+      mah: "100%",
+      display: "flex",
       ...componentsProps?.container,
       onMouseEnter: (e) => {
         if (!pinnableSection) {
@@ -7240,7 +7473,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__ */ jsx_dev_runtime25.jsxDEV(Controls, {
@@ -7255,6 +7489,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;
@@ -7273,7 +7514,7 @@ function WidgetWrapper({
     element = /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Pinnable, {
       section: pinnableSection,
       controlsContainer,
-      hidden,
+      hidden: Boolean(widget?.hidden),
       ...componentsProps?.Pinnable,
       componentsProps: {
         ...componentsProps?.Pinnable?.componentsProps,
@@ -7304,7 +7545,7 @@ function WidgetWrapper({
       children: element
     }, undefined, false, undefined, this);
   }
-  import_react15.useEffect(() => {
+  import_react16.useEffect(() => {
     if (!page) {
       return;
     }
@@ -7312,20 +7553,11 @@ function WidgetWrapper({
       registerWidget(page.pageId, config);
     }
   }, [pageRegistered]);
-  import_react15.useEffect(() => {
-    if (mounted) {
-      const id = requestAnimationFrame(() => {
-        setHidden(false);
-      });
-      return () => {
-        cancelAnimationFrame(id);
-      };
-    }
-  }, [mounted]);
   return element;
 }
 // src/core/components/Widget/index.tsx
 var import_core20 = require("@mantine/core");
+var import_lodash16 = __toESM(require_lodash());
 var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
 var react2 = require("react");
 function Widget({
@@ -7345,6 +7577,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";
@@ -7360,72 +7593,79 @@ function Widget({
     mt,
     ...componentsProps?.wrapper,
     pinnableSection: pinnableSection ?? componentsProps?.wrapper?.pinnableSection,
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
-        justify: "space-between",
-        wrap: "nowrap",
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
-            gap: badgesGap,
-            wrap: "nowrap",
-            children: [
-              /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
-                order: 1,
-                size: "h2",
-                lineClamp: 1,
-                ...componentsProps?.title,
-                children: title ?? id
-              }, undefined, false, undefined, this),
-              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
-                badges,
-                gap: badgesGap,
-                ...componentsProps?.badgeGroup
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
-            gap: buttonsGap,
-            wrap: "nowrap",
-            children: buttons !== undefined && buttons.map((button, i) => {
-              if (isValidElementOfType(RemoraidButton, button)) {
-                return button;
-              }
-              return /* @__PURE__ */ react2.createElement(RemoraidButton, {
-                ...button,
-                key: i
-              });
-            })
+    children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
+      gap: "md",
+      mih: 0,
+      ...componentsProps?.contentContainer,
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
+          justify: "space-between",
+          wrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
+              gap: badgesGap,
+              wrap: "nowrap",
+              children: [
+                /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
+                  order: 1,
+                  size: "h2",
+                  lineClamp: 1,
+                  ...componentsProps?.title,
+                  children: title ?? id
+                }, undefined, false, undefined, this),
+                badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
+                  badges,
+                  gap: badgesGap,
+                  ...componentsProps?.badgeGroup
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
+              gap: buttonsGap,
+              wrap: "nowrap",
+              children: buttons !== undefined && buttons.map((button, i) => {
+                if (isValidElementOfType(RemoraidButton, button)) {
+                  return button;
+                }
+                return /* @__PURE__ */ react2.createElement(RemoraidButton, {
+                  ...button,
+                  key: i
+                });
+              })
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Box, {
+          children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Divider, {
+            ...componentsProps?.divider
           }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Divider, {
-        my: "md",
-        ...componentsProps?.divider
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
-        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__ */ react2.createElement(AlertMinimal, {
-            ...alert,
-            key: i
-          });
-        })
-      }, undefined, false, undefined, this),
-      loading ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Center, {
-        children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Loader, {
-          ...componentsProps?.loader
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
+          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__ */ react2.createElement(AlertMinimal, {
+              ...alert,
+              key: i
+            });
+          })
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.ScrollArea.Autosize, {
+          ...import_lodash16.merge(theme.componentsProps.ScrollArea, { flex: 1 }, componentsProps?.childrenContainer),
+          children: loading ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Center, {
+            children: /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Loader, {
+              ...componentsProps?.loader
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this) : children
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
-        children
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 // src/core/components/NotFoundPage/index.tsx
 var import_navigation3 = require("next/navigation");
@@ -7492,7 +7732,7 @@ function EnvironmentShell({
   return null;
 }
 // src/core/components/SettingsWidget/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_icons_react11 = require("@tabler/icons-react");
 
 // src/core/components/SettingsWidget/SaveButton/index.tsx
@@ -7534,9 +7774,9 @@ function SaveButton({
 // src/core/components/SettingsWidget/index.tsx
 var jsx_dev_runtime30 = require("react/jsx-dev-runtime");
 var defaultSettingsWidgetContext = {};
-var settingsWidgetContext = import_react16.createContext(defaultSettingsWidgetContext);
+var settingsWidgetContext = import_react17.createContext(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
-  return import_react16.useContext(settingsWidgetContext);
+  return import_react17.useContext(settingsWidgetContext);
 };
 function SettingsWidget({
   children,
@@ -7582,7 +7822,7 @@ var SettingsWidget_default = Object.assign(SettingsWidget, {
   SaveButton
 });
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_core23 = require("@mantine/core");
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
@@ -7615,9 +7855,9 @@ var jsx_dev_runtime32 = require("react/jsx-dev-runtime");
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
-var settingsTableOptionsContext = import_react17.createContext(defaultSettingsTableOptions);
+var settingsTableOptionsContext = import_react18.createContext(defaultSettingsTableOptions);
 var useSettingsTableOptions = () => {
-  return import_react17.useContext(settingsTableOptionsContext);
+  return import_react18.useContext(settingsTableOptionsContext);
 };
 function SettingsTable({
   leftColumnWidth,
@@ -7644,7 +7884,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash15 = __toESM(require_lodash());
+var import_lodash17 = __toESM(require_lodash());
 var import_core24 = require("@mantine/core");
 var import_icons_react12 = require("@tabler/icons-react");
 var jsx_dev_runtime33 = require("react/jsx-dev-runtime");
@@ -7670,7 +7910,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash15.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash17.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -7699,6 +7939,7 @@ function NavbarSettingsWidget({
                     color: "var(--mantine-primary-color-filled)"
                   }, undefined, false, undefined, this),
                   variant: "outline",
+                  size: "sm",
                   children: label
                 }, i, false, undefined, this);
               })
@@ -7718,7 +7959,7 @@ function NavbarSettingsWidget({
   }, undefined, false, undefined, this);
 }
 // src/core/components/ContextClusterProvider/index.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var jsx_dev_runtime34 = require("react/jsx-dev-runtime");
 var createContextCluster = (generalDefaultValue, staticIds) => {
   const isStaticId = (id) => {
@@ -7730,16 +7971,16 @@ var createContextCluster = (generalDefaultValue, staticIds) => {
   const contexts = {};
   const defaultValues = {};
   const createContext8 = (id, defaultValue) => {
-    const context = import_react18.default.createContext(defaultValue ?? generalDefaultValue);
+    const context = import_react19.default.createContext(defaultValue ?? generalDefaultValue);
     contexts[id] = context;
     defaultValues[id] = defaultValue ?? generalDefaultValue;
     return context;
   };
   const useContext11 = (id) => {
     if (isStaticId(id)) {
-      return contexts[id] ? import_react18.default.useContext(contexts[id]) : generalDefaultValue;
+      return contexts[id] ? import_react19.default.useContext(contexts[id]) : generalDefaultValue;
     }
-    return contexts[id] ? import_react18.default.useContext(contexts[id]) : null;
+    return contexts[id] ? import_react19.default.useContext(contexts[id]) : null;
   };
   return {
     contexts,