remoraid 2.20.2 → 2.23.10

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,51 @@ 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;
+        }
+        updatedPage[widgetId] = {
+          ...widget,
+          selected: selectedWidgetIds.includes(widgetId),
+          hidden: false
+        };
+      }
+      return {
+        ...prev,
+        [pageId]: updatedPage
       };
-    }
-    setWidgets((prev) => ({
-      ...prev,
-      [pageId]: updatedPage
-    }));
+    });
   };
   const registerPage = (pageId, initialWidgets) => {
     setWidgets((prev) => ({
@@ -5640,10 +5659,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 +5686,8 @@ function WidgetsProvider({
       registerWidget,
       registerPage,
       isWidgetRegistered,
-      isPageRegistered
+      isPageRegistered,
+      hideWidget
     },
     children
   }, undefined, false, undefined, this);
@@ -5749,6 +5780,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 +5853,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,
@@ -5873,11 +5915,44 @@ var createRemoraidTheme = (customTheme, dependencies) => {
       },
       Tooltip: {
         withArrow: true
+      },
+      Menu: {
+        shadow: "md",
+        withArrow: true,
+        transitionProps: {
+          transition: "pop",
+          duration: transitionDurations.short
+        },
+        styles: {
+          dropdown: { border: "none", background: transparentBackground },
+          arrow: { border: "none" }
+        }
       }
     }
   };
   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 +5970,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 +6673,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 +6717,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 +6726,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 +6744,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,399 +6754,128 @@ 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",
-      onClose,
-      withCloseButton: onClose !== undefined,
-      icon: Icon2 ? /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Icon2, {
-        ...import_lodash10.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
-      }, undefined, false, undefined, this) : undefined,
-      style: import_lodash10.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");
-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 ?? import_icons_react5.IconClick;
-  const theme = useRemoraidTheme();
-  const iconElement = /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Icon3, {
-    ...import_lodash11.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
-  }, undefined, false, undefined, this);
-  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(jsx_dev_runtime21.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, {
-            "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__ */ jsx_dev_runtime21.jsxDEV(import_core15.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
-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, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Paper, {
       ref: containerRef,
       pos: "absolute",
       p: gutter,
@@ -7074,25 +6888,25 @@ function Controls({
       style: {
         right: pos.x,
         top: pos.y,
-        ...import_lodash13.merge(transitionStyle, componentsProps?.container?.style)
+        ...import_lodash9.merge(transitionStyle, componentsProps?.container?.style)
       },
       className: clsx_default("remoraid-controls", componentsProps?.container?.className),
-      children: /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core17.Group, {
+      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_runtime23.jsxDEV(import_icons_react7.IconGripHorizontal, {
-            ...import_lodash13.merge({}, theme.componentsProps.icons[iconSize], { order: -100, color: "var(--mantine-color-default-border)" }, componentsProps?.gripIcon)
+          /* @__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_runtime23.jsxDEV(ControlButton, {
+            return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(ControlButton, {
               ...button
             }, i, false, undefined, this);
           })
@@ -7101,16 +6915,9 @@ function Controls({
     }, 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_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");
+var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
 function Pinnable({
   layoutType: layoutTypeProp,
   section,
@@ -7123,14 +6930,14 @@ function Pinnable({
 }) {
   const layoutType = layoutTypeProp ?? "frame" /* Frame */;
   const { layouts } = useLayouts();
-  const [pinned, setPinned] = import_react14.useState(initialValue);
-  const containerRef = import_react14.useRef(null);
+  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_react14.useMemo(() => /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(ControlButton, {
-    icon: pinned ? import_icons_react8.IconPinnedOff : import_icons_react8.IconPin,
+  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,
@@ -7140,18 +6947,18 @@ function Pinnable({
       componentsProps?.button?.onClick?.(e);
     }
   }, undefined, false, undefined, this), [pinned, componentsProps?.button]);
-  const element = /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Box, {
+  const element = /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.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, {
+      controlsContainer === undefined ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Controls, {
         dragContainerRef: containerRef,
         ...componentsProps?.controls,
         children: controlButton
-      }, undefined, false, undefined, this) : controlsContainer !== null && /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core18.Portal, {
+      }, undefined, false, undefined, this) : controlsContainer !== null && /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Portal, {
         target: controlsContainer,
         children: controlButton
       }, undefined, false, undefined, this),
@@ -7162,7 +6969,7 @@ function Pinnable({
     return null;
   }
   if (pinned && layoutType === "frame" /* Frame */) {
-    return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(FrameLayout_default.Element, {
       layoutId,
       section,
       hidden,
@@ -7173,8 +6980,425 @@ function Pinnable({
   return element;
 }
 
-// src/core/components/Widget/WidgetWrapper/index.tsx
+// 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 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.Label, {
+                    children: "Widget menu"
+                  }, undefined, false, undefined, this),
+                  /* @__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;
+    }
+    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) => {
+            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: Icon3 ? /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(Icon3, {
+        ...import_lodash13.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+      }, undefined, false, undefined, this) : undefined,
+      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_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,
+  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 Icon4 = iconProp ?? import_icons_react8.IconClick;
+  const theme = useRemoraidTheme();
+  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_runtime24.jsxDEV(import_core18.Transition, {
+    mounted,
+    transition: "fade",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(jsx_dev_runtime24.Fragment, {
+      children: [
+        /* @__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,
+            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__ */ jsx_dev_runtime24.jsxDEV(import_core18.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
+var import_core19 = require("@mantine/core");
+var import_react16 = require("react");
+var import_icons_react9 = require("@tabler/icons-react");
+var import_lodash15 = __toESM(require_lodash());
 var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
 function WidgetWrapper({
   config,
@@ -7185,7 +7409,8 @@ function WidgetWrapper({
   children
 }) {
   const {
-    isWidgetSelected,
+    widgets,
+    hideWidget,
     isPageRegistered,
     isWidgetRegistered,
     registerWidget,
@@ -7195,12 +7420,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 = () => {
@@ -7210,13 +7434,15 @@ function WidgetWrapper({
     updateActiveWidget(null);
   };
   let element = /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core19.Transition, {
-    mounted,
+    mounted: Boolean(widget?.selected),
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
     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, {
@@ -7240,7 +7466,8 @@ function WidgetWrapper({
         }
         componentsProps?.container?.onMouseLeave?.(e);
       },
-      style: import_lodash14.merge(transitionStyle, componentsProps?.container?.style),
+      style: import_lodash15.merge(transitionStyle, componentsProps?.container?.style),
+      className: clsx_default("remoraid-segment", componentsProps?.container?.className),
       id: config.widgetId,
       children: [
         /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Controls, {
@@ -7273,7 +7500,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 +7531,7 @@ function WidgetWrapper({
       children: element
     }, undefined, false, undefined, this);
   }
-  import_react15.useEffect(() => {
+  import_react16.useEffect(() => {
     if (!page) {
       return;
     }
@@ -7312,16 +7539,6 @@ 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
@@ -7492,7 +7709,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 +7751,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 +7799,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 +7832,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 +7861,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash15 = __toESM(require_lodash());
+var import_lodash16 = __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 +7887,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash15.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash16.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -7718,7 +7935,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 +7947,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,