remoraid 2.10.7 → 2.18.43

package/dist/core/index.js

@@ -701,7 +701,7 @@ var require_lodash = __commonJS((exports, module) => {
     }
     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;
@@ -724,7 +724,7 @@ var require_lodash = __commonJS((exports, module) => {
         } 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 = {};
@@ -977,7 +977,7 @@ var require_lodash = __commonJS((exports, module) => {
       }
       SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
       SetCache.prototype.has = setCacheHas;
-      function Stack3(entries) {
+      function Stack2(entries) {
         var data = this.__data__ = new ListCache(entries);
         this.size = data.size;
       }
@@ -1011,11 +1011,11 @@ var require_lodash = __commonJS((exports, module) => {
         this.size = data.size;
         return this;
       }
-      Stack3.prototype.clear = stackClear;
-      Stack3.prototype["delete"] = stackDelete;
-      Stack3.prototype.get = stackGet;
-      Stack3.prototype.has = stackHas;
-      Stack3.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) {
@@ -1131,7 +1131,7 @@ var require_lodash = __commonJS((exports, module) => {
             result2 = initCloneByTag(value, tag, isDeep);
           }
         }
-        stack || (stack = new Stack3);
+        stack || (stack = new Stack2);
         var stacked = stack.get(value);
         if (stacked) {
           return stacked;
@@ -1400,21 +1400,21 @@ var require_lodash = __commonJS((exports, module) => {
           objIsObj = false;
         }
         if (isSameTag && !objIsObj) {
-          stack || (stack = new Stack3);
+          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 Stack3);
+            stack || (stack = new Stack2);
             return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
           }
         }
         if (!isSameTag) {
           return false;
         }
-        stack || (stack = new Stack3);
+        stack || (stack = new Stack2);
         return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
       }
       function baseIsMap(value) {
@@ -1440,7 +1440,7 @@ var require_lodash = __commonJS((exports, module) => {
               return false;
             }
           } else {
-            var stack = new Stack3;
+            var stack = new Stack2;
             if (customizer) {
               var result2 = customizer(objValue, srcValue, key, object, source, stack);
             }
@@ -1536,7 +1536,7 @@ var require_lodash = __commonJS((exports, module) => {
           return;
         }
         baseFor(source, function(srcValue, key) {
-          stack || (stack = new Stack3);
+          stack || (stack = new Stack2);
           if (isObject(srcValue)) {
             baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
           } else {
@@ -2405,7 +2405,7 @@ var require_lodash = __commonJS((exports, module) => {
         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);
@@ -5439,6 +5439,11 @@ import React2, {
   useContext
 } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
+var getDefaultWidgetContext = (configuration) => ({
+  name: configuration.widgetId,
+  selected: true,
+  ...configuration.initialValues
+});
 var widgetsContext = React2.createContext({
   widgets: {},
   activeWidget: null,
@@ -5454,6 +5459,10 @@ var widgetsContext = React2.createContext({
 var useWidgets = () => {
   return useContext(widgetsContext);
 };
+var useWidget = (pageId, widgetId) => {
+  const { widgets } = useWidgets();
+  return widgets?.[pageId]?.[widgetId] ?? null;
+};
 function WidgetsProvider({
   children
 }) {
@@ -5499,13 +5508,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)
         };
       }, {})
     }));
@@ -5529,10 +5535,7 @@ function WidgetsProvider({
       ...prev,
       [pageId]: {
         ...prev[pageId],
-        [widget.widgetId]: {
-          name: widget.name,
-          selected: widget.initialValue === undefined ? true : widget.initialValue
-        }
+        [widget.widgetId]: getDefaultWidgetContext(widget)
       }
     }));
   };
@@ -5611,14 +5614,45 @@ var FrameLayoutSection;
   FrameLayoutSection2["Right"] = "right";
   FrameLayoutSection2["Content"] = "content";
 })(FrameLayoutSection ||= {});
-var FrameLayoutVariant;
-((FrameLayoutVariant2) => {
-  FrameLayoutVariant2["Plain"] = "plain";
-  FrameLayoutVariant2["Sticky"] = "sticky";
-})(FrameLayoutVariant ||= {});
 
 // src/core/lib/utils.ts
+import {
+  isValidElement
+} from "react";
 var co = (condition, value, fallback) => condition(value) ? value : fallback;
+var isValidElementOfType = (type, value) => {
+  return isValidElement(value) && value.type === type;
+};
+var getElementTypeName = (type) => {
+  if (typeof type === "string") {
+    return type;
+  }
+  if (typeof type === "function") {
+    return type.displayName ?? type.name ?? "anonymous component";
+  }
+  return "unknown";
+};
+var asElementOfType = (type, element, additionalErrorMessage) => {
+  if (isValidElementOfType(type, element)) {
+    return element;
+  }
+  throw new TypeError(`Expected React element of type ${getElementTypeName(type)}, but received type: ${getElementTypeName(element.type)}.${additionalErrorMessage !== undefined && additionalErrorMessage.length > 0 ? ` ${additionalErrorMessage}` : ""}`);
+};
+var asChildrenOfType = (type, children, additionalErrorMessage) => {
+  if (children === undefined || children === null) {
+    return children;
+  }
+  if (Array.isArray(children)) {
+    return children.map((child) => asChildrenOfType(type, child, additionalErrorMessage));
+  }
+  return asElementOfType(type, children, additionalErrorMessage);
+};
+var asElementOrPropsOfType = (type, elementOrProps, additionalErrorMessage) => {
+  if (isValidElement(elementOrProps)) {
+    return asElementOfType(type, elementOrProps, additionalErrorMessage);
+  }
+  return elementOrProps;
+};
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 import {
@@ -5820,10 +5854,10 @@ function UserExperienceProviderWrapper({
   initialValue
 }) {
   const [cookies, setCookie] = useCookies();
-  const initialUserExperience = {
-    ...defaultUserExperience,
-    ...initialValue
-  };
+  let initialUserExperience = defaultUserExperience;
+  if (typeof initialValue === "object" && typeof initialUserExperience === "object") {
+    initialUserExperience = { ...initialUserExperience, ...initialValue };
+  }
   const [userExperience, setUserExperience] = useState3(initialUserExperience);
   const [processedCookie, setProcessedCookie] = useState3(false);
   const updateUserExperience = (p) => {
@@ -5948,7 +5982,7 @@ function RemoraidProvider({
   }, undefined, false, undefined, this);
 }
 // src/core/components/AppShell/index.tsx
-import { Box as Box3 } from "@mantine/core";
+import { Box as Box2 } from "@mantine/core";
 
 // src/core/components/AppShell/NavbarMinimal/index.tsx
 import {
@@ -6169,7 +6203,6 @@ function FooterMinimal({
   return /* @__PURE__ */ jsxDEV10(Group, {
     justify: "center",
     w: "100%",
-    py: "md",
     ...componentsProps?.container,
     children: /* @__PURE__ */ jsxDEV10(IconPennant, {
       size: 50,
@@ -6181,7 +6214,6 @@ function FooterMinimal({
 
 // src/core/components/FrameLayout/index.tsx
 import {
-  Box as Box2,
   Group as Group2,
   ScrollArea,
   Stack as Stack2
@@ -6195,252 +6227,318 @@ import {
 
 // src/core/components/FrameLayout/Element/index.tsx
 import { Box, Portal } from "@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
+import { Container } from "@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
 import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
-function Element({
+function PageContainer({
+  children,
+  p = 0,
+  hidden = false,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsxDEV11(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(), 1);
+import { jsxDEV as jsxDEV12 } from "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__ */ jsxDEV11(Portal, {
+  const element = includePageContainer ? /* @__PURE__ */ jsxDEV12(PageContainer, {
+    p: 0,
+    hidden,
+    ...componentsProps?.PageContainer,
+    children
+  }, undefined, false, undefined, this) : children;
+  return /* @__PURE__ */ jsxDEV12(Portal, {
     target: layout.sections[section],
-    children: includeContainer ? /* @__PURE__ */ jsxDEV11(Box, {
-      ...containerProps,
-      ...componentsProps?.container,
-      children
-    }, undefined, false, undefined, this) : children
+    children: includeContainer ? /* @__PURE__ */ jsxDEV12(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
-import { jsxDEV as jsxDEV12 } from "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 = createContext5(defaultFrameLayoutContext);
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+var layoutContext = createContext5(null);
 var useFrameLayout = () => {
   return useContext7(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 = useMemo3(() => {
-    return (value) => {
-      setLayouts((prev) => ({
-        ...prev,
-        [layoutId]: typeof value === "function" ? value(prev[layoutId]) : value
-      }));
-    };
-  }, [layoutId, setLayouts]);
-  const topSection = useCallback((n) => {
-    setLayout((prev) => ({
+  const defaultSections = useMemo3(() => ({
+    ["bottom" /* Bottom */]: null,
+    ["right" /* Right */]: null,
+    ["top" /* Top */]: null,
+    ["left" /* Left */]: null,
+    ["content" /* Content */]: null
+  }), []);
+  const setSections = useCallback((value) => {
+    setLayouts((prev) => ({
+      ...prev,
+      [layoutId]: {
+        type: "frame" /* Frame */,
+        sections: typeof value === "function" ? value(prev[layoutId]?.sections ?? defaultSections) : value
+      }
+    }));
+  }, [layoutId, setLayouts, defaultSections]);
+  const topSectionRef = useCallback((n) => {
+    setSections((prev) => ({
       ...prev,
-      sections: { ...prev?.sections, ["top" /* Top */]: n }
+      ["top" /* Top */]: n
     }));
-  }, [setLayout]);
-  const bottomSection = useCallback((n) => {
-    setLayout((prev) => ({
+  }, [setSections]);
+  const bottomSectionRef = useCallback((n) => {
+    setSections((prev) => ({
       ...prev,
-      sections: { ...prev?.sections, ["bottom" /* Bottom */]: n }
+      ["bottom" /* Bottom */]: n
     }));
-  }, [setLayout]);
-  const leftSection = useCallback((n) => {
-    setLayout((prev) => ({
+  }, [setSections]);
+  const leftSectionRef = useCallback((n) => {
+    setSections((prev) => ({
       ...prev,
-      sections: { ...prev?.sections, ["left" /* Left */]: n }
+      ["left" /* Left */]: n
     }));
-  }, [setLayout]);
-  const rightSection = useCallback((n) => {
-    setLayout((prev) => ({
+  }, [setSections]);
+  const rightSectionRef = useCallback((n) => {
+    setSections((prev) => ({
       ...prev,
-      sections: { ...prev?.sections, ["right" /* Right */]: n }
+      ["right" /* Right */]: n
     }));
-  }, [setLayout]);
-  let contentSection = children;
-  const childrenContainerProps = {
+  }, [setSections]);
+  const contentSectionRef = useCallback((n) => {
+    setSections((prev) => ({
+      ...prev,
+      ["content" /* Content */]: n
+    }));
+  }, [setSections]);
+  const contentSection = /* @__PURE__ */ jsxDEV13(Stack2, {
+    ref: contentSectionRef,
+    h: "100%",
+    gap: gutter,
     flex: 1,
-    ...componentsProps?.childrenContainer
-  };
-  if (variant === "plain" /* Plain */) {
-    contentSection = /* @__PURE__ */ jsxDEV12(Box2, {
-      ...childrenContainerProps,
-      children: contentSection
-    }, undefined, false, undefined, this);
-  } else if (variant === "sticky" /* Sticky */) {
-    contentSection = /* @__PURE__ */ jsxDEV12(ScrollArea, {
-      ...theme.scrollAreaProps,
-      ...childrenContainerProps,
-      children
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV12(layoutContext.Provider, {
-    value: { layoutId, layout, setLayout },
-    children: /* @__PURE__ */ jsxDEV12(Group2, {
+    ...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 = useMemo3(() => ({
+    type: "frame" /* Frame */,
+    sections: defaultSections,
+    ...layout,
+    layoutId
+  }), [layout?.sections, defaultSections, layoutId]);
+  return /* @__PURE__ */ jsxDEV13(layoutContext.Provider, {
+    value: layoutContextValue,
+    children: /* @__PURE__ */ jsxDEV13(Group2, {
       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__ */ jsxDEV12(Group2, {
-          ref: leftSection,
+        /* @__PURE__ */ jsxDEV13(Group2, {
+          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__ */ jsxDEV12(Stack2, {
+        /* @__PURE__ */ jsxDEV13(Stack2, {
           h: "100%",
           flex: 1,
           gap: 0,
           ...componentsProps?.verticalContainer,
+          className: clsx_default("remoraid-frame-layout-vertical-container", componentsProps?.verticalContainer?.className),
           children: [
-            /* @__PURE__ */ jsxDEV12(Stack2, {
-              h: "100%",
-              ref: topSection,
-              gap: 0,
+            /* @__PURE__ */ jsxDEV13(Stack2, {
+              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__ */ jsxDEV12(Stack2, {
-              h: "100%",
-              ref: bottomSection,
-              gap: 0,
+            includeScrollArea ? /* @__PURE__ */ jsxDEV13(ScrollArea, {
+              flex: 1,
+              ...theme.scrollAreaProps,
+              ...componentsProps?.ScrollArea,
+              children: contentSection
+            }, undefined, false, undefined, this) : contentSection,
+            /* @__PURE__ */ jsxDEV13(Stack2, {
+              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__ */ jsxDEV12(Group2, {
-          gap: 0,
-          ref: rightSection,
+        /* @__PURE__ */ jsxDEV13(Group2, {
+          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
-import { jsxDEV as jsxDEV13, Fragment as Fragment2 } from "react/jsx-dev-runtime";
-var defaultAppShellLayoutId = "remoraidAppShell";
-var defaultProps = {
-  navbarVariant: null,
-  footerVariant: null
-};
-function AppShell(props) {
-  const {
-    children,
-    navbarVariant,
-    footerVariant,
-    navbarPosition,
-    footerPosition,
-    appContext: appContext2,
-    componentsProps
-  } = {
-    ...defaultProps,
-    ...props
-  };
+var import_lodash2 = __toESM(require_lodash(), 1);
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+var remoraidAppShellLayoutId = "remoraid-app-shell";
+var defaultAppShellNavbarPositions = { ["minimal" /* Minimal */]: "left" /* Left */ };
+var defaultAppShellFooterPositions = { ["minimal" /* Minimal */]: "content" /* Content */ };
+function AppShell({
+  navbarVariant: navbarVariantProp,
+  footerVariant: footerVariantProp,
+  navbarPosition: navbarPositionProp,
+  footerPosition: footerPositionProp,
+  gutter = "md",
+  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]);
   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__ */ jsxDEV13(NavbarMinimal, {
+    navbar = /* @__PURE__ */ jsxDEV14(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__ */ jsxDEV13(FooterMinimal, {
+    footer = /* @__PURE__ */ jsxDEV14(FooterMinimal, {
       ...componentsProps?.footer
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV13(AppProvider, {
+  return /* @__PURE__ */ jsxDEV14(AppProvider, {
     appContext: appContext2,
     ...componentsProps?.AppProvider,
-    children: /* @__PURE__ */ jsxDEV13(FrameLayout_default, {
-      layoutId: defaultAppShellLayoutId,
-      ...componentsProps?.layout,
-      children: [
-        navbarPosition !== undefined && navbarPosition !== "content" /* Content */ && /* @__PURE__ */ jsxDEV13(FrameLayout_default.Element, {
-          section: navbarPosition,
-          componentsProps: { container: { ...navbarContainerProps } },
-          children: navbar
-        }, undefined, false, undefined, this),
-        footerPosition !== undefined && footerPosition !== "content" /* Content */ && /* @__PURE__ */ jsxDEV13(FrameLayout_default.Element, {
-          section: footerPosition,
-          componentsProps: { container: { ...footerContainerProps } },
-          children: footer
-        }, undefined, false, undefined, this),
-        navbarPosition !== undefined && navbarPosition === "content" /* Content */ && /* @__PURE__ */ jsxDEV13(Fragment2, {
-          children: navbar
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV13(Box3, {
-          ...componentsProps?.childrenContainer,
-          children
-        }, undefined, false, undefined, this),
-        footerPosition !== undefined && footerPosition === "content" /* Content */ && /* @__PURE__ */ jsxDEV13(Fragment2, {
-          children: footer
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
+    children: /* @__PURE__ */ jsxDEV14(Box2, {
+      h: "100vh",
+      ...componentsProps?.container,
+      children: /* @__PURE__ */ jsxDEV14(FrameLayout_default, {
+        layoutId: remoraidAppShellLayoutId,
+        gutter,
+        ...componentsProps?.layout,
+        children: [
+          navbarPosition !== null && /* @__PURE__ */ jsxDEV14(FrameLayout_default.Element, {
+            section: navbarPosition,
+            includeContainer: false,
+            ...import_lodash2.merge(navbarLayoutElementProps, componentsProps?.navbarLayoutElement),
+            children: navbar
+          }, undefined, false, undefined, this),
+          children,
+          footerPosition !== null && /* @__PURE__ */ jsxDEV14(FrameLayout_default.Element, {
+            section: footerPosition,
+            ...import_lodash2.merge(footerLayoutElementProps, componentsProps?.footerLayoutElement),
+            children: footer
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 var AppShell_default = Object.assign(AppShell, {
@@ -6456,25 +6554,6 @@ import React6, {
   useEffect as useEffect3
 } from "react";
 import { usePathname as usePathname2 } from "next/navigation";
-
-// src/core/components/Page/PageContainer/index.tsx
-import { Container } from "@mantine/core";
-import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
-function PageContainer({
-  children,
-  pt,
-  componentsProps
-}) {
-  const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsxDEV14(Container, {
-    size: theme.containerSize,
-    pt: pt ?? "md",
-    ...componentsProps?.container,
-    children
-  }, undefined, false, undefined, this);
-}
-
-// src/core/components/Page/index.tsx
 import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
 var pageContext = React6.createContext(null);
 var usePage = () => {
@@ -6484,7 +6563,7 @@ function Page({
   children,
   name,
   config,
-  pt,
+  p = 0,
   componentsProps
 }) {
   const pathname = usePathname2();
@@ -6500,7 +6579,7 @@ function Page({
   return /* @__PURE__ */ jsxDEV15(pageContext.Provider, {
     value: { name: name ?? pathname, pageId, ...config },
     children: /* @__PURE__ */ jsxDEV15(PageContainer, {
-      pt,
+      p,
       componentsProps: { container: componentsProps?.container },
       children
     }, undefined, false, undefined, this)
@@ -6522,8 +6601,9 @@ function ScrollableChipGroup({
   onChange,
   gap,
   componentsProps,
-  children
+  children: childrenProp
 }) {
+  const children = asChildrenOfType(Chip, childrenProp, "Check children passed to 'ScrollableChipGroup' component.");
   const theme = useRemoraidTheme();
   return /* @__PURE__ */ jsxDEV16(ScrollArea2, {
     ...theme.scrollAreaProps,
@@ -6553,12 +6633,12 @@ 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'.");
   }
+  const widgets = widgetsContext2.widgets[page.pageId] ?? {};
   return /* @__PURE__ */ jsxDEV17(Flex3, {
     justify: "flex-start",
     align: "center",
@@ -6574,94 +6654,60 @@ function WidgetSelectionHeader({
         orientation: "vertical"
       }, undefined, false, undefined, this),
       isPageRegistered(page.pageId) && /* @__PURE__ */ jsxDEV17(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__ */ jsxDEV17(Chip2, {
-          value: widgetId,
-          size: "sm",
-          disabled: disabledWidgets && disabledWidgets.includes(widgetId),
-          icon: /* @__PURE__ */ jsxDEV17(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__ */ jsxDEV17(Chip2, {
+            value: widgetId,
+            size: "sm",
+            disabled: disabledWidgets && disabledWidgets.includes(widgetId),
+            icon: /* @__PURE__ */ jsxDEV17(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
-import { ActionIcon, Transition } from "@mantine/core";
-import { IconX } from "@tabler/icons-react";
-import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
-function CloseButton({ widgetId }) {
-  const theme = useRemoraidTheme();
-  const { activeWidget, updateWidgetSelection } = useWidgets();
-  const page = usePage();
-  return /* @__PURE__ */ jsxDEV18(Transition, {
-    mounted: activeWidget === widgetId,
-    transition: "pop-top-right",
-    duration: theme.transitionDurations.short,
-    timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsxDEV18(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__ */ jsxDEV18(IconX, {
-        ...theme.iconProps.tiny
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
 // src/core/components/BadgeGroup/index.tsx
 import {
   Badge as Badge2,
   Group as Group3,
   Tooltip as Tooltip3
 } from "@mantine/core";
-import React7 from "react";
+import React7, { isValidElement as isValidElement2 } from "react";
 
 // src/core/components/BadgeMinimal/index.tsx
 import {
   Badge,
   Tooltip as Tooltip2,
-  Transition as Transition2
+  Transition
 } from "@mantine/core";
-import { jsxDEV as jsxDEV19 } from "react/jsx-dev-runtime";
-var isBadgeMinimalProps = (e) => {
-  if (typeof e !== "object") {
-    return false;
-  }
-  if (!("label" in e)) {
-    return false;
-  }
-  return true;
-};
-function BadgeMinimal(props) {
-  const { label, tooltip, mounted, componentsProps } = props;
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+function BadgeMinimal({
+  label,
+  tooltip,
+  mounted = true,
+  componentsProps
+}) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsxDEV19(Transition2, {
-    mounted: mounted !== false,
+  return /* @__PURE__ */ jsxDEV18(Transition, {
+    mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsxDEV19(Tooltip2, {
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV18(Tooltip2, {
       disabled: !tooltip,
       label: tooltip,
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsxDEV19(Badge, {
+      children: /* @__PURE__ */ jsxDEV18(Badge, {
         variant: "default",
         ...componentsProps?.badge,
         style: {
@@ -6676,36 +6722,39 @@ function BadgeMinimal(props) {
 }
 
 // src/core/components/BadgeGroup/index.tsx
-import { jsxDEV as jsxDEV20, Fragment as Fragment3 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19, Fragment as Fragment2 } from "react/jsx-dev-runtime";
 import { createElement } from "react";
 function BadgeGroup({
-  badges,
+  badges: badgesProp,
   gap,
   breakpoint,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  const numVisibleBadges = badges.filter((e) => isBadgeMinimalProps(e) ? e.mounted !== false : true).length;
-  return /* @__PURE__ */ jsxDEV20(Fragment3, {
+  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__ */ jsxDEV19(Fragment2, {
     children: [
-      /* @__PURE__ */ jsxDEV20(Group3, {
+      /* @__PURE__ */ jsxDEV19(Group3, {
         gap: gap ?? "xs",
         wrap: "nowrap",
         visibleFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
-        children: badges.map((e, i) => {
-          if (isBadgeMinimalProps(e)) {
-            return /* @__PURE__ */ createElement(BadgeMinimal, {
-              ...e,
-              key: i
-            });
-          }
-          return e;
+        children: badges.map((badge, i) => {
+          if (isValidElementOfType(BadgeMinimal, badge)) {
+            return badge;
+          } else if (isValidElement2(badge)) {
+            throw new TypeError(`Expected React element of type ${BadgeMinimal.name}, but received type: ${typeof badge.type === "string" ? badge.type : badge.type?.name ?? "unknown"}. Check the 'badges' property of this widget.`);
+          }
+          return /* @__PURE__ */ createElement(BadgeMinimal, {
+            ...badge,
+            key: i
+          });
         })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV20(Tooltip3, {
+      /* @__PURE__ */ jsxDEV19(Tooltip3, {
         label: `${numVisibleBadges} badge${numVisibleBadges === 1 ? "" : "s"}`,
         ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsxDEV20(Badge2, {
+        children: /* @__PURE__ */ jsxDEV19(Badge2, {
           hiddenFrom: breakpoint ?? theme.breakpoints.badgeGroupCollapse,
           hidden: numVisibleBadges === 0,
           variant: "light",
@@ -6721,37 +6770,28 @@ function BadgeGroup({
 // src/core/components/AlertMinimal/index.tsx
 import {
   Alert,
-  Transition as Transition3
+  Transition as Transition2
 } from "@mantine/core";
-import { jsxDEV as jsxDEV21 } from "react/jsx-dev-runtime";
-var isAlertMinimalProps = (e) => {
-  if (typeof e !== "object") {
-    return false;
-  }
-  if (!("category" in e)) {
-    return false;
-  }
-  return true;
-};
+import { jsxDEV as jsxDEV20 } from "react/jsx-dev-runtime";
 function AlertMinimal({
-  children,
   title,
   category,
   text,
   onClose,
-  mounted,
+  mounted = true,
   mt,
   mb,
-  componentsProps
+  componentsProps,
+  children
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsxDEV21(Transition3, {
+  return /* @__PURE__ */ jsxDEV20(Transition2, {
     mounted: mounted !== false,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsxDEV21(Alert, {
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV20(Alert, {
       ...theme.alertProps[category],
       title: title ?? theme.alertProps[category].title,
       withCloseButton: onClose !== undefined,
@@ -6772,233 +6812,589 @@ function AlertMinimal({
 }
 // src/core/components/RemoraidButton/index.tsx
 import {
-  ActionIcon as ActionIcon2,
+  ActionIcon,
   Button,
-  Tooltip as Tooltip4
+  Tooltip as Tooltip4,
+  Transition as Transition3
 } from "@mantine/core";
 import { IconClick } from "@tabler/icons-react";
-import { jsxDEV as jsxDEV22, Fragment as Fragment4 } from "react/jsx-dev-runtime";
-var isRemoraidButtonProps = (e) => {
-  if (typeof e !== "object") {
-    return false;
-  }
-  if (!("label" in e)) {
-    return false;
-  }
-  return true;
-};
+import { createElement as createElement2 } from "react";
+import { jsxDEV as jsxDEV21, Fragment as Fragment3 } from "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 ?? IconClick;
   const theme = useRemoraidTheme();
-  const iconProps = { ...theme.iconProps.medium, ...componentsProps?.icon };
-  const icon = props.icon ? /* @__PURE__ */ jsxDEV22(props.icon, {
-    ...iconProps
-  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV22(IconClick, {
-    ...iconProps
-  }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsxDEV22(Fragment4, {
-    children: [
-      /* @__PURE__ */ jsxDEV22(Tooltip4, {
-        label,
-        ...componentsProps?.tooltip,
-        children: /* @__PURE__ */ jsxDEV22(ActionIcon2, {
-          "aria-label": label,
-          variant: variant ?? "default",
+  const iconProps = { ...theme.iconProps[iconSize], ...componentsProps?.icon };
+  const iconElement = createElement2(icon, iconProps);
+  return /* @__PURE__ */ jsxDEV21(Transition3, {
+    mounted,
+    transition: "fade",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV21(Fragment3, {
+      children: [
+        /* @__PURE__ */ jsxDEV21(Tooltip4, {
+          label,
+          ...componentsProps?.tooltip,
+          children: /* @__PURE__ */ jsxDEV21(ActionIcon, {
+            "aria-label": label,
+            variant,
+            onClick,
+            loading,
+            size: size ? `input-${size}` : "input-sm",
+            color,
+            ...componentsProps?.button,
+            ...componentsProps?.ActionIcon,
+            hiddenFrom: !responsive ? undefined : breakpoint,
+            display: !responsive && !collapsed ? "none" : componentsProps?.ActionIcon?.display ?? componentsProps?.button?.display,
+            style: {
+              ...transitionStyle,
+              ...componentsProps?.ActionIcon?.style ?? componentsProps?.button?.style
+            },
+            children: iconElement
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV21(Button, {
           onClick,
           loading,
-          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__ */ jsxDEV22(Button, {
-        onClick,
-        loading,
-        variant: variant ?? "default",
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// src/core/components/Controls/ControlButton/index.tsx
+import {
+  ActionIcon as ActionIcon2,
+  Tooltip as Tooltip5,
+  Transition as Transition4
+} from "@mantine/core";
+import { IconClick as IconClick2 } from "@tabler/icons-react";
+import { jsxDEV as jsxDEV22 } from "react/jsx-dev-runtime";
+function ControlButton({
+  icon: Icon4 = IconClick2,
+  mounted = true,
+  size = "xs",
+  iconSize = "tiny" /* Tiny */,
+  onClick,
+  order,
+  color,
+  tooltip,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsxDEV22(Transition4, {
+    mounted,
+    transition: "pop-top-right",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV22(Tooltip5, {
+      label: tooltip,
+      disabled: !Boolean(tooltip),
+      ...componentsProps?.tooltip,
+      children: /* @__PURE__ */ jsxDEV22(ActionIcon2, {
+        "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__ */ jsxDEV22(Icon4, {
+          ...theme.iconProps[iconSize],
+          ...componentsProps?.icon
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 }
-// src/core/components/Widget/WidgetWrapper/index.tsx
+
+// src/core/components/Controls/index.tsx
+import { useRef, useState as useState6 } from "react";
 import {
+  Group as Group4,
   Paper as Paper2,
-  Transition as Transition4
+  Transition as Transition5
 } from "@mantine/core";
-import { useEffect as useEffect4 } from "react";
+import { IconGripHorizontal } from "@tabler/icons-react";
+var import_lodash3 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV23 } from "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] = useState6({
+    x: 0,
+    y: 0
+  });
+  const offsetRef = useRef({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+  const clamp = (v, min, max) => {
+    return Math.min(Math.max(v, min), max);
+  };
+  const handlePointerDown = (e) => {
+    if (e.target instanceof Element && e.target.closest("button,[data-control-button]")) {
+      return;
+    }
+    if (!containerRef.current) {
+      return;
+    }
+    const paperRect = containerRef.current.getBoundingClientRect();
+    offsetRef.current = {
+      x: e.clientX - paperRect.right,
+      y: e.clientY - paperRect.top
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    if (!e.currentTarget.hasPointerCapture(e.pointerId)) {
+      return;
+    }
+    if (!containerRef.current || !dragContainerRef.current) {
+      return;
+    }
+    const boxRect = dragContainerRef.current.getBoundingClientRect();
+    const paperRect = containerRef.current.getBoundingClientRect();
+    const rawX = e.clientX - boxRect.right - offsetRef.current.x;
+    const rawY = e.clientY - boxRect.top - offsetRef.current.y;
+    const maxX = boxRect.width - paperRect.width;
+    const maxY = boxRect.height - paperRect.height;
+    setPos({
+      x: clamp(-rawX, 0, maxX),
+      y: clamp(rawY, 0, maxY)
+    });
+  };
+  const handlePointerUp = (e) => {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  };
+  return /* @__PURE__ */ jsxDEV23(Transition5, {
+    mounted,
+    keepMounted: true,
+    transition: "pop",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV23(Paper2, {
+      ref: containerRef,
+      pos: "absolute",
+      p: gutter,
+      bg: theme.transparentBackground,
+      shadow: "md",
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      ...componentsProps?.container,
+      style: {
+        right: pos.x,
+        top: pos.y,
+        ...import_lodash3.merge(transitionStyle, componentsProps?.container?.style)
+      },
+      className: clsx_default("remoraid-controls", componentsProps?.container?.className),
+      children: /* @__PURE__ */ jsxDEV23(Group4, {
+        gap: gutter,
+        ref: groupRef,
+        wrap: "nowrap",
+        ...componentsProps?.group,
+        className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
+        children: [
+          /* @__PURE__ */ jsxDEV23(IconGripHorizontal, {
+            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__ */ jsxDEV23(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
+import { Paper as Paper3, Transition as Transition6 } from "@mantine/core";
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useRef as useRef3,
+  useState as useState8
+} from "react";
+import { IconX } from "@tabler/icons-react";
+
+// src/core/components/Pinnable/index.tsx
+import {
+  useMemo as useMemo4,
+  useRef as useRef2,
+  useState as useState7
+} from "react";
+import { IconPin, IconPinnedOff } from "@tabler/icons-react";
+import { Box as Box3, Portal as Portal2 } from "@mantine/core";
+import { jsxDEV as jsxDEV24 } from "react/jsx-dev-runtime";
+function Pinnable({
+  layoutType: layoutTypeProp,
+  section,
+  initialValue = false,
+  layoutId,
+  controlsContainer,
+  hidden = false,
+  componentsProps,
+  children
+}) {
+  const layoutType = layoutTypeProp ?? "frame" /* Frame */;
+  const { layouts } = useLayouts();
+  const [pinned, setPinned] = useState7(initialValue);
+  const containerRef = useRef2(null);
+  const layout = layouts[layoutId ?? remoraidAppShellLayoutId];
+  if (layout && layout.type !== layoutType) {
+    throw new TypeError(`Prop 'layoutId' in '${Pinnable.name}' refers to a layout of type ${layout.type}, expected ${layoutType}. Leave 'layoutId' undefined, if you want to use the layout in '${AppShell_default.name}' as reference layout.`);
+  }
+  const controlButton = useMemo4(() => /* @__PURE__ */ jsxDEV24(ControlButton, {
+    icon: pinned ? IconPinnedOff : IconPin,
+    tooltip: pinned ? "Unpin" : "Pin",
+    color: "green",
+    order: 100,
+    ...componentsProps?.button,
+    onClick: (e) => {
+      setPinned((p) => !p);
+      componentsProps?.button?.onClick?.(e);
+    }
+  }, undefined, false, undefined, this), [pinned, componentsProps?.button]);
+  const element = /* @__PURE__ */ jsxDEV24(Box3, {
+    pos: "relative",
+    ref: containerRef,
+    "data-hidden": hidden,
+    ...componentsProps?.container,
+    className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
+    children: [
+      controlsContainer === undefined ? /* @__PURE__ */ jsxDEV24(Controls, {
+        dragContainerRef: containerRef,
+        ...componentsProps?.controls,
+        children: controlButton
+      }, undefined, false, undefined, this) : controlsContainer !== null && /* @__PURE__ */ jsxDEV24(Portal2, {
+        target: controlsContainer,
+        children: controlButton
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+  if (!layout) {
+    return null;
+  }
+  if (pinned && layoutType === "frame" /* Frame */) {
+    return /* @__PURE__ */ jsxDEV24(FrameLayout_default.Element, {
+      layoutId,
+      section,
+      hidden,
+      ...componentsProps?.layoutElement,
+      children: element
+    }, undefined, false, undefined, this);
+  }
+  return element;
+}
+
+// src/core/components/Widget/WidgetWrapper/index.tsx
+var import_lodash4 = __toESM(require_lodash(), 1);
+import { jsxDEV as jsxDEV25 } from "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] = useState8(null);
+  const [hidden, setHidden] = useState8(!mounted);
   const pageRegistered = page ? isPageRegistered(page.pageId) : false;
-  useEffect4(() => {
-    if (!page) {
-      return;
-    }
-    if (!isWidgetRegistered(page.pageId, config.widgetId)) {
-      registerWidget(page.pageId, config);
-    }
-  }, [pageRegistered]);
-  return /* @__PURE__ */ jsxDEV23(Transition4, {
-    mounted: page !== null && isWidgetSelected(page.pageId, config.widgetId),
+  const containerRef = useRef3(null);
+  const controlsContainerRef = useCallback2((n) => {
+    setControlsContainer(n);
+  }, [setControlsContainer]);
+  const handleEnter = () => {
+    updateActiveWidget(config.widgetId);
+  };
+  const handleLeave = () => {
+    updateActiveWidget(null);
+  };
+  let element = /* @__PURE__ */ jsxDEV25(Transition6, {
+    mounted,
     transition: "fade-left",
     duration: theme.transitionDurations.medium,
     timingFunction: "ease",
-    children: (transitionStyle) => /* @__PURE__ */ jsxDEV23(Paper2, {
+    ...componentsProps?.transition,
+    onExited: () => {
+      setHidden(true);
+      componentsProps?.transition?.onExited?.();
+    },
+    children: (transitionStyle) => /* @__PURE__ */ jsxDEV25(Paper3, {
+      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__ */ jsxDEV23(CloseButton, {
-          widgetId: config.widgetId
+        /* @__PURE__ */ jsxDEV25(Controls, {
+          dragContainerRef: containerRef,
+          groupRef: controlsContainerRef,
+          mounted: activeWidget === config.widgetId,
+          ...componentsProps?.controls,
+          children: /* @__PURE__ */ jsxDEV25(ControlButton, {
+            mounted: withCloseButton,
+            icon: 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__ */ jsxDEV25(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);
+  }
+  useEffect4(() => {
+    if (!page) {
+      return;
+    }
+    if (!isWidgetRegistered(page.pageId, config.widgetId)) {
+      registerWidget(page.pageId, config);
+    }
+  }, [pageRegistered]);
+  useEffect4(() => {
+    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
 import {
   Center,
   Divider as Divider3,
-  Group as Group4,
+  Group as Group5,
   Loader,
-  Title
+  Title,
+  Stack as Stack3
 } from "@mantine/core";
-import { jsxDEV as jsxDEV24, Fragment as Fragment5 } from "react/jsx-dev-runtime";
-import { createElement as createElement2 } from "react";
+import { jsxDEV as jsxDEV26, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+import { createElement as createElement3 } from "react";
 function Widget({
-  children,
   id,
-  config,
   title,
-  badges,
-  buttons,
-  alerts,
+  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."));
+  const badges = badgesProp?.map((badge) => asElementOrPropsOfType(BadgeMinimal, badge, "Check the 'badges' property of this 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__ */ jsxDEV24(WidgetWrapper_default, {
+  return /* @__PURE__ */ jsxDEV26(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__ */ jsxDEV24(Group4, {
+      /* @__PURE__ */ jsxDEV26(Group5, {
         justify: "space-between",
         wrap: "nowrap",
         children: [
-          /* @__PURE__ */ jsxDEV24(Group4, {
+          /* @__PURE__ */ jsxDEV26(Group5, {
             gap: badgesGap,
             wrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsxDEV24(Title, {
+              /* @__PURE__ */ jsxDEV26(Title, {
                 order: 1,
                 size: "h3",
                 lineClamp: 1,
-                children: title
+                children: title ?? id
               }, undefined, false, undefined, this),
-              badges !== undefined && /* @__PURE__ */ jsxDEV24(BadgeGroup, {
+              badges !== undefined && /* @__PURE__ */ jsxDEV26(BadgeGroup, {
                 badges,
                 gap: badgesGap,
                 ...componentsProps?.badgeGroup
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV24(Group4, {
+          /* @__PURE__ */ jsxDEV26(Group5, {
             gap: buttonsGap,
             wrap: "nowrap",
-            children: buttons !== undefined && buttons.map((e, i) => {
-              if (isRemoraidButtonProps(e)) {
-                return /* @__PURE__ */ createElement2(RemoraidButton, {
-                  ...e,
-                  key: i
-                });
+            children: buttons !== undefined && buttons.map((button, i) => {
+              if (isValidElementOfType(RemoraidButton, button)) {
+                return button;
               }
-              return e;
+              return /* @__PURE__ */ createElement3(RemoraidButton, {
+                ...button,
+                key: i
+              });
             })
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV24(Divider3, {
-        my: "md"
+      /* @__PURE__ */ jsxDEV26(Divider3, {
+        my: "md",
+        ...componentsProps?.divider
       }, undefined, false, undefined, this),
-      alerts !== undefined && alerts.map((a, i) => {
-        if (isAlertMinimalProps(a)) {
-          return /* @__PURE__ */ createElement2(AlertMinimal, {
-            ...a,
-            mb: alertsGap,
+      /* @__PURE__ */ jsxDEV26(Stack3, {
+        align: "stretch",
+        gap: alertsGap,
+        mb: alerts && alerts.length > 0 ? "md" : 0,
+        ...componentsProps?.alertsContainer,
+        children: alerts?.map((alert, i) => {
+          if (isValidElementOfType(AlertMinimal, alert)) {
+            return alert;
+          }
+          return /* @__PURE__ */ createElement3(AlertMinimal, {
+            ...alert,
             key: i
           });
-        }
-        return a;
-      }),
-      loading ? /* @__PURE__ */ jsxDEV24(Center, {
-        children: /* @__PURE__ */ jsxDEV24(Loader, {
+        })
+      }, undefined, false, undefined, this),
+      loading ? /* @__PURE__ */ jsxDEV26(Center, {
+        children: /* @__PURE__ */ jsxDEV26(Loader, {
           ...componentsProps?.loader
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV24(Fragment5, {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV26(Fragment4, {
         children
       }, undefined, false, undefined, this)
     ]
@@ -7007,7 +7403,7 @@ function Widget({
 // src/core/components/NotFoundPage/index.tsx
 import { Alert as Alert2 } from "@mantine/core";
 import { usePathname as usePathname3 } from "next/navigation";
-import { jsxDEV as jsxDEV25 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV27 } from "react/jsx-dev-runtime";
 function NotFoundPage({
   children,
   message,
@@ -7015,11 +7411,11 @@ function NotFoundPage({
 }) {
   const pathname = usePathname3();
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsxDEV25(Page, {
+  return /* @__PURE__ */ jsxDEV27(Page, {
     name: "Not Found",
     ...componentsProps?.page,
     children: [
-      /* @__PURE__ */ jsxDEV25(Alert2, {
+      /* @__PURE__ */ jsxDEV27(Alert2, {
         ...theme.alertProps.negative,
         title: "404 - Page Not Found",
         children: message ?? `Could not find page ${pathname}.`
@@ -7030,7 +7426,7 @@ function NotFoundPage({
 }
 // src/core/components/EnvironmentShell/index.tsx
 import { Alert as Alert3 } from "@mantine/core";
-import { jsxDEV as jsxDEV26, Fragment as Fragment6 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV28, Fragment as Fragment5 } from "react/jsx-dev-runtime";
 function EnvironmentShell({
   children,
   environment,
@@ -7044,7 +7440,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__ */ jsxDEV26(Alert3, {
+  const alert = /* @__PURE__ */ jsxDEV28(Alert3, {
     ...theme.alertProps.neutral,
     title: alertTitle,
     m,
@@ -7052,12 +7448,12 @@ function EnvironmentShell({
     children: message ?? alertMessage
   }, undefined, false, undefined, this);
   if (undefinedKeys.length === 0) {
-    return /* @__PURE__ */ jsxDEV26(Fragment6, {
+    return /* @__PURE__ */ jsxDEV28(Fragment5, {
       children
     }, undefined, false, undefined, this);
   }
   if (withContainer) {
-    return /* @__PURE__ */ jsxDEV26(PageContainer, {
+    return /* @__PURE__ */ jsxDEV28(PageContainer, {
       componentsProps: { container: componentsProps?.container },
       children: alert
     }, undefined, false, undefined, this);
@@ -7070,15 +7466,15 @@ import { IconRestore } from "@tabler/icons-react";
 
 // src/core/components/SettingsWidget/SaveButton/index.tsx
 import { IconDeviceFloppy } from "@tabler/icons-react";
-import { Group as Group5 } from "@mantine/core";
-import { jsxDEV as jsxDEV27 } from "react/jsx-dev-runtime";
+import { Group as Group6 } from "@mantine/core";
+import { jsxDEV as jsxDEV29 } from "react/jsx-dev-runtime";
 function SaveButton({
   onSaveChanges,
   insideContainer,
   componentsProps
 }) {
   const settingsWidgetOptions = useSettingsWidgetContext();
-  const button = /* @__PURE__ */ jsxDEV27(RemoraidButton, {
+  const button = /* @__PURE__ */ jsxDEV29(RemoraidButton, {
     label: "Save Changes",
     icon: IconDeviceFloppy,
     onClick: onSaveChanges,
@@ -7093,7 +7489,7 @@ function SaveButton({
     }
   }, undefined, false, undefined, this);
   if (insideContainer !== false) {
-    return /* @__PURE__ */ jsxDEV27(Group5, {
+    return /* @__PURE__ */ jsxDEV29(Group6, {
       w: "100%",
       justify: "flex-end",
       mt: "md",
@@ -7105,7 +7501,7 @@ function SaveButton({
 }
 
 // src/core/components/SettingsWidget/index.tsx
-import { jsxDEV as jsxDEV28 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV30 } from "react/jsx-dev-runtime";
 var defaultSettingsWidgetContext = {};
 var settingsWidgetContext = createContext6(defaultSettingsWidgetContext);
 var useSettingsWidgetContext = () => {
@@ -7118,9 +7514,9 @@ function SettingsWidget({
   custom,
   widgetProps
 }) {
-  return /* @__PURE__ */ jsxDEV28(settingsWidgetContext.Provider, {
+  return /* @__PURE__ */ jsxDEV30(settingsWidgetContext.Provider, {
     value: { custom, unsavedChanges },
-    children: /* @__PURE__ */ jsxDEV28(Widget, {
+    children: /* @__PURE__ */ jsxDEV30(Widget, {
       title: "Settings",
       id: "settings",
       mt: "md",
@@ -7161,22 +7557,22 @@ import { Table as Table2 } from "@mantine/core";
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
 import { Table, Text as Text2 } from "@mantine/core";
-import { jsxDEV as jsxDEV29 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV31 } from "react/jsx-dev-runtime";
 function Row({
   children,
   label
 }) {
   const options = useSettingsTableOptions();
-  return /* @__PURE__ */ jsxDEV29(Table.Tr, {
+  return /* @__PURE__ */ jsxDEV31(Table.Tr, {
     children: [
-      /* @__PURE__ */ jsxDEV29(Table.Th, {
+      /* @__PURE__ */ jsxDEV31(Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsxDEV29(Text2, {
+        children: /* @__PURE__ */ jsxDEV31(Text2, {
           size: "sm",
           children: label
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV29(Table.Td, {
+      /* @__PURE__ */ jsxDEV31(Table.Td, {
         py: "xs",
         children
       }, undefined, false, undefined, this)
@@ -7185,7 +7581,7 @@ function Row({
 }
 
 // src/core/components/SettingsWidget/SettingsTable/index.tsx
-import { jsxDEV as jsxDEV30 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV32 } from "react/jsx-dev-runtime";
 var defaultSettingsTableOptions = {
   leftColumnWidth: "38.2%"
 };
@@ -7194,20 +7590,21 @@ var useSettingsTableOptions = () => {
   return useContext10(settingsTableOptionsContext);
 };
 function SettingsTable({
-  children,
-  leftColumnWidth
+  leftColumnWidth,
+  children: childrenProp
 }) {
+  const children = asChildrenOfType(Row, childrenProp, "Check children passed to 'SettingsTable' component.");
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsxDEV30(settingsTableOptionsContext.Provider, {
+  return /* @__PURE__ */ jsxDEV32(settingsTableOptionsContext.Provider, {
     value: {
       leftColumnWidth: leftColumnWidth ?? defaultSettingsTableOptions.leftColumnWidth
     },
-    children: /* @__PURE__ */ jsxDEV30(Table2, {
+    children: /* @__PURE__ */ jsxDEV32(Table2, {
       bg: theme.transparentBackground,
       withTableBorder: true,
       variant: "vertical",
       layout: "fixed",
-      children: /* @__PURE__ */ jsxDEV30(Table2.Tbody, {
+      children: /* @__PURE__ */ jsxDEV32(Table2.Tbody, {
         children
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
@@ -7217,21 +7614,21 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-import { cloneElement } from "react";
-var import_lodash = __toESM(require_lodash(), 1);
-import { Chip as Chip3, Group as Group6 } from "@mantine/core";
+var import_lodash5 = __toESM(require_lodash(), 1);
+import { Chip as Chip3, Group as Group7 } from "@mantine/core";
 import { IconLink as IconLink2 } from "@tabler/icons-react";
-import { jsxDEV as jsxDEV31 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV33 } from "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__ */ jsxDEV31(SettingsWidget_default, {
+  return /* @__PURE__ */ jsxDEV33(SettingsWidget_default, {
     widgetProps: {
       id: defaultNavbarSettingsWidgetId,
       title: "Navbar Settings",
@@ -7243,12 +7640,13 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash.isEqual(userExperience.navbar, initialUserExperience.navbar),
-    children: /* @__PURE__ */ jsxDEV31(SettingsTable_default, {
+    custom: !import_lodash5.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    children: /* @__PURE__ */ jsxDEV33(SettingsTable_default, {
+      ...componentsProps?.table,
       children: [
-        /* @__PURE__ */ jsxDEV31(SettingsTable_default.Row, {
+        /* @__PURE__ */ jsxDEV33(SettingsTable_default.Row, {
           label: "Select which pages you want to display or hide",
-          children: /* @__PURE__ */ jsxDEV31(Chip3.Group, {
+          children: /* @__PURE__ */ jsxDEV33(Chip3.Group, {
             multiple: true,
             value: app.navigablePages.filter((p) => !userExperience.navbar.hiddenPages.includes(p.href)).map((p) => p.href),
             onChange: (newValue) => {
@@ -7260,12 +7658,12 @@ function NavbarSettingsWidget({
                 }
               }));
             },
-            children: /* @__PURE__ */ jsxDEV31(Group6, {
+            children: /* @__PURE__ */ jsxDEV33(Group7, {
               justify: "flex-start",
               gap: "xs",
-              children: app.navigablePages.map((p) => ({ ...p, icon: p.icon ?? IconLink2 })).map((p, i) => /* @__PURE__ */ jsxDEV31(Chip3, {
+              children: app.navigablePages.map((p) => ({ ...p, icon: p.icon ?? IconLink2 })).map((p, i) => /* @__PURE__ */ jsxDEV33(Chip3, {
                 value: p.href,
-                icon: /* @__PURE__ */ jsxDEV31(p.icon, {
+                icon: /* @__PURE__ */ jsxDEV33(p.icon, {
                   ...theme.iconProps.tiny,
                   color: theme.primaryColor
                 }, undefined, false, undefined, this),
@@ -7275,14 +7673,63 @@ function NavbarSettingsWidget({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         }, "select-hidden-pages", false, undefined, this),
-        ...(additionalRows ?? []).map((row, i) => row.key ? row : cloneElement(row, { key: i }))
-      ],
-      ...componentsProps?.table
-    }, undefined, false, undefined, this)
+        additionalRows && additionalRows.map((row, i) => {
+          if (isValidElementOfType(SettingsTable_default.Row, row)) {
+            return row;
+          }
+          return /* @__PURE__ */ jsxDEV33(SettingsTable_default.Row, {
+            ...row
+          }, i, false, undefined, this);
+        })
+      ]
+    }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
+// src/core/components/ContextClusterProvider/index.tsx
+import React8 from "react";
+import { jsxDEV as jsxDEV34 } from "react/jsx-dev-runtime";
+var createContextCluster = (generalDefaultValue, staticIds) => {
+  const isStaticId = (id) => {
+    if (staticIds?.find((staticId) => staticId === id)) {
+      return true;
+    }
+    return false;
+  };
+  const contexts = {};
+  const defaultValues = {};
+  const createContext8 = (id, defaultValue) => {
+    const context = React8.createContext(defaultValue ?? generalDefaultValue);
+    contexts[id] = context;
+    defaultValues[id] = defaultValue ?? generalDefaultValue;
+    return context;
+  };
+  const useContext11 = (id) => {
+    if (isStaticId(id)) {
+      return contexts[id] ? React8.useContext(contexts[id]) : generalDefaultValue;
+    }
+    return contexts[id] ? React8.useContext(contexts[id]) : null;
+  };
+  return {
+    contexts,
+    defaultValues,
+    generalDefaultValue,
+    createContext: createContext8,
+    useContext: useContext11
+  };
+};
+function ContextClusterProvider({
+  cluster,
+  values = {},
+  children
+}) {
+  return Object.entries(cluster.contexts).reduceRight((t, [id, context]) => context ? /* @__PURE__ */ jsxDEV34(context.Provider, {
+    value: values[id] ?? cluster.defaultValues[id] ?? cluster.generalDefaultValue,
+    children: t
+  }, undefined, false, undefined, this) : t, children);
+}
 export {
   useWidgets,
+  useWidget,
   useSettingsWidgetContext as useSettingsWidgetOptions,
   useSettingsTableOptions,
   useRemoraidUserExperience,
@@ -7293,19 +7740,27 @@ export {
   useHydrationStatus,
   useHydratedMantineColorScheme,
   useFrameLayout,
-  isFrameLayout,
+  remoraidAppShellLayoutId,
+  isValidElementOfType,
+  getElementTypeName,
+  getDefaultWidgetContext,
   defaultUserExperienceCookieName,
   defaultUserExperience,
   defaultSettingsWidgetContext as defaultSettingsWidgetOptions,
   defaultSettingsTableOptions,
   defaultNavbarSettingsWidgetId,
   defaultLayoutsContext,
-  defaultFrameLayoutContext,
-  defaultAppShellLayoutId,
+  defaultAppShellNavbarPositions,
+  defaultAppShellFooterPositions,
   defaultAppContext,
   createUserExperienceContext,
   createRemoraidTheme,
-  WidgetWrapper_default as WidgetWrapper,
+  createContextCluster,
+  co,
+  asElementOrPropsOfType,
+  asElementOfType,
+  asChildrenOfType,
+  WidgetWrapper,
   WidgetSelectionHeader,
   Widget,
   UserExperienceProviderWrapper,
@@ -7317,6 +7772,7 @@ export {
   RemoraidIconSize,
   RemoraidButton,
   RemoraidBreakpoint,
+  Pinnable,
   PageContainer,
   Page,
   NotFoundPage,
@@ -7324,11 +7780,13 @@ export {
   NavbarSettingsWidget,
   LayoutType,
   HydrationStatusProvider,
-  FrameLayoutVariant,
   FrameLayoutSection,
   FrameLayout_default as FrameLayout,
   FooterVariant,
   EnvironmentShell,
+  Controls,
+  ControlButton,
+  ContextClusterProvider,
   BadgeMinimal,
   BadgeGroup,
   AppShell_default as AppShell,