remoraid 2.14.7 → 2.19.4

package/dist/core/index.cjs

@@ -725,7 +725,7 @@ var require_lodash = __commonJS((exports2, module2) => {
     }
     var runInContext = function runInContext(context) {
       context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));
-      var { Array: Array2, Date, Error: Error2, Function: Function2, Math, Object: Object2, RegExp: RegExp2, String, TypeError: TypeError2 } = context;
+      var { Array: Array2, Date, Error: Error2, Function: Function2, Math: Math2, Object: Object2, RegExp: RegExp2, String, TypeError: TypeError2 } = context;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -748,7 +748,7 @@ var require_lodash = __commonJS((exports2, module2) => {
         } catch (e) {}
       }();
       var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date && Date.now !== root.Date.now && Date.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
-      var { ceil: nativeCeil, floor: nativeFloor } = Math, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined2, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math.max, nativeMin = Math.min, nativeNow = Date.now, nativeParseInt = context.parseInt, nativeRandom = Math.random, nativeReverse = arrayProto.reverse;
+      var { ceil: nativeCeil, floor: nativeFloor } = Math2, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined2, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
       var DataView = getNative(context, "DataView"), Map = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap2 = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
       var metaMap = WeakMap2 && new WeakMap2;
       var realNames = {};
@@ -1001,7 +1001,7 @@ var require_lodash = __commonJS((exports2, module2) => {
       }
       SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
       SetCache.prototype.has = setCacheHas;
-      function Stack4(entries) {
+      function Stack2(entries) {
         var data = this.__data__ = new ListCache(entries);
         this.size = data.size;
       }
@@ -1035,11 +1035,11 @@ var require_lodash = __commonJS((exports2, module2) => {
         this.size = data.size;
         return this;
       }
-      Stack4.prototype.clear = stackClear;
-      Stack4.prototype["delete"] = stackDelete;
-      Stack4.prototype.get = stackGet;
-      Stack4.prototype.has = stackHas;
-      Stack4.prototype.set = stackSet;
+      Stack2.prototype.clear = stackClear;
+      Stack2.prototype["delete"] = stackDelete;
+      Stack2.prototype.get = stackGet;
+      Stack2.prototype.has = stackHas;
+      Stack2.prototype.set = stackSet;
       function arrayLikeKeys(value, inherited) {
         var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result2 = skipIndexes ? baseTimes(value.length, String) : [], length = result2.length;
         for (var key in value) {
@@ -1155,7 +1155,7 @@ var require_lodash = __commonJS((exports2, module2) => {
             result2 = initCloneByTag(value, tag, isDeep);
           }
         }
-        stack || (stack = new Stack4);
+        stack || (stack = new Stack2);
         var stacked = stack.get(value);
         if (stacked) {
           return stacked;
@@ -1424,21 +1424,21 @@ var require_lodash = __commonJS((exports2, module2) => {
           objIsObj = false;
         }
         if (isSameTag && !objIsObj) {
-          stack || (stack = new Stack4);
+          stack || (stack = new Stack2);
           return objIsArr || isTypedArray(object) ? equalArrays(object, other, bitmask, customizer, equalFunc, stack) : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
         }
         if (!(bitmask & COMPARE_PARTIAL_FLAG)) {
           var objIsWrapped = objIsObj && hasOwnProperty.call(object, "__wrapped__"), othIsWrapped = othIsObj && hasOwnProperty.call(other, "__wrapped__");
           if (objIsWrapped || othIsWrapped) {
             var objUnwrapped = objIsWrapped ? object.value() : object, othUnwrapped = othIsWrapped ? other.value() : other;
-            stack || (stack = new Stack4);
+            stack || (stack = new Stack2);
             return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
           }
         }
         if (!isSameTag) {
           return false;
         }
-        stack || (stack = new Stack4);
+        stack || (stack = new Stack2);
         return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
       }
       function baseIsMap(value) {
@@ -1464,7 +1464,7 @@ var require_lodash = __commonJS((exports2, module2) => {
               return false;
             }
           } else {
-            var stack = new Stack4;
+            var stack = new Stack2;
             if (customizer) {
               var result2 = customizer(objValue, srcValue, key, object, source, stack);
             }
@@ -1560,7 +1560,7 @@ var require_lodash = __commonJS((exports2, module2) => {
           return;
         }
         baseFor(source, function(srcValue, key) {
-          stack || (stack = new Stack4);
+          stack || (stack = new Stack2);
           if (isObject(srcValue)) {
             baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
           } else {
@@ -2429,7 +2429,7 @@ var require_lodash = __commonJS((exports2, module2) => {
         return setWrapToString(result2, func, bitmask);
       }
       function createRound(methodName) {
-        var func = Math[methodName];
+        var func = Math2[methodName];
         return function(number, precision) {
           number = toNumber(number);
           precision = precision == null ? 0 : nativeMin(toInteger(precision), 292);
@@ -5461,6 +5461,7 @@ __p += '`;
 var exports_core = {};
 __export(exports_core, {
   useWidgets: () => useWidgets,
+  useWidget: () => useWidget,
   useSettingsWidgetOptions: () => useSettingsWidgetContext,
   useSettingsTableOptions: () => useSettingsTableOptions,
   useRemoraidUserExperience: () => useRemoraidUserExperience,
@@ -5471,18 +5472,17 @@ __export(exports_core, {
   useHydrationStatus: () => useHydrationStatus,
   useHydratedMantineColorScheme: () => useHydratedMantineColorScheme,
   useFrameLayout: () => useFrameLayout,
+  remoraidAppShellLayoutId: () => remoraidAppShellLayoutId,
   isValidElementOfType: () => isValidElementOfType,
-  isFrameLayout: () => isFrameLayout,
   getElementTypeName: () => getElementTypeName,
+  getDefaultWidgetContext: () => getDefaultWidgetContext,
   defaultUserExperienceCookieName: () => defaultUserExperienceCookieName,
   defaultUserExperience: () => defaultUserExperience,
   defaultSettingsWidgetOptions: () => defaultSettingsWidgetContext,
   defaultSettingsTableOptions: () => defaultSettingsTableOptions,
   defaultNavbarSettingsWidgetId: () => defaultNavbarSettingsWidgetId,
   defaultLayoutsContext: () => defaultLayoutsContext,
-  defaultFrameLayoutContext: () => defaultFrameLayoutContext,
   defaultAppShellNavbarPositions: () => defaultAppShellNavbarPositions,
-  defaultAppShellLayoutId: () => defaultAppShellLayoutId,
   defaultAppShellFooterPositions: () => defaultAppShellFooterPositions,
   defaultAppContext: () => defaultAppContext,
   createUserExperienceContext: () => createUserExperienceContext,
@@ -5492,7 +5492,7 @@ __export(exports_core, {
   asElementOrPropsOfType: () => asElementOrPropsOfType,
   asElementOfType: () => asElementOfType,
   asChildrenOfType: () => asChildrenOfType,
-  WidgetWrapper: () => WidgetWrapper_default,
+  WidgetWrapper: () => WidgetWrapper,
   WidgetSelectionHeader: () => WidgetSelectionHeader,
   Widget: () => Widget,
   UserExperienceProviderWrapper: () => UserExperienceProviderWrapper,
@@ -5504,6 +5504,7 @@ __export(exports_core, {
   RemoraidIconSize: () => RemoraidIconSize,
   RemoraidButton: () => RemoraidButton,
   RemoraidBreakpoint: () => RemoraidBreakpoint,
+  Pinnable: () => Pinnable,
   PageContainer: () => PageContainer,
   Page: () => Page,
   NotFoundPage: () => NotFoundPage,
@@ -5511,11 +5512,12 @@ __export(exports_core, {
   NavbarSettingsWidget: () => NavbarSettingsWidget,
   LayoutType: () => LayoutType,
   HydrationStatusProvider: () => HydrationStatusProvider,
-  FrameLayoutVariant: () => FrameLayoutVariant,
   FrameLayoutSection: () => FrameLayoutSection,
   FrameLayout: () => FrameLayout_default,
   FooterVariant: () => FooterVariant,
   EnvironmentShell: () => EnvironmentShell,
+  Controls: () => Controls,
+  ControlButton: () => ControlButton,
   ContextClusterProvider: () => ContextClusterProvider,
   BadgeMinimal: () => BadgeMinimal,
   BadgeGroup: () => BadgeGroup,
@@ -5529,6 +5531,11 @@ module.exports = __toCommonJS(exports_core);
 // src/core/components/RemoraidProvider/WidgetsProvider/index.tsx
 var import_react = __toESM(require("react"));
 var jsx_dev_runtime = require("react/jsx-dev-runtime");
+var getDefaultWidgetContext = (configuration) => ({
+  name: configuration.widgetId,
+  selected: true,
+  ...configuration.initialValues
+});
 var widgetsContext = import_react.default.createContext({
   widgets: {},
   activeWidget: null,
@@ -5544,6 +5551,10 @@ var widgetsContext = import_react.default.createContext({
 var useWidgets = () => {
   return import_react.useContext(widgetsContext);
 };
+var useWidget = (pageId, widgetId) => {
+  const { widgets } = useWidgets();
+  return widgets?.[pageId]?.[widgetId] ?? null;
+};
 function WidgetsProvider({
   children
 }) {
@@ -5589,13 +5600,10 @@ function WidgetsProvider({
   const registerPage = (pageId, initialWidgets) => {
     setWidgets((prev) => ({
       ...prev,
-      [pageId]: initialWidgets.reduce((t, w) => {
+      [pageId]: initialWidgets.reduce((t, widget) => {
         return {
           ...t,
-          [w.widgetId]: {
-            name: w.name,
-            selected: w.initialValue === undefined ? true : w.initialValue
-          }
+          [widget.widgetId]: getDefaultWidgetContext(widget)
         };
       }, {})
     }));
@@ -5619,10 +5627,7 @@ function WidgetsProvider({
       ...prev,
       [pageId]: {
         ...prev[pageId],
-        [widget.widgetId]: {
-          name: widget.name,
-          selected: widget.initialValue === undefined ? true : widget.initialValue
-        }
+        [widget.widgetId]: getDefaultWidgetContext(widget)
       }
     }));
   };
@@ -5701,11 +5706,6 @@ var FrameLayoutSection;
   FrameLayoutSection2["Right"] = "right";
   FrameLayoutSection2["Content"] = "content";
 })(FrameLayoutSection ||= {});
-var FrameLayoutVariant;
-((FrameLayoutVariant2) => {
-  FrameLayoutVariant2["Plain"] = "plain";
-  FrameLayoutVariant2["Sticky"] = "sticky";
-})(FrameLayoutVariant ||= {});
 
 // src/core/lib/utils.ts
 var import_react2 = require("react");
@@ -5872,7 +5872,8 @@ var createRemoraidTheme = (customTheme, dependencies) => {
         stroke: 3,
         ...customTheme?.iconProps?.tiny
       }
-    }
+    },
+    primaryGutter: "md"
   };
 };
 var themeContext = import_react4.default.createContext(createRemoraidTheme());
@@ -6047,7 +6048,7 @@ function RemoraidProvider({
   }, undefined, false, undefined, this);
 }
 // src/core/components/AppShell/index.tsx
-var import_core7 = require("@mantine/core");
+var import_core8 = require("@mantine/core");
 
 // src/core/components/AppShell/NavbarMinimal/index.tsx
 var import_core3 = require("@mantine/core");
@@ -6253,7 +6254,6 @@ function FooterMinimal({
   return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_core4.Group, {
     justify: "center",
     w: "100%",
-    py: "md",
     ...componentsProps?.container,
     children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(import_icons_react3.IconPennant, {
       size: 50,
@@ -6264,274 +6264,319 @@ function FooterMinimal({
 }
 
 // src/core/components/FrameLayout/index.tsx
-var import_core6 = require("@mantine/core");
+var import_core7 = require("@mantine/core");
 var import_react10 = require("react");
 
 // src/core/components/FrameLayout/Element/index.tsx
+var import_core6 = require("@mantine/core");
+
+// src/core/lib/errors.ts
+class InvalidComponentUsageError extends Error {
+  constructor(component, rule) {
+    super(`Invalid usage of '${component}': ${rule}`);
+    this.name = "InvalidComponentUsageError";
+  }
+}
+
+// src/core/components/Page/PageContainer/index.tsx
 var import_core5 = require("@mantine/core");
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/core/components/Page/PageContainer/index.tsx
 var jsx_dev_runtime11 = require("react/jsx-dev-runtime");
-function Element({
+function PageContainer({
+  children,
+  p = 0,
+  hidden = false,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core5.Container, {
+    size: theme.containerSize,
+    p,
+    w: "100%",
+    "data-hidden": hidden,
+    ...componentsProps?.container,
+    className: clsx_default("remoraid-page-container", componentsProps?.container?.className),
+    children
+  }, undefined, false, undefined, this);
+}
+
+// src/core/components/FrameLayout/Element/index.tsx
+var import_lodash = __toESM(require_lodash());
+var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
+function Element2({
   section,
   includeContainer = true,
+  includePageContainer = false,
   layoutId,
+  hidden = false,
   componentsProps,
   children
 }) {
   const { layouts } = useLayouts();
   const closestLayout = useFrameLayout();
-  if (closestLayout.layoutId === null) {
-    return null;
+  if (!closestLayout) {
+    throw new InvalidComponentUsageError("FrameLayout.Element", "must be used as child of 'FrameLayout'.");
   }
   const layout = layouts[layoutId ?? closestLayout.layoutId];
-  if (!isFrameLayout(layout)) {
+  if (!layout) {
     return null;
   }
-  if (layout.sections[section] === null) {
+  if (layout.type !== "frame" /* Frame */) {
+    throw new TypeError("Prop 'layoutId' in 'FrameLayout.Element' must refer to a valid 'FrameLayout' component. Leave 'layoutId' undefined, if you want to use the closest 'FrameLayout' as reference layout.");
+  }
+  if (!layout.sections[section]) {
     return null;
   }
   let containerProps = {};
   if (section === "left" /* Left */ || section === "right" /* Right */) {
     containerProps.h = "100%";
   }
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core5.Portal, {
+  const element = includePageContainer ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(PageContainer, {
+    p: 0,
+    hidden,
+    ...componentsProps?.PageContainer,
+    children
+  }, undefined, false, undefined, this) : children;
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Portal, {
     target: layout.sections[section],
-    children: includeContainer ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(import_core5.Box, {
-      ...containerProps,
-      ...componentsProps?.container,
-      children
-    }, undefined, false, undefined, this) : children
+    children: includeContainer ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Box, {
+      "data-hidden": hidden,
+      ...import_lodash.merge(containerProps, componentsProps?.container),
+      className: clsx_default("remoraid-frame-layout-element", containerProps?.className, componentsProps?.container?.className),
+      children: element
+    }, undefined, false, undefined, this) : element
   }, undefined, false, undefined, this);
 }
 
 // src/core/components/FrameLayout/index.tsx
-var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
-var isFrameLayout = (layout) => {
-  if (typeof layout !== "object" || layout === null) {
-    return false;
-  }
-  if (!("sections" in layout)) {
-    return false;
-  }
-  if (typeof layout.sections !== "object" || layout.sections === null) {
-    return false;
-  }
-  return true;
-};
-var defaultFrameLayoutVariant = "sticky" /* Sticky */;
-var defaultFrameLayoutContext = {
-  layoutId: null,
-  layout: {
-    sections: {
-      ["top" /* Top */]: null,
-      ["bottom" /* Bottom */]: null,
-      ["left" /* Left */]: null,
-      ["right" /* Right */]: null
-    }
-  },
-  setLayout: () => {}
-};
-var layoutContext = import_react10.createContext(defaultFrameLayoutContext);
+var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
+var layoutContext = import_react10.createContext(null);
 var useFrameLayout = () => {
   return import_react10.useContext(layoutContext);
 };
 function FrameLayout({
-  variant = defaultFrameLayoutVariant,
   layoutId,
+  includeScrollArea = true,
+  gutter = 0,
   componentsProps,
   children
 }) {
   const theme = useRemoraidTheme();
   const { layouts, setLayouts } = useLayouts();
   const layout = layouts[layoutId];
-  const setLayout = import_react10.useMemo(() => {
-    return (value) => {
-      setLayouts((prev) => ({
-        ...prev,
-        [layoutId]: typeof value === "function" ? value(prev[layoutId]) : value
-      }));
-    };
-  }, [layoutId, setLayouts]);
-  const topSection = import_react10.useCallback((n) => {
-    setLayout((prev) => ({
+  const defaultSections = import_react10.useMemo(() => ({
+    ["bottom" /* Bottom */]: null,
+    ["right" /* Right */]: null,
+    ["top" /* Top */]: null,
+    ["left" /* Left */]: null,
+    ["content" /* Content */]: null
+  }), []);
+  const setSections = import_react10.useCallback((value) => {
+    setLayouts((prev) => ({
       ...prev,
-      sections: { ...prev?.sections, ["top" /* Top */]: n }
+      [layoutId]: {
+        type: "frame" /* Frame */,
+        sections: typeof value === "function" ? value(prev[layoutId]?.sections ?? defaultSections) : value
+      }
     }));
-  }, [setLayout]);
-  const bottomSection = import_react10.useCallback((n) => {
-    setLayout((prev) => ({
+  }, [layoutId, setLayouts, defaultSections]);
+  const topSectionRef = import_react10.useCallback((n) => {
+    setSections((prev) => ({
       ...prev,
-      sections: { ...prev?.sections, ["bottom" /* Bottom */]: n }
+      ["top" /* Top */]: n
     }));
-  }, [setLayout]);
-  const leftSection = import_react10.useCallback((n) => {
-    setLayout((prev) => ({
+  }, [setSections]);
+  const bottomSectionRef = import_react10.useCallback((n) => {
+    setSections((prev) => ({
       ...prev,
-      sections: { ...prev?.sections, ["left" /* Left */]: n }
+      ["bottom" /* Bottom */]: n
     }));
-  }, [setLayout]);
-  const rightSection = import_react10.useCallback((n) => {
-    setLayout((prev) => ({
+  }, [setSections]);
+  const leftSectionRef = import_react10.useCallback((n) => {
+    setSections((prev) => ({
       ...prev,
-      sections: { ...prev?.sections, ["right" /* Right */]: n }
+      ["left" /* Left */]: n
     }));
-  }, [setLayout]);
-  let contentSection = children;
-  const childrenContainerProps = {
+  }, [setSections]);
+  const rightSectionRef = import_react10.useCallback((n) => {
+    setSections((prev) => ({
+      ...prev,
+      ["right" /* Right */]: n
+    }));
+  }, [setSections]);
+  const contentSectionRef = import_react10.useCallback((n) => {
+    setSections((prev) => ({
+      ...prev,
+      ["content" /* Content */]: n
+    }));
+  }, [setSections]);
+  const contentSection = /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Stack, {
+    ref: contentSectionRef,
+    h: "100%",
+    gap: gutter,
     flex: 1,
-    ...componentsProps?.childrenContainer
-  };
-  if (variant === "plain" /* Plain */) {
-    contentSection = /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Box, {
-      ...childrenContainerProps,
-      children: contentSection
-    }, undefined, false, undefined, this);
-  } else if (variant === "sticky" /* Sticky */) {
-    contentSection = /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.ScrollArea, {
-      ...theme.scrollAreaProps,
-      ...childrenContainerProps,
-      children
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(layoutContext.Provider, {
-    value: { layoutId, layout, setLayout },
-    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Group, {
+    ...componentsProps?.sectionContainers?.["content" /* Content */],
+    className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-content-section", componentsProps?.sectionContainers?.["content" /* Content */]?.className),
+    children
+  }, undefined, false, undefined, this);
+  const layoutContextValue = import_react10.useMemo(() => ({
+    type: "frame" /* Frame */,
+    sections: defaultSections,
+    ...layout,
+    layoutId
+  }), [layout?.sections, defaultSections, layoutId]);
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(layoutContext.Provider, {
+    value: layoutContextValue,
+    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Group, {
       gap: 0,
       h: "100%",
       w: "100%",
       wrap: "nowrap",
       ...componentsProps?.horizontalContainer,
+      style: {
+        "--remoraid-frame-layout-gutter": typeof gutter === "string" ? `var(--mantine-spacing-${gutter})` : `${gutter}px`
+      },
+      className: clsx_default("remoraid-frame-layout", componentsProps?.horizontalContainer?.className),
       children: [
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Group, {
-          ref: leftSection,
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Group, {
+          ref: leftSectionRef,
           h: "100%",
-          gap: 0,
           wrap: "nowrap",
-          ...componentsProps?.sectionContainers?.["left" /* Left */]
+          gap: gutter,
+          pr: 0,
+          ...componentsProps?.sectionContainers?.["left" /* Left */],
+          className: clsx_default("remoraid-frame-layout-section", componentsProps?.sectionContainers?.["left" /* Left */]?.className)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Stack, {
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Stack, {
           h: "100%",
           flex: 1,
           gap: 0,
           ...componentsProps?.verticalContainer,
+          className: clsx_default("remoraid-frame-layout-vertical-container", componentsProps?.verticalContainer?.className),
           children: [
-            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Stack, {
-              h: "100%",
-              ref: topSection,
-              gap: 0,
+            /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Stack, {
+              ref: topSectionRef,
+              gap: gutter,
               flex: 0,
-              ...componentsProps?.sectionContainers?.["top" /* Top */]
+              ...componentsProps?.sectionContainers?.["top" /* Top */],
+              className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-top-section", componentsProps?.sectionContainers?.["top" /* Top */]?.className)
             }, undefined, false, undefined, this),
-            contentSection,
-            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Stack, {
-              h: "100%",
-              ref: bottomSection,
-              gap: 0,
+            includeScrollArea ? /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.ScrollArea, {
+              flex: 1,
+              ...theme.scrollAreaProps,
+              ...componentsProps?.ScrollArea,
+              children: contentSection
+            }, undefined, false, undefined, this) : contentSection,
+            /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Stack, {
+              ref: bottomSectionRef,
+              gap: gutter,
               flex: 0,
-              ...componentsProps?.sectionContainers?.["bottom" /* Bottom */]
+              ...componentsProps?.sectionContainers?.["bottom" /* Bottom */],
+              className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-bottom-section", componentsProps?.sectionContainers?.["bottom" /* Bottom */]?.className)
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(import_core6.Group, {
-          gap: 0,
-          ref: rightSection,
+        /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Group, {
+          ref: rightSectionRef,
           h: "100%",
+          gap: gutter,
+          pl: 0,
           wrap: "nowrap",
-          ...componentsProps?.sectionContainers?.["right" /* Right */]
+          ...componentsProps?.sectionContainers?.["right" /* Right */],
+          className: clsx_default("remoraid-frame-layout-section", componentsProps?.sectionContainers?.["right" /* Right */]?.className)
         }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
 var FrameLayout_default = Object.assign(FrameLayout, {
-  Element
+  Element: Element2
 });
 
 // src/core/components/AppShell/index.tsx
-var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
-var defaultAppShellLayoutId = "remoraidAppShell";
+var import_lodash2 = __toESM(require_lodash());
+var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
+var remoraidAppShellLayoutId = "remoraid-app-shell";
 var defaultAppShellNavbarPositions = { ["minimal" /* Minimal */]: "left" /* Left */ };
 var defaultAppShellFooterPositions = { ["minimal" /* Minimal */]: "content" /* Content */ };
-function AppShell(props) {
-  const {
-    children,
-    navbarVariant,
-    footerVariant,
-    appContext: appContext2,
-    componentsProps
-  } = {
-    navbarVariant: null,
-    footerVariant: null,
-    ...props
-  };
-  let { navbarPosition, footerPosition } = props;
-  if (navbarVariant !== null && navbarPosition === undefined) {
-    navbarPosition = defaultAppShellNavbarPositions[navbarVariant];
-  }
-  if (footerVariant !== null && footerPosition === undefined) {
-    footerPosition = defaultAppShellFooterPositions[footerVariant];
-  }
+function AppShell({
+  navbarVariant: navbarVariantProp,
+  footerVariant: footerVariantProp,
+  navbarPosition: navbarPositionProp,
+  footerPosition: footerPositionProp,
+  gutter,
+  appContext: appContext2,
+  componentsProps,
+  children
+}) {
+  const navbarVariant = navbarVariantProp ?? null;
+  const footerVariant = footerVariantProp ?? null;
+  const navbarPosition = navbarPositionProp ?? (navbarVariant === null ? null : defaultAppShellNavbarPositions[navbarVariant]);
+  const footerPosition = footerPositionProp ?? (footerVariant === null ? null : defaultAppShellFooterPositions[footerVariant]);
+  const theme = useRemoraidTheme();
   let navbar;
   let footer;
-  let navbarContainerProps = {};
-  let footerContainerProps = {};
+  let navbarLayoutElementProps = {
+    includeContainer: false
+  };
+  let footerLayoutElementProps = {
+    includeContainer: true,
+    componentsProps: { container: { style: { order: 1 } } }
+  };
   if (navbarVariant === "minimal" /* Minimal */) {
-    navbar = /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(NavbarMinimal, {
+    navbar = /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(NavbarMinimal, {
       ...componentsProps?.navbar
     }, undefined, false, undefined, this);
-    navbarContainerProps.py = "md";
-    if (navbarPosition === "left" /* Left */) {
-      navbarContainerProps.pl = "md";
-    } else if (navbarPosition === "right" /* Right */) {
-      navbarContainerProps.pr = "md";
-    }
   }
   if (footerVariant === "minimal" /* Minimal */) {
-    footer = /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FooterMinimal, {
+    footer = /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(FooterMinimal, {
       ...componentsProps?.footer
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(AppProvider, {
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(AppProvider, {
     appContext: appContext2,
     ...componentsProps?.AppProvider,
-    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Box, {
+    children: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Box, {
       h: "100vh",
       ...componentsProps?.container,
-      children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FrameLayout_default, {
-        layoutId: defaultAppShellLayoutId,
+      children: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(FrameLayout_default, {
+        layoutId: remoraidAppShellLayoutId,
+        gutter: gutter ?? theme.primaryGutter,
         ...componentsProps?.layout,
         children: [
-          navbarPosition !== undefined && navbarPosition !== "content" /* Content */ && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FrameLayout_default.Element, {
+          navbarPosition !== null && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(FrameLayout_default.Element, {
             section: navbarPosition,
-            ...componentsProps?.navbarLayoutElement,
-            componentsProps: {
-              ...componentsProps?.navbarLayoutElement?.componentsProps,
-              container: {
-                ...navbarContainerProps,
-                ...componentsProps?.navbarLayoutElement?.componentsProps?.container
-              }
-            },
+            includeContainer: false,
+            ...import_lodash2.merge(navbarLayoutElementProps, componentsProps?.navbarLayoutElement),
             children: navbar
           }, undefined, false, undefined, this),
-          footerPosition !== undefined && footerPosition !== "content" /* Content */ && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FrameLayout_default.Element, {
+          children,
+          footerPosition !== null && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(FrameLayout_default.Element, {
             section: footerPosition,
-            ...componentsProps?.footerLayoutElement,
-            componentsProps: {
-              ...componentsProps?.footerLayoutElement?.componentsProps,
-              container: {
-                ...footerContainerProps,
-                ...componentsProps?.footerLayoutElement?.componentsProps?.container
-              }
-            },
-            children: footer
-          }, undefined, false, undefined, this),
-          navbarPosition !== undefined && navbarPosition === "content" /* Content */ && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(jsx_dev_runtime13.Fragment, {
-            children: navbar
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(import_core7.Box, {
-            ...componentsProps?.childrenContainer,
-            children
-          }, undefined, false, undefined, this),
-          footerPosition !== undefined && footerPosition === "content" /* Content */ && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(jsx_dev_runtime13.Fragment, {
+            ...import_lodash2.merge(footerLayoutElementProps, componentsProps?.footerLayoutElement),
             children: footer
           }, undefined, false, undefined, this)
         ]
@@ -6544,30 +6589,12 @@ var AppShell_default = Object.assign(AppShell, {
   FooterMinimal
 });
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_core10 = require("@mantine/core");
+var import_core11 = require("@mantine/core");
 
 // src/core/components/Page/index.tsx
+var import_core9 = require("@mantine/core");
 var import_react11 = __toESM(require("react"));
 var import_navigation2 = require("next/navigation");
-
-// src/core/components/Page/PageContainer/index.tsx
-var import_core8 = require("@mantine/core");
-var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
-function PageContainer({
-  children,
-  pt,
-  componentsProps
-}) {
-  const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_core8.Container, {
-    size: theme.containerSize,
-    pt: pt ?? "md",
-    ...componentsProps?.container,
-    children
-  }, undefined, false, undefined, this);
-}
-
-// src/core/components/Page/index.tsx
 var jsx_dev_runtime15 = require("react/jsx-dev-runtime");
 var pageContext = import_react11.default.createContext(null);
 var usePage = () => {
@@ -6577,9 +6604,10 @@ function Page({
   children,
   name,
   config,
-  pt,
+  gap,
   componentsProps
 }) {
+  const theme = useRemoraidTheme();
   const pathname = import_navigation2.usePathname();
   const { isPageRegistered, registerPage } = useWidgets();
   const pageId = config?.pageId ?? pathname;
@@ -6593,9 +6621,13 @@ function Page({
   return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(pageContext.Provider, {
     value: { name: name ?? pathname, pageId, ...config },
     children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(PageContainer, {
-      pt,
-      componentsProps: { container: componentsProps?.container },
-      children
+      ...componentsProps?.PageContainer,
+      children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_core9.Stack, {
+        gap: gap ?? theme.primaryGutter,
+        ...componentsProps?.Stack,
+        className: clsx_default("remoraid-page", componentsProps?.Stack?.className),
+        children
+      }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
@@ -6604,25 +6636,26 @@ function Page({
 var import_icons_react4 = require("@tabler/icons-react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
-var import_core9 = require("@mantine/core");
+var import_core10 = require("@mantine/core");
 var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
 function ScrollableChipGroup({
   value,
   onChange,
   gap,
   componentsProps,
-  children
+  children: childrenProp
 }) {
+  const children = asChildrenOfType(import_core10.Chip, childrenProp, "Check children passed to 'ScrollableChipGroup' component.");
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.ScrollArea, {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.ScrollArea, {
     ...theme.scrollAreaProps,
     ...componentsProps?.scrollArea,
-    children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.Chip.Group, {
+    children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Chip.Group, {
       value,
       onChange,
       ...componentsProps?.chipGroup,
       multiple: true,
-      children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core9.Flex, {
+      children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(import_core10.Flex, {
         justify: "flex-start",
         align: "center",
         gap: gap ?? "xs",
@@ -6642,98 +6675,73 @@ function WidgetSelectionHeader({
   mt
 }) {
   const theme = useRemoraidTheme();
-  const { widgets, isPageRegistered, updateWidgetSelectionBulk } = useWidgets();
+  const { isPageRegistered, updateWidgetSelectionBulk, ...widgetsContext2 } = useWidgets();
   const page = usePage();
   if (!page) {
-    console.error("'WidgetSelectionHeader' must be rendered inside of a 'Page' component.");
-    return null;
+    throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
   }
-  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Flex, {
+  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_core10.Text, {
+      /* @__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_core10.Divider, {
+      /* @__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[page.pageId]).filter((widgetId) => widgets[page.pageId][widgetId].selected),
+        value: Object.keys(widgets).filter((widgetId) => widgets[widgetId]?.selected),
         onChange: (value) => {
           updateWidgetSelectionBulk(page.pageId, value);
         },
         componentsProps: { scrollArea: { flex: 1 } },
-        children: Object.keys(widgets[page.pageId]).map((widgetId) => /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_core10.Chip, {
-          value: widgetId,
-          size: "sm",
-          disabled: disabledWidgets && disabledWidgets.includes(widgetId),
-          icon: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_icons_react4.IconCheck, {
-            ...theme.iconProps.tiny
-          }, undefined, false, undefined, this),
-          children: widgets[page.pageId][widgetId].name
-        }, widgetId, false, undefined, this))
+        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.iconProps.tiny
+            }, undefined, false, undefined, this),
+            children: widget.name
+          }, widgetId, false, undefined, this);
+        })
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-// src/core/components/Widget/WidgetWrapper/CloseButton/index.tsx
-var import_core11 = require("@mantine/core");
-var import_icons_react5 = require("@tabler/icons-react");
-var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
-function CloseButton({ widgetId }) {
-  const theme = useRemoraidTheme();
-  const { activeWidget, updateWidgetSelection } = useWidgets();
-  const page = usePage();
-  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core11.Transition, {
-    mounted: activeWidget === widgetId,
-    transition: "pop-top-right",
-    duration: theme.transitionDurations.short,
-    timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core11.ActionIcon, {
-      pos: "absolute",
-      size: "xs",
-      className: "remoraid-close-button",
-      radius: "xl",
-      color: "red",
-      onClick: () => {
-        if (!page) {
-          return;
-        }
-        updateWidgetSelection(page.pageId, widgetId, false);
-      },
-      style: transitionStyle,
-      children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_icons_react5.IconX, {
-        ...theme.iconProps.tiny
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
 // src/core/components/BadgeGroup/index.tsx
 var import_core13 = require("@mantine/core");
 var import_react12 = __toESM(require("react"));
 
 // src/core/components/BadgeMinimal/index.tsx
 var import_core12 = require("@mantine/core");
-var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
-function BadgeMinimal(props) {
-  const { label, tooltip, mounted, componentsProps } = props;
+var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
+function BadgeMinimal({
+  label,
+  tooltip,
+  mounted = true,
+  componentsProps
+}) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Transition, {
-    mounted: mounted !== false,
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Transition, {
+    mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Tooltip, {
       disabled: !tooltip,
       label: tooltip,
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core12.Badge, {
+      children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(import_core12.Badge, {
         variant: "default",
         ...componentsProps?.badge,
         style: {
@@ -6748,7 +6756,7 @@ function BadgeMinimal(props) {
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
 var react = require("react");
 function BadgeGroup({
   badges: badgesProp,
@@ -6759,9 +6767,9 @@ function BadgeGroup({
   const theme = useRemoraidTheme();
   const badges = badgesProp.map((badge) => asElementOrPropsOfType(BadgeMinimal, badge, "Check 'badges' property passed to 'BadgeGroup'."));
   const numVisibleBadges = badges.filter((badge) => isValidElementOfType(BadgeMinimal, badge) ? badge.props.mounted : badge.mounted !== false).length;
-  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(jsx_dev_runtime20.Fragment, {
+  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Group, {
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Group, {
         gap: gap ?? "xs",
         wrap: "nowrap",
         visibleFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
@@ -6777,10 +6785,10 @@ function BadgeGroup({
           });
         })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Tooltip, {
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Tooltip, {
         label: `${numVisibleBadges} badge${numVisibleBadges === 1 ? "" : "s"}`,
         ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core13.Badge, {
+        children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_core13.Badge, {
           hiddenFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
           hidden: numVisibleBadges === 0,
           variant: "light",
@@ -6795,26 +6803,26 @@ function BadgeGroup({
 }
 // src/core/components/AlertMinimal/index.tsx
 var import_core14 = require("@mantine/core");
-var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
 function AlertMinimal({
   title,
   category,
   text,
   onClose,
-  mounted,
+  mounted = true,
   mt,
   mb,
   componentsProps,
   children
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.Transition, {
+  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Transition, {
     mounted: mounted !== false,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(import_core14.Alert, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_core14.Alert, {
       ...theme.alertProps[category],
       title: title ?? theme.alertProps[category].title,
       withCloseButton: onClose !== undefined,
@@ -6835,140 +6843,480 @@ function AlertMinimal({
 }
 // src/core/components/RemoraidButton/index.tsx
 var import_core15 = require("@mantine/core");
-var import_icons_react6 = require("@tabler/icons-react");
-var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
+var import_icons_react5 = require("@tabler/icons-react");
+var import_react13 = require("react");
+var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
 function RemoraidButton({
   label,
-  responsive,
-  breakpoint,
-  collapsed,
+  responsive: ResponsiveProp,
+  breakpoint: breakpointProp,
+  collapsed: collapsedProp,
   size,
   color,
   onClick,
   loading,
-  variant,
-  componentsProps,
-  ...props
+  variant = "default",
+  mounted = true,
+  icon: iconProp,
+  iconSize = "medium" /* Medium */,
+  componentsProps
 }) {
+  const responsive = ResponsiveProp ?? true;
+  const breakpoint = breakpointProp ?? "md";
+  const collapsed = collapsedProp ?? false;
+  const icon = iconProp ?? import_icons_react5.IconClick;
   const theme = useRemoraidTheme();
-  const iconProps = { ...theme.iconProps.medium, ...componentsProps?.icon };
-  const icon = props.icon ? /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(props.icon, {
-    ...iconProps
-  }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_icons_react6.IconClick, {
-    ...iconProps
-  }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(jsx_dev_runtime22.Fragment, {
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.Tooltip, {
-        label,
-        ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.ActionIcon, {
-          "aria-label": label,
-          variant: variant ?? "default",
+  const iconProps = { ...theme.iconProps[iconSize], ...componentsProps?.icon };
+  const iconElement = import_react13.createElement(icon, iconProps);
+  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, {
+          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,
-          size: size ? `input-${size}` : "input-sm",
+          variant,
+          size,
           color,
+          leftSection: iconProp ? iconElement : undefined,
           ...componentsProps?.button,
-          ...componentsProps?.ActionIcon,
-          hiddenFrom: responsive === false ? undefined : breakpoint ?? "md",
-          display: responsive === false && collapsed !== true ? "none" : componentsProps?.ActionIcon?.display ?? componentsProps?.button?.display,
-          children: icon
+          ...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, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core15.Button, {
-        onClick,
-        loading,
-        variant: variant ?? "default",
+      ]
+    }, 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 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: "pop-top-right",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.Tooltip, {
+      label: tooltip,
+      disabled: !Boolean(tooltip),
+      ...componentsProps?.tooltip,
+      children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(import_core16.ActionIcon, {
+        "data-control-button": true,
         size,
         color,
-        leftSection: props.icon ? icon : undefined,
+        onClick,
+        radius: "xl",
         ...componentsProps?.button,
-        ...componentsProps?.Button,
-        visibleFrom: responsive === false ? undefined : breakpoint ?? "md",
-        display: responsive === false && collapsed ? "none" : componentsProps?.Button?.display ?? componentsProps?.button?.display,
-        children: label
+        style: {
+          ...transitionStyle,
+          order,
+          ...componentsProps?.button?.style
+        },
+        children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(Icon4, {
+          ...theme.iconProps[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_react14 = require("react");
+var import_core17 = require("@mantine/core");
+var import_icons_react7 = require("@tabler/icons-react");
+var import_lodash3 = __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_react14.useState({
+    x: 0,
+    y: 0
+  });
+  const offsetRef = import_react14.useRef({ x: 0, y: 0 });
+  const containerRef = import_react14.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_lodash3.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, {
+            order: -100,
+            color: "var(--mantine-color-default-border)",
+            ...import_lodash3.merge(theme.iconProps[iconSize], 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_react16 = require("react");
+var import_icons_react9 = require("@tabler/icons-react");
+
+// src/core/components/Pinnable/index.tsx
+var import_react15 = 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_react15.useState(initialValue);
+  const containerRef = import_react15.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_react15.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_core16 = require("@mantine/core");
-var import_react13 = require("react");
-var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
+var import_lodash4 = __toESM(require_lodash());
+var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
 function WidgetWrapper({
-  children,
   config,
-  mt,
-  withCloseButton,
-  componentsProps
+  mt = 0,
+  withCloseButton = true,
+  pinnableSection,
+  componentsProps,
+  children
 }) {
   const {
     isWidgetSelected,
     isPageRegistered,
     isWidgetRegistered,
     registerWidget,
-    updateActiveWidget
+    updateActiveWidget,
+    updateWidgetSelection,
+    activeWidget
   } = useWidgets();
   const page = usePage();
   const theme = useRemoraidTheme();
+  const mounted = page !== null && isWidgetSelected(page.pageId, config.widgetId);
+  const [controlsContainer, setControlsContainer] = import_react16.useState(null);
+  const [hidden, setHidden] = import_react16.useState(!mounted);
   const pageRegistered = page ? isPageRegistered(page.pageId) : false;
-  import_react13.useEffect(() => {
-    if (!page) {
-      return;
-    }
-    if (!isWidgetRegistered(page.pageId, config.widgetId)) {
-      registerWidget(page.pageId, config);
-    }
-  }, [pageRegistered]);
-  return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core16.Transition, {
-    mounted: page !== null && isWidgetSelected(page.pageId, config.widgetId),
+  const containerRef = import_react16.useRef(null);
+  const controlsContainerRef = import_react16.useCallback((n) => {
+    setControlsContainer(n);
+  }, [setControlsContainer]);
+  const handleEnter = () => {
+    updateActiveWidget(config.widgetId);
+  };
+  const handleLeave = () => {
+    updateActiveWidget(null);
+  };
+  let element = /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core19.Transition, {
+    mounted,
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
     timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(import_core16.Paper, {
+    ...componentsProps?.transition,
+    onExited: () => {
+      setHidden(true);
+      componentsProps?.transition?.onExited?.();
+    },
+    children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core19.Paper, {
+      ref: containerRef,
       p: "md",
       shadow: "md",
       bg: theme.transparentBackground,
-      mt: mt || 0,
+      mt,
       pos: "relative",
       h: "fit-content",
       ...componentsProps?.container,
-      style: { ...transitionStyle, ...componentsProps?.container?.style },
-      onMouseEnter: () => {
-        updateActiveWidget(config.widgetId);
+      onMouseEnter: (e) => {
+        if (!pinnableSection) {
+          handleEnter();
+        }
+        componentsProps?.container?.onMouseEnter?.(e);
       },
-      onMouseLeave: () => {
-        updateActiveWidget(null);
+      onMouseLeave: (e) => {
+        if (!pinnableSection) {
+          handleLeave();
+        }
+        componentsProps?.container?.onMouseLeave?.(e);
       },
+      style: import_lodash4.merge(transitionStyle, componentsProps?.container?.style),
+      id: config.widgetId,
       children: [
-        withCloseButton !== false && /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(CloseButton, {
-          widgetId: config.widgetId
+        /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Controls, {
+          dragContainerRef: containerRef,
+          groupRef: controlsContainerRef,
+          mounted: activeWidget === config.widgetId,
+          ...componentsProps?.controls,
+          children: /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(ControlButton, {
+            mounted: withCloseButton,
+            icon: import_icons_react9.IconX,
+            tooltip: "Hide widget",
+            color: "red",
+            order: 200,
+            ...componentsProps?.closeButton,
+            onClick: (e) => {
+              if (!page) {
+                return;
+              }
+              updateWidgetSelection(page.pageId, config.widgetId, false);
+              handleLeave();
+              componentsProps?.closeButton?.onClick?.(e);
+            }
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         children
       ]
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
+  if (pinnableSection !== undefined) {
+    element = /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Pinnable, {
+      section: pinnableSection,
+      controlsContainer,
+      hidden,
+      ...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);
+          }
+        },
+        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
+        }
+      },
+      children: element
+    }, undefined, false, undefined, this);
+  }
+  import_react16.useEffect(() => {
+    if (!page) {
+      return;
+    }
+    if (!isWidgetRegistered(page.pageId, config.widgetId)) {
+      registerWidget(page.pageId, config);
+    }
+  }, [pageRegistered]);
+  import_react16.useEffect(() => {
+    if (mounted) {
+      const id = requestAnimationFrame(() => {
+        setHidden(false);
+      });
+      return () => {
+        cancelAnimationFrame(id);
+      };
+    }
+  }, [mounted]);
+  return element;
 }
-var WidgetWrapper_default = Object.assign(WidgetWrapper, {
-  CloseButton
-});
 // src/core/components/Widget/index.tsx
-var import_core17 = require("@mantine/core");
-var jsx_dev_runtime24 = require("react/jsx-dev-runtime");
+var import_core20 = require("@mantine/core");
+var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
 var react2 = require("react");
 function Widget({
-  children,
   id,
-  config,
   title,
+  config,
   badges: badgesProp,
   buttons: buttonsProp,
   alerts: alertsProp,
   gaps,
   loading,
   mt,
-  componentsProps
+  pinnableSection,
+  componentsProps,
+  children
 }) {
   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."));
@@ -6976,41 +7324,41 @@ function Widget({
   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";
-  return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(WidgetWrapper_default, {
+  return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(WidgetWrapper, {
     config: {
       widgetId: id,
-      name: title,
-      ...config
+      ...config,
+      initialValues: {
+        name: title,
+        ...config?.initialValues
+      }
     },
     mt,
-    componentsProps: {
-      container: componentsProps?.container,
-      transition: componentsProps?.transition
-    },
     ...componentsProps?.wrapper,
+    pinnableSection: pinnableSection ?? componentsProps?.wrapper?.pinnableSection,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Group, {
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
         justify: "space-between",
         wrap: "nowrap",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Group, {
+          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
             gap: badgesGap,
             wrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Title, {
+              /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
                 order: 1,
                 size: "h3",
                 lineClamp: 1,
-                children: title
+                children: title ?? id
               }, undefined, false, undefined, this),
-              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(BadgeGroup, {
+              badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
                 badges,
                 gap: badgesGap,
                 ...componentsProps?.badgeGroup
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Group, {
+          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
             gap: buttonsGap,
             wrap: "nowrap",
             children: buttons !== undefined && buttons.map((button, i) => {
@@ -7025,11 +7373,11 @@ function Widget({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Divider, {
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Divider, {
         my: "md",
         ...componentsProps?.divider
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Stack, {
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
         align: "stretch",
         gap: alertsGap,
         mb: alerts && alerts.length > 0 ? "md" : 0,
@@ -7044,20 +7392,20 @@ function Widget({
           });
         })
       }, undefined, false, undefined, this),
-      loading ? /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Center, {
-        children: /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_core17.Loader, {
+      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) : /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(jsx_dev_runtime24.Fragment, {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
         children
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 // src/core/components/NotFoundPage/index.tsx
-var import_core18 = require("@mantine/core");
+var import_core21 = require("@mantine/core");
 var import_navigation3 = require("next/navigation");
-var jsx_dev_runtime25 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime27 = require("react/jsx-dev-runtime");
 function NotFoundPage({
   children,
   message,
@@ -7065,11 +7413,11 @@ function NotFoundPage({
 }) {
   const pathname = import_navigation3.usePathname();
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(Page, {
+  return /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(Page, {
     name: "Not Found",
     ...componentsProps?.page,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(import_core18.Alert, {
+      /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core21.Alert, {
         ...theme.alertProps.negative,
         title: "404 - Page Not Found",
         children: message ?? `Could not find page ${pathname}.`
@@ -7079,8 +7427,8 @@ function NotFoundPage({
   }, undefined, true, undefined, this);
 }
 // src/core/components/EnvironmentShell/index.tsx
-var import_core19 = require("@mantine/core");
-var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
+var import_core22 = require("@mantine/core");
+var jsx_dev_runtime28 = require("react/jsx-dev-runtime");
 function EnvironmentShell({
   children,
   environment,
@@ -7094,7 +7442,7 @@ function EnvironmentShell({
   const undefinedKeys = Object.keys(environment).filter((key) => environment[key] === undefined);
   const alertTitle = `Please Specify Environment Variable${undefinedKeys.length > 1 ? "s" : ""}`;
   const alertMessage = `Components could not be rendered because the following environment variables are not specified: ${undefinedKeys.join(", ")}.`;
-  const alert = /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core19.Alert, {
+  const alert = /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(import_core22.Alert, {
     ...theme.alertProps.neutral,
     title: alertTitle,
     m,
@@ -7102,12 +7450,12 @@ function EnvironmentShell({
     children: message ?? alertMessage
   }, undefined, false, undefined, this);
   if (undefinedKeys.length === 0) {
-    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
+    return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(jsx_dev_runtime28.Fragment, {
       children
     }, undefined, false, undefined, this);
   }
   if (withContainer) {
-    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(PageContainer, {
+    return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(PageContainer, {
       componentsProps: { container: componentsProps?.container },
       children: alert
     }, undefined, false, undefined, this);
@@ -7115,22 +7463,22 @@ function EnvironmentShell({
   return alert;
 }
 // src/core/components/SettingsWidget/index.tsx
-var import_react14 = require("react");
-var import_icons_react8 = require("@tabler/icons-react");
+var import_react17 = require("react");
+var import_icons_react11 = require("@tabler/icons-react");
 
 // src/core/components/SettingsWidget/SaveButton/index.tsx
-var import_icons_react7 = require("@tabler/icons-react");
-var import_core20 = require("@mantine/core");
-var jsx_dev_runtime27 = require("react/jsx-dev-runtime");
+var import_icons_react10 = require("@tabler/icons-react");
+var import_core23 = require("@mantine/core");
+var jsx_dev_runtime29 = require("react/jsx-dev-runtime");
 function SaveButton({
   onSaveChanges,
   insideContainer,
   componentsProps
 }) {
   const settingsWidgetOptions = useSettingsWidgetContext();
-  const button = /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(RemoraidButton, {
+  const button = /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(RemoraidButton, {
     label: "Save Changes",
-    icon: import_icons_react7.IconDeviceFloppy,
+    icon: import_icons_react10.IconDeviceFloppy,
     onClick: onSaveChanges,
     responsive: false,
     ...componentsProps?.button,
@@ -7143,7 +7491,7 @@ function SaveButton({
     }
   }, undefined, false, undefined, this);
   if (insideContainer !== false) {
-    return /* @__PURE__ */ jsx_dev_runtime27.jsxDEV(import_core20.Group, {
+    return /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core23.Group, {
       w: "100%",
       justify: "flex-end",
       mt: "md",
@@ -7155,11 +7503,11 @@ function SaveButton({
 }
 
 // src/core/components/SettingsWidget/index.tsx
-var jsx_dev_runtime28 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime30 = require("react/jsx-dev-runtime");
 var defaultSettingsWidgetContext = {};
-var settingsWidgetContext = import_react14.createContext(defaultSettingsWidgetContext);
+var settingsWidgetContext = import_react17.createContext(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
-  return import_react14.useContext(settingsWidgetContext);
+  return import_react17.useContext(settingsWidgetContext);
 };
 function SettingsWidget({
   children,
@@ -7168,9 +7516,9 @@ function SettingsWidget({
   custom,
   widgetProps
 }) {
-  return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(settingsWidgetContext.Provider, {
+  return /* @__PURE__ */ jsx_dev_runtime30.jsxDEV(settingsWidgetContext.Provider, {
     value: { custom, unsavedChanges },
-    children: /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(Widget, {
+    children: /* @__PURE__ */ jsx_dev_runtime30.jsxDEV(Widget, {
       title: "Settings",
       id: "settings",
       mt: "md",
@@ -7179,7 +7527,7 @@ function SettingsWidget({
         ...onRestoreDefaultValues ? [
           {
             label: "Restore Default Values",
-            icon: import_icons_react8.IconRestore,
+            icon: import_icons_react11.IconRestore,
             onClick: onRestoreDefaultValues,
             componentsProps: { button: { disabled: custom === false } }
           }
@@ -7206,27 +7554,27 @@ var SettingsWidget_default = Object.assign(SettingsWidget, {
   SaveButton
 });
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var import_react15 = require("react");
-var import_core22 = require("@mantine/core");
+var import_react18 = require("react");
+var import_core25 = require("@mantine/core");
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
-var import_core21 = require("@mantine/core");
-var jsx_dev_runtime29 = require("react/jsx-dev-runtime");
+var import_core24 = require("@mantine/core");
+var jsx_dev_runtime31 = require("react/jsx-dev-runtime");
 function Row({
   children,
   label
 }) {
   const options = useSettingsTableOptions();
-  return /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core21.Table.Tr, {
+  return /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core24.Table.Tr, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core21.Table.Th, {
+      /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core24.Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core21.Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core24.Text, {
           size: "sm",
           children: label
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(import_core21.Table.Td, {
+      /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core24.Table.Td, {
         py: "xs",
         children
       }, undefined, false, undefined, this)
@@ -7235,30 +7583,30 @@ function Row({
 }
 
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-var jsx_dev_runtime30 = require("react/jsx-dev-runtime");
+var jsx_dev_runtime32 = require("react/jsx-dev-runtime");
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
-var settingsTableOptionsContext = import_react15.createContext(defaultSettingsTableOptions);
+var settingsTableOptionsContext = import_react18.createContext(defaultSettingsTableOptions);
 var useSettingsTableOptions = () => {
-  return import_react15.useContext(settingsTableOptionsContext);
+  return import_react18.useContext(settingsTableOptionsContext);
 };
 function SettingsTable({
   leftColumnWidth,
   children: childrenProp
 }) {
-  const theme = useRemoraidTheme();
   const children = asChildrenOfType(Row, childrenProp, "Check children passed to 'SettingsTable' component.");
-  return /* @__PURE__ */ jsx_dev_runtime30.jsxDEV(settingsTableOptionsContext.Provider, {
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(settingsTableOptionsContext.Provider, {
     value: {
       leftColumnWidth: leftColumnWidth ?? defaultSettingsTableOptions.leftColumnWidth
     },
-    children: /* @__PURE__ */ jsx_dev_runtime30.jsxDEV(import_core22.Table, {
+    children: /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(import_core25.Table, {
       bg: theme.transparentBackground,
       withTableBorder: true,
       variant: "vertical",
       layout: "fixed",
-      children: /* @__PURE__ */ jsx_dev_runtime30.jsxDEV(import_core22.Table.Tbody, {
+      children: /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(import_core25.Table.Tbody, {
         children
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -7268,20 +7616,21 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash = __toESM(require_lodash());
-var import_core23 = require("@mantine/core");
-var import_icons_react9 = require("@tabler/icons-react");
-var jsx_dev_runtime31 = require("react/jsx-dev-runtime");
+var import_lodash5 = __toESM(require_lodash());
+var import_core26 = require("@mantine/core");
+var import_icons_react12 = require("@tabler/icons-react");
+var jsx_dev_runtime33 = require("react/jsx-dev-runtime");
 var defaultNavbarSettingsWidgetId = "navbar-settings";
 function NavbarSettingsWidget({
-  additionalRows,
+  additionalRows: additionalRowsProp,
   widgetProps,
   componentsProps
 }) {
+  const additionalRows = additionalRowsProp?.map((additionalRow) => asElementOrPropsOfType(SettingsTable_default.Row, additionalRow, "Check the 'additionalRows' property of 'NavbarSettingsWidget'."));
   const { userExperience, updateUserExperience, initialUserExperience } = useRemoraidUserExperience();
   const app = useRemoraidApp();
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(SettingsWidget_default, {
+  return /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsWidget_default, {
     widgetProps: {
       id: defaultNavbarSettingsWidgetId,
       title: "Navbar Settings",
@@ -7293,13 +7642,13 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash.isEqual(userExperience.navbar, initialUserExperience.navbar),
-    children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(SettingsTable_default, {
+    custom: !import_lodash5.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
-        /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default.Row, {
           label: "Select which pages you want to display or hide",
-          children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Chip.Group, {
+          children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core26.Chip.Group, {
             multiple: true,
             value: app.navigablePages.filter((p) => !userExperience.navbar.hiddenPages.includes(p.href)).map((p) => p.href),
             onChange: (newValue) => {
@@ -7311,12 +7660,12 @@ function NavbarSettingsWidget({
                 }
               }));
             },
-            children: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Group, {
+            children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core26.Group, {
               justify: "flex-start",
               gap: "xs",
-              children: app.navigablePages.map((p) => ({ ...p, icon: p.icon ?? import_icons_react9.IconLink })).map((p, i) => /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(import_core23.Chip, {
+              children: app.navigablePages.map((p) => ({ ...p, icon: p.icon ?? import_icons_react12.IconLink })).map((p, i) => /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(import_core26.Chip, {
                 value: p.href,
-                icon: /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(p.icon, {
+                icon: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(p.icon, {
                   ...theme.iconProps.tiny,
                   color: theme.primaryColor
                 }, undefined, false, undefined, this),
@@ -7330,7 +7679,7 @@ function NavbarSettingsWidget({
           if (isValidElementOfType(SettingsTable_default.Row, row)) {
             return row;
           }
-          return /* @__PURE__ */ jsx_dev_runtime31.jsxDEV(SettingsTable_default.Row, {
+          return /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default.Row, {
             ...row
           }, i, false, undefined, this);
         })
@@ -7339,8 +7688,8 @@ function NavbarSettingsWidget({
   }, undefined, false, undefined, this);
 }
 // src/core/components/ContextClusterProvider/index.tsx
-var import_react16 = __toESM(require("react"));
-var jsx_dev_runtime32 = require("react/jsx-dev-runtime");
+var import_react19 = __toESM(require("react"));
+var jsx_dev_runtime34 = require("react/jsx-dev-runtime");
 var createContextCluster = (generalDefaultValue, staticIds) => {
   const isStaticId = (id) => {
     if (staticIds?.find((staticId) => staticId === id)) {
@@ -7351,16 +7700,16 @@ var createContextCluster = (generalDefaultValue, staticIds) => {
   const contexts = {};
   const defaultValues = {};
   const createContext8 = (id, defaultValue) => {
-    const context = import_react16.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_react16.default.useContext(contexts[id]) : generalDefaultValue;
+      return contexts[id] ? import_react19.default.useContext(contexts[id]) : generalDefaultValue;
     }
-    return contexts[id] ? import_react16.default.useContext(contexts[id]) : null;
+    return contexts[id] ? import_react19.default.useContext(contexts[id]) : null;
   };
   return {
     contexts,
@@ -7375,8 +7724,8 @@ function ContextClusterProvider({
   values = {},
   children
 }) {
-  return Object.entries(cluster.contexts).reduceRight((t, [id, context]) => /* @__PURE__ */ jsx_dev_runtime32.jsxDEV(context.Provider, {
+  return Object.entries(cluster.contexts).reduceRight((t, [id, context]) => context ? /* @__PURE__ */ jsx_dev_runtime34.jsxDEV(context.Provider, {
     value: values[id] ?? cluster.defaultValues[id] ?? cluster.generalDefaultValue,
     children: t
-  }, undefined, false, undefined, this), children);
+  }, undefined, false, undefined, this) : t, children);
 }