remoraid 3.1.1 → 3.5.0

package/dist/core/index.cjs

@@ -5475,10 +5475,9 @@ __export(exports_core, {
   useFrameLayoutElement: () => useFrameLayoutElement,
   useFrameLayout: () => useFrameLayout,
   useAppShellUserExperience: () => useAppShellUserExperience,
-  supportedNavbarPositions: () => supportedNavbarPositions,
-  supportedFooterPositions: () => supportedFooterPositions,
   scrollToWidget: () => scrollToWidget,
   remoraidAppShellLayoutId: () => remoraidAppShellLayoutId,
+  navbarMetadata: () => navbarMetadata,
   isValidElementOfType: () => isValidElementOfType,
   isIcon: () => isIcon,
   getElementTypeName: () => getElementTypeName,
@@ -5486,6 +5485,7 @@ __export(exports_core, {
   getDefaultNavigationElements: () => getDefaultNavigationElements,
   getDefaultButtonIconSize: () => getDefaultButtonIconSize,
   getCssVars: () => getCssVars,
+  footerMetadata: () => footerMetadata,
   defaultUserExperienceCookieName: () => defaultUserExperienceCookieName,
   defaultUserExperience: () => defaultUserExperience,
   defaultTransitionDurations: () => defaultTransitionDurations,
@@ -5493,10 +5493,8 @@ __export(exports_core, {
   defaultSettingsTableOptions: () => defaultSettingsTableOptions,
   defaultRemoraidButtonSize: () => defaultRemoraidButtonSize,
   defaultNavbarSettingsWidgetId: () => defaultNavbarSettingsWidgetId,
-  defaultNavbarPositions: () => defaultNavbarPositions,
   defaultLayoutsContext: () => defaultLayoutsContext,
   defaultFooterSettingsWidgetId: () => defaultFooterSettingsWidgetId,
-  defaultFooterPositions: () => defaultFooterPositions,
   defaultAppShellUserExperienceCookieName: () => defaultAppShellUserExperienceCookieName,
   defaultAppShellUserExperience: () => defaultAppShellUserExperience,
   defaultAppContext: () => defaultAppContext,
@@ -5727,10 +5725,12 @@ function WidgetsProvider({
 var NavbarVariant;
 ((NavbarVariant2) => {
   NavbarVariant2["Minimal"] = "minimal";
+  NavbarVariant2["Custom"] = "custom";
 })(NavbarVariant ||= {});
 var FooterVariant;
 ((FooterVariant2) => {
   FooterVariant2["Minimal"] = "minimal";
+  FooterVariant2["Custom"] = "custom";
 })(FooterVariant ||= {});
 var NavbarMode;
 ((NavbarMode2) => {
@@ -5866,6 +5866,34 @@ var isIcon = (value) => {
   const candidate = value;
   return "render" in candidate && typeof candidate.render === "function";
 };
+var navbarMetadata = {
+  ["minimal" /* Minimal */]: {
+    defaultPosition: "left" /* Left */,
+    supportedModes: [
+      "collapsed" /* Collapsed */,
+      "expanded" /* Expanded */,
+      "responsive" /* Responsive */
+    ],
+    supportedPositions: [
+      null,
+      "top" /* Top */,
+      "bottom" /* Bottom */,
+      "left" /* Left */,
+      "right" /* Right */,
+      "content" /* Content */
+    ]
+  }
+};
+var footerMetadata = {
+  ["minimal" /* Minimal */]: {
+    defaultPosition: "content" /* Content */,
+    supportedPositions: [
+      null,
+      "bottom" /* Bottom */,
+      "content" /* Content */
+    ]
+  }
+};
 
 // src/core/components/RemoraidProvider/ThemeProvider/index.tsx
 var import_core2 = require("@mantine/core");
@@ -5967,6 +5995,18 @@ var createRemoraidTheme = (customTheme, dependencies) => {
         ["medium" /* Medium */]: { size: 24, stroke: 1.7 },
         ["large" /* Large */]: { size: 28, stroke: 1.7 },
         ["huge" /* Huge */]: { size: 44, stroke: 1.7 }
+      },
+      Scroller: {
+        edgeGradientColor: "transparent",
+        className: "remoraid-masked-scroller",
+        startControlIcon: /* @__PURE__ */ jsx_runtime3.jsx(import_icons_react.IconArrowLeft, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        }),
+        endControlIcon: /* @__PURE__ */ jsx_runtime3.jsx(import_icons_react.IconArrowRight, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        })
       }
     }
   };
@@ -5978,7 +6018,8 @@ var getCssVars = (theme) => {
     transitionDurations,
     primaryGutter,
     containerSize,
-    transparentBackground
+    transparentBackground,
+    componentsProps: { icons }
   } = theme;
   return {
     "--mantine-color-body": bodyColor,
@@ -5990,6 +6031,11 @@ var getCssVars = (theme) => {
     ...Object.entries(transitionDurations).reduce((t, [key, value]) => ({
       ...t,
       [`--remoraid-transition-duration-${key}`]: `${value}ms`
+    }), {}),
+    ...Object.entries(icons).reduce((t, [key, { size, stroke }]) => ({
+      ...t,
+      [`--remoraid-icon-size-${key}`]: typeof size === "number" ? `${size}px` : size,
+      [`--remoraid-icon-stroke-${key}`]: `${stroke}`
     }), {})
   };
 };
@@ -6227,7 +6273,9 @@ var defaultAppContext = {
   name: "Hello, World!",
   nav: [],
   navbarVariant: "minimal" /* Minimal */,
+  navbarMetadata: navbarMetadata["minimal" /* Minimal */],
   footerVariant: "minimal" /* Minimal */,
+  footerMetadata: footerMetadata["minimal" /* Minimal */],
   navbarMobileVariant: null
 };
 var appContext = import_react9.createContext(defaultAppContext);
@@ -6238,9 +6286,30 @@ function AppProvider({
   appContext: appContextProp,
   children
 }) {
-  const { logo, ...appContextPropWithoutLogo } = appContextProp;
+  const {
+    navbarMetadata: navbarMetadataProp,
+    footerMetadata: footerMetadataProp,
+    logo,
+    ...mergeableAppContext
+  } = appContextProp;
+  const {
+    navbarMetadata: _defaultNavbarMetadata,
+    footerMetadata: _defaultFooterMetadata,
+    ...defaultAppContextWithoutMetadata
+  } = defaultAppContext;
+  const resolvedNavbarVariant = appContextProp.navbarVariant === undefined ? defaultAppContext.navbarVariant : appContextProp.navbarVariant;
+  const resolvedFooterVariant = appContextProp.footerVariant === undefined ? defaultAppContext.footerVariant : appContextProp.footerVariant;
   return /* @__PURE__ */ jsx_runtime9.jsx(appContext.Provider, {
-    value: { ...import_lodash4.merge(defaultAppContext, appContextPropWithoutLogo), logo },
+    value: {
+      ...import_lodash4.merge({}, defaultAppContextWithoutMetadata, mergeableAppContext),
+      logo,
+      ...resolvedNavbarVariant === null ? {} : {
+        navbarMetadata: resolvedNavbarVariant === "custom" /* Custom */ ? navbarMetadataProp : navbarMetadata[resolvedNavbarVariant]
+      },
+      ...resolvedFooterVariant === null ? {} : {
+        footerMetadata: resolvedFooterVariant === "custom" /* Custom */ ? footerMetadataProp : footerMetadata[resolvedFooterVariant]
+      }
+    },
     children
   });
 }
@@ -6249,16 +6318,152 @@ function AppProvider({
 var import_lodash13 = __toESM(require_lodash());
 
 // src/core/components/AppShell/AppShellUserExperienceProvider/index.tsx
+var import_react10 = require("react");
+var import_lodash5 = __toESM(require_lodash());
+var jsx_runtime10 = require("react/jsx-runtime");
+var defaultAppShellUserExperience = {
+  navbar: {
+    position: null,
+    mobilePosition: null,
+    mode: "responsive" /* Responsive */
+  },
+  footer: {
+    position: null
+  }
+};
+var defaultAppShellUserExperienceCookieName = "remoraid-app-shell-user-experience";
+var appShellUserExperienceContext = createUserExperienceContext(defaultAppShellUserExperience);
+var useAppShellUserExperience = () => {
+  return import_react10.useContext(appShellUserExperienceContext);
+};
+function AppShellUserExperienceProvider({
+  children,
+  initialValue,
+  cookieName
+}) {
+  const { navbarVariant, navbarMetadata: navbarMetadata2, footerVariant, footerMetadata: footerMetadata2 } = useRemoraidApp();
+  const isValidUserExperience = (x) => {
+    if (typeof x !== "object") {
+      return false;
+    }
+    if (x === null) {
+      return false;
+    }
+    if (!("navbar" in x)) {
+      return false;
+    }
+    if (!("footer" in x)) {
+      return false;
+    }
+    return true;
+  };
+  return /* @__PURE__ */ jsx_runtime10.jsx(UserExperienceProviderWrapper, {
+    context: appShellUserExperienceContext,
+    isValidUserExperience,
+    cookieName: cookieName ?? defaultAppShellUserExperienceCookieName,
+    defaultUserExperience: defaultAppShellUserExperience,
+    initialValue: import_lodash5.merge({
+      navbar: {
+        position: navbarVariant === null ? null : navbarMetadata2.defaultPosition
+      },
+      footer: {
+        position: footerVariant === null ? null : footerMetadata2.defaultPosition
+      }
+    }, initialValue),
+    children
+  });
+}
+
+// src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
 var import_react17 = require("react");
-var import_lodash12 = __toESM(require_lodash());
 
-// src/core/components/AppShell/Footer/FooterMinimal/index.tsx
-var import_core6 = require("@mantine/core");
-var import_icons_react2 = require("@tabler/icons-react");
-var import_lodash6 = __toESM(require_lodash());
+// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+var import_core8 = require("@mantine/core");
+var import_lodash8 = __toESM(require_lodash());
 
-// src/core/components/Page/PageContainer/index.tsx
+// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/NavigationMenu/index.tsx
 var import_core3 = require("@mantine/core");
+var import_react11 = require("react");
+var jsx_runtime11 = require("react/jsx-runtime");
+function NavigationMenu({
+  target,
+  elements,
+  label,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  const mantineTheme = import_core3.useMantineTheme();
+  const router = useRemoraidRouter();
+  const { pathname } = router;
+  const item = (element, style) => {
+    const isLeaf2 = element.children === undefined || element.children.length === 0;
+    const Menu2 = isLeaf2 ? import_core3.Menu : import_core3.Menu.Sub;
+    return /* @__PURE__ */ jsx_runtime11.jsx(Menu2.Item, {
+      leftSection: element.icon ? /* @__PURE__ */ jsx_runtime11.jsx(element.icon, {
+        ...theme.componentsProps.icons.small
+      }) : undefined,
+      c: element.type === "anchor" /* Anchor */ && element.href === pathname ? mantineTheme.primaryColor : undefined,
+      onClick: (e) => {
+        if (element.type === "anchor" /* Anchor */) {
+          router.push(element.href);
+        }
+        if (element.type === "button" /* Button */) {
+          element.onClick(e);
+        }
+      },
+      style,
+      children: element.label
+    });
+  };
+  const isRoot = import_react11.isValidElement(target);
+  const isLeaf = elements === undefined || elements.length === 0;
+  const Menu = isRoot ? import_core3.Menu : import_core3.Menu.Sub;
+  const menuProps = isRoot ? { trigger: "click-hover", ...componentsProps?.Menu } : { ...componentsProps?.MenuSub };
+  return /* @__PURE__ */ jsx_runtime11.jsx(import_core3.Transition, {
+    mounted: isRoot ? true : target.mounted ?? true,
+    ...componentsProps?.transition,
+    children: (transitionStyle) => {
+      if (isLeaf) {
+        if (isRoot) {
+          return target;
+        }
+        return item(target, transitionStyle);
+      }
+      return /* @__PURE__ */ jsx_runtime11.jsxs(Menu, {
+        ...menuProps,
+        children: [
+          /* @__PURE__ */ jsx_runtime11.jsx(Menu.Target, {
+            children: isRoot ? /* @__PURE__ */ jsx_runtime11.jsx(import_core3.Box, {
+              ...componentsProps?.rootTargetContainer,
+              children: target
+            }) : item(target, transitionStyle)
+          }),
+          /* @__PURE__ */ jsx_runtime11.jsxs(Menu.Dropdown, {
+            children: [
+              label !== undefined && /* @__PURE__ */ jsx_runtime11.jsx(import_core3.Menu.Label, {
+                children: label
+              }),
+              elements.map((element, i) => /* @__PURE__ */ jsx_runtime11.jsx(NavigationMenu, {
+                target: element,
+                elements: element.children,
+                componentsProps
+              }, `navigation-menu-${i}`))
+            ]
+          })
+        ]
+      });
+    }
+  });
+}
+
+// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+var import_icons_react3 = require("@tabler/icons-react");
+
+// src/core/components/RemoraidButton/index.tsx
+var import_core4 = require("@mantine/core");
+var import_icons_react2 = require("@tabler/icons-react");
+var import_react12 = require("react");
+var import_lodash6 = __toESM(require_lodash());
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -6282,102 +6487,102 @@ function clsx() {
 }
 var clsx_default = clsx;
 
-// src/core/components/Page/PageContainer/index.tsx
-var jsx_runtime10 = require("react/jsx-runtime");
-function PageContainer({
-  children,
-  p = 0,
-  hidden = false,
+// src/core/components/RemoraidButton/index.tsx
+var jsx_runtime12 = require("react/jsx-runtime");
+var defaultRemoraidButtonSize = "sm";
+function RemoraidButton({
+  label,
+  responsive: responsiveProp,
+  breakpoint: breakpointProp,
+  collapsed: collapsedProp,
+  size = defaultRemoraidButtonSize,
+  color,
+  onClick,
+  loading,
+  variant = "default",
+  mounted = true,
+  icon: iconProp,
+  iconSize: iconSizeProp,
+  clickTransformation = "default" /* Default */,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_runtime10.jsx(import_core3.Container, {
-    size: theme.containerSize,
-    p,
-    w: "100%",
-    "data-hidden": hidden,
-    ...componentsProps?.container,
-    className: clsx_default("remoraid-page-container", componentsProps?.container?.className),
-    children
+  const responsive = responsiveProp ?? true;
+  const breakpoint = breakpointProp ?? theme.breakpoints.buttonCollapse;
+  const collapsed = collapsedProp ?? false;
+  const iconSize = iconSizeProp ?? getDefaultButtonIconSize(size);
+  const Icon2 = iconProp ?? import_icons_react2.IconClick;
+  const iconElement = import_react12.isValidElement(Icon2) ? Icon2 : /* @__PURE__ */ jsx_runtime12.jsx(Icon2, {
+    ...import_lodash6.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
   });
-}
-
-// src/core/components/FrameLayout/index.tsx
-var import_core5 = require("@mantine/core");
-var import_react11 = require("react");
-
-// src/core/components/FrameLayout/Element/index.tsx
-var import_react10 = require("react");
-var import_core4 = 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/FrameLayout/Element/index.tsx
-var import_lodash5 = __toESM(require_lodash());
-var jsx_runtime11 = require("react/jsx-runtime");
-var layoutElementContext = import_react10.createContext(null);
-var useFrameLayoutElement = () => {
-  return import_react10.useContext(layoutElementContext);
-};
-function Element2({
-  section,
-  includeContainer = true,
-  includePageContainer = false,
-  layoutId,
-  hidden = false,
-  componentsProps,
-  children
-}) {
-  const { layouts } = useLayouts();
-  const closestLayout = useFrameLayout();
-  if (!closestLayout) {
-    throw new InvalidComponentUsageError("FrameLayout.Element", "must be used as child of 'FrameLayout'.");
-  }
-  const layout = layouts[layoutId ?? closestLayout.layoutId];
-  if (!layout) {
-    return 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%";
-  }
-  const element = includePageContainer ? /* @__PURE__ */ jsx_runtime11.jsx(PageContainer, {
-    p: 0,
-    hidden,
-    ...componentsProps?.PageContainer,
-    children
-  }) : children;
-  return /* @__PURE__ */ jsx_runtime11.jsx(import_core4.Portal, {
-    target: layout.sections[section],
-    children: /* @__PURE__ */ jsx_runtime11.jsx(layoutElementContext.Provider, {
-      value: { layoutType: "frame" /* Frame */, section },
-      children: includeContainer ? /* @__PURE__ */ jsx_runtime11.jsx(import_core4.Box, {
-        "data-hidden": hidden,
-        ...import_lodash5.merge(containerProps, componentsProps?.container),
-        className: clsx_default("remoraid-frame-layout-element", containerProps?.className, componentsProps?.container?.className),
-        children: element
-      }) : element
+  const clickTransformationClassNames = {
+    ["default" /* Default */]: null,
+    ["none" /* None */]: "remoraid-button-none",
+    ["scale" /* Scale */]: "remoraid-button-scale",
+    ["tiltDown" /* TiltDown */]: "remoraid-button-tilt-down",
+    ["tiltUp" /* TiltUp */]: "remoraid-button-tilt-up",
+    ["tiltLeft" /* TiltLeft */]: "remoraid-button-tilt-left",
+    ["tiltRight" /* TiltRight */]: "remoraid-button-tilt-right"
+  };
+  const clickTransformationClass = clickTransformationClassNames[clickTransformation];
+  return /* @__PURE__ */ jsx_runtime12.jsx(import_core4.Transition, {
+    mounted,
+    transition: "fade",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime12.jsxs(jsx_runtime12.Fragment, {
+      children: [
+        /* @__PURE__ */ jsx_runtime12.jsx(import_core4.Tooltip, {
+          label,
+          ...componentsProps?.tooltip,
+          children: /* @__PURE__ */ jsx_runtime12.jsx(import_core4.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: import_lodash6.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.ActionIcon?.style),
+            className: clsx_default(clickTransformationClass, componentsProps?.ActionIcon?.className, componentsProps?.button?.className),
+            children: iconElement
+          })
+        }),
+        /* @__PURE__ */ jsx_runtime12.jsx(import_core4.Button, {
+          onClick,
+          loading,
+          variant,
+          size,
+          color,
+          leftSection: iconProp !== undefined ? iconElement : undefined,
+          ...componentsProps?.button,
+          ...componentsProps?.Button,
+          visibleFrom: !responsive ? undefined : breakpoint,
+          display: !responsive && collapsed ? "none" : componentsProps?.Button?.display ?? componentsProps?.button?.display,
+          style: import_lodash6.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.Button?.style),
+          className: clsx_default(clickTransformationClass, componentsProps?.Button?.className, componentsProps?.button?.className),
+          children: label
+        })
+      ]
     })
   });
 }
 
+// src/core/components/FrameLayout/Element/index.tsx
+var import_react14 = require("react");
+var import_core7 = require("@mantine/core");
+
 // src/core/components/FrameLayout/index.tsx
-var jsx_runtime12 = require("react/jsx-runtime");
-var layoutContext = import_react11.createContext(null);
+var import_core5 = require("@mantine/core");
+var import_react13 = require("react");
+var jsx_runtime13 = require("react/jsx-runtime");
+var layoutContext = import_react13.createContext(null);
 var useFrameLayout = () => {
-  return import_react11.useContext(layoutContext);
+  return import_react13.useContext(layoutContext);
 };
 function FrameLayout({
   layoutId,
@@ -6388,14 +6593,14 @@ function FrameLayout({
 }) {
   const { layouts, setLayouts } = useLayouts();
   const layout = layouts[layoutId];
-  const defaultSections = import_react11.useMemo(() => ({
+  const defaultSections = import_react13.useMemo(() => ({
     ["bottom" /* Bottom */]: null,
     ["right" /* Right */]: null,
     ["top" /* Top */]: null,
     ["left" /* Left */]: null,
     ["content" /* Content */]: null
   }), []);
-  const setSections = import_react11.useCallback((value) => {
+  const setSections = import_react13.useCallback((value) => {
     setLayouts((prev) => ({
       ...prev,
       [layoutId]: {
@@ -6404,37 +6609,37 @@ function FrameLayout({
       }
     }));
   }, [layoutId, setLayouts, defaultSections]);
-  const topSectionRef = import_react11.useCallback((n) => {
+  const topSectionRef = import_react13.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["top" /* Top */]: n
     }));
   }, [setSections]);
-  const bottomSectionRef = import_react11.useCallback((n) => {
+  const bottomSectionRef = import_react13.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["bottom" /* Bottom */]: n
     }));
   }, [setSections]);
-  const leftSectionRef = import_react11.useCallback((n) => {
+  const leftSectionRef = import_react13.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["left" /* Left */]: n
     }));
   }, [setSections]);
-  const rightSectionRef = import_react11.useCallback((n) => {
+  const rightSectionRef = import_react13.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["right" /* Right */]: n
     }));
   }, [setSections]);
-  const contentSectionRef = import_react11.useCallback((n) => {
+  const contentSectionRef = import_react13.useCallback((n) => {
     setSections((prev) => ({
       ...prev,
       ["content" /* Content */]: n
     }));
   }, [setSections]);
-  const contentSection = /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Stack, {
+  const contentSection = /* @__PURE__ */ jsx_runtime13.jsx(import_core5.Stack, {
     ref: contentSectionRef,
     h: "100%",
     gap: gutter,
@@ -6443,15 +6648,15 @@ function FrameLayout({
     className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-content-section", componentsProps?.sectionContainers?.["content" /* Content */]?.className),
     children
   });
-  const layoutContextValue = import_react11.useMemo(() => ({
+  const layoutContextValue = import_react13.useMemo(() => ({
     type: "frame" /* Frame */,
     sections: defaultSections,
     ...layout,
     layoutId
   }), [layout?.sections, defaultSections, layoutId]);
-  return /* @__PURE__ */ jsx_runtime12.jsx(layoutContext.Provider, {
+  return /* @__PURE__ */ jsx_runtime13.jsx(layoutContext.Provider, {
     value: layoutContextValue,
-    children: /* @__PURE__ */ jsx_runtime12.jsxs(import_core5.Group, {
+    children: /* @__PURE__ */ jsx_runtime13.jsxs(import_core5.Group, {
       gap: 0,
       h: "100%",
       w: "100%",
@@ -6462,7 +6667,7 @@ function FrameLayout({
       },
       className: clsx_default("remoraid-frame-layout", componentsProps?.horizontalContainer?.className),
       children: [
-        /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Group, {
+        /* @__PURE__ */ jsx_runtime13.jsx(import_core5.Group, {
           ref: leftSectionRef,
           h: "100%",
           wrap: "nowrap",
@@ -6471,293 +6676,142 @@ function FrameLayout({
           ...componentsProps?.sectionContainers?.["left" /* Left */],
           className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-left-section", componentsProps?.sectionContainers?.["left" /* Left */]?.className)
         }),
-        /* @__PURE__ */ jsx_runtime12.jsxs(import_core5.Stack, {
+        /* @__PURE__ */ jsx_runtime13.jsxs(import_core5.Stack, {
           h: "100%",
           flex: 1,
           gap: 0,
           ...componentsProps?.verticalContainer,
           className: clsx_default("remoraid-frame-layout-vertical-container", componentsProps?.verticalContainer?.className),
           children: [
-            /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Stack, {
+            /* @__PURE__ */ jsx_runtime13.jsx(import_core5.Stack, {
               ref: topSectionRef,
               gap: gutter,
               flex: 0,
               ...componentsProps?.sectionContainers?.["top" /* Top */],
               className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-top-section", componentsProps?.sectionContainers?.["top" /* Top */]?.className)
             }),
-            includeScrollArea ? /* @__PURE__ */ jsx_runtime12.jsx(import_core5.ScrollArea, {
+            includeScrollArea ? /* @__PURE__ */ jsx_runtime13.jsx(import_core5.ScrollArea, {
               flex: 1,
               ...componentsProps?.ScrollArea,
               children: contentSection
             }) : contentSection,
-            /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Stack, {
+            /* @__PURE__ */ jsx_runtime13.jsx(import_core5.Stack, {
               ref: bottomSectionRef,
               gap: gutter,
               flex: 0,
               ...componentsProps?.sectionContainers?.["bottom" /* Bottom */],
               className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-bottom-section", componentsProps?.sectionContainers?.["bottom" /* Bottom */]?.className)
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsx_runtime12.jsx(import_core5.Group, {
-          ref: rightSectionRef,
-          h: "100%",
-          gap: gutter,
-          pl: 0,
-          wrap: "nowrap",
-          ...componentsProps?.sectionContainers?.["right" /* Right */],
-          className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-right-section", componentsProps?.sectionContainers?.["right" /* Right */]?.className)
-        })
-      ]
-    })
-  });
-}
-var FrameLayout_default = Object.assign(FrameLayout, {
-  Element: Element2
-});
-
-// src/core/components/AppShell/Footer/FooterMinimal/index.tsx
-var jsx_runtime13 = require("react/jsx-runtime");
-function FooterMinimal({
-  icon: Icon2 = import_icons_react2.IconPennant,
-  componentsProps
-}) {
-  const theme = useRemoraidTheme();
-  const {
-    userExperience: {
-      footer: { position }
-    }
-  } = useAppShellUserExperience();
-  const content = /* @__PURE__ */ jsx_runtime13.jsx(PageContainer, {
-    ...componentsProps?.container,
-    children: /* @__PURE__ */ jsx_runtime13.jsx(import_core6.Center, {
-      children: /* @__PURE__ */ jsx_runtime13.jsx(Icon2, {
-        color: "var(--mantine-color-disabled)",
-        ...theme.componentsProps.icons.huge,
-        ...componentsProps?.icon
-      })
-    })
-  });
-  if (position === "bottom" /* Bottom */) {
-    return /* @__PURE__ */ jsx_runtime13.jsx(FrameLayout_default.Element, {
-      section: position,
-      includeContainer: true,
-      ...componentsProps?.layoutElement,
-      componentsProps: import_lodash6.merge({ container: { style: { order: -50 } } }, componentsProps?.layoutElement?.componentsProps),
-      children: content
-    });
-  }
-  if (position === "content" /* Content */) {
-    return content;
-  }
-  return null;
-}
-
-// src/core/components/AppShell/Footer/index.tsx
-var jsx_runtime14 = require("react/jsx-runtime");
-var supportedFooterPositions = {
-  ["minimal" /* Minimal */]: [
-    null,
-    "bottom" /* Bottom */,
-    "content" /* Content */
-  ]
-};
-var defaultFooterPositions = {
-  ["minimal" /* Minimal */]: "content" /* Content */
-};
-function Footer({ componentsProps }) {
-  const { footerVariant } = useRemoraidApp();
-  if (footerVariant === "minimal" /* Minimal */) {
-    return /* @__PURE__ */ jsx_runtime14.jsx(FooterMinimal, {
-      ...componentsProps?.FooterMinimal
-    });
-  }
-  return null;
-}
-var Footer_default = Object.assign(Footer, {
-  FooterMinimal
-});
-
-// src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
-var import_react16 = require("react");
-
-// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-var import_core9 = require("@mantine/core");
-var import_lodash8 = __toESM(require_lodash());
-
-// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/NavigationMenu/index.tsx
-var import_core7 = require("@mantine/core");
-var import_react12 = require("react");
-var jsx_runtime15 = require("react/jsx-runtime");
-function NavigationMenu({
-  target,
-  elements,
-  label,
-  componentsProps
-}) {
-  const theme = useRemoraidTheme();
-  const mantineTheme = import_core7.useMantineTheme();
-  const router = useRemoraidRouter();
-  const { pathname } = router;
-  const item = (element, style) => {
-    const isLeaf2 = element.children === undefined || element.children.length === 0;
-    const Menu2 = isLeaf2 ? import_core7.Menu : import_core7.Menu.Sub;
-    return /* @__PURE__ */ jsx_runtime15.jsx(Menu2.Item, {
-      leftSection: element.icon ? /* @__PURE__ */ jsx_runtime15.jsx(element.icon, {
-        ...theme.componentsProps.icons.small
-      }) : undefined,
-      c: element.type === "anchor" /* Anchor */ && element.href === pathname ? mantineTheme.primaryColor : undefined,
-      onClick: (e) => {
-        if (element.type === "anchor" /* Anchor */) {
-          router.push(element.href);
-        }
-        if (element.type === "button" /* Button */) {
-          element.onClick(e);
-        }
-      },
-      style,
-      children: element.label
-    });
-  };
-  const isRoot = import_react12.isValidElement(target);
-  const isLeaf = elements === undefined || elements.length === 0;
-  const Menu = isRoot ? import_core7.Menu : import_core7.Menu.Sub;
-  const menuProps = isRoot ? { trigger: "click-hover", ...componentsProps?.Menu } : { ...componentsProps?.MenuSub };
-  return /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Transition, {
-    mounted: isRoot ? true : target.mounted ?? true,
-    ...componentsProps?.transition,
-    children: (transitionStyle) => {
-      if (isLeaf) {
-        if (isRoot) {
-          return target;
-        }
-        return item(target, transitionStyle);
-      }
-      return /* @__PURE__ */ jsx_runtime15.jsxs(Menu, {
-        ...menuProps,
-        children: [
-          /* @__PURE__ */ jsx_runtime15.jsx(Menu.Target, {
-            children: isRoot ? /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Box, {
-              ...componentsProps?.rootTargetContainer,
-              children: target
-            }) : item(target, transitionStyle)
-          }),
-          /* @__PURE__ */ jsx_runtime15.jsxs(Menu.Dropdown, {
-            children: [
-              label !== undefined && /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Menu.Label, {
-                children: label
-              }),
-              elements.map((element, i) => /* @__PURE__ */ jsx_runtime15.jsx(NavigationMenu, {
-                target: element,
-                elements: element.children,
-                componentsProps
-              }, `navigation-menu-${i}`))
-            ]
-          })
-        ]
-      });
-    }
-  });
-}
-
-// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-var import_icons_react4 = require("@tabler/icons-react");
-
-// src/core/components/RemoraidButton/index.tsx
-var import_core8 = require("@mantine/core");
-var import_icons_react3 = require("@tabler/icons-react");
-var import_react13 = require("react");
-var import_lodash7 = __toESM(require_lodash());
-var jsx_runtime16 = require("react/jsx-runtime");
-var defaultRemoraidButtonSize = "sm";
-function RemoraidButton({
-  label,
-  responsive: responsiveProp,
-  breakpoint: breakpointProp,
-  collapsed: collapsedProp,
-  size = defaultRemoraidButtonSize,
-  color,
-  onClick,
-  loading,
-  variant = "default",
-  mounted = true,
-  icon: iconProp,
-  iconSize: iconSizeProp,
-  clickTransformation = "default" /* Default */,
-  componentsProps
-}) {
-  const theme = useRemoraidTheme();
-  const responsive = responsiveProp ?? true;
-  const breakpoint = breakpointProp ?? theme.breakpoints.buttonCollapse;
-  const collapsed = collapsedProp ?? false;
-  const iconSize = iconSizeProp ?? getDefaultButtonIconSize(size);
-  const Icon3 = iconProp ?? import_icons_react3.IconClick;
-  const iconElement = import_react13.isValidElement(Icon3) ? Icon3 : /* @__PURE__ */ jsx_runtime16.jsx(Icon3, {
-    ...import_lodash7.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
-  });
-  const clickTransformationClassNames = {
-    ["default" /* Default */]: null,
-    ["none" /* None */]: "remoraid-button-none",
-    ["scale" /* Scale */]: "remoraid-button-scale",
-    ["tiltDown" /* TiltDown */]: "remoraid-button-tilt-down",
-    ["tiltUp" /* TiltUp */]: "remoraid-button-tilt-up",
-    ["tiltLeft" /* TiltLeft */]: "remoraid-button-tilt-left",
-    ["tiltRight" /* TiltRight */]: "remoraid-button-tilt-right"
-  };
-  const clickTransformationClass = clickTransformationClassNames[clickTransformation];
-  return /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Transition, {
-    mounted,
-    transition: "fade",
-    duration: theme.transitionDurations.short,
-    timingFunction: "ease",
-    ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime16.jsxs(jsx_runtime16.Fragment, {
-      children: [
-        /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Tooltip, {
-          label,
-          ...componentsProps?.tooltip,
-          children: /* @__PURE__ */ jsx_runtime16.jsx(import_core8.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: import_lodash7.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.ActionIcon?.style),
-            className: clsx_default(clickTransformationClass, componentsProps?.ActionIcon?.className, componentsProps?.button?.className),
-            children: iconElement
-          })
+            })
+          ]
         }),
-        /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Button, {
-          onClick,
-          loading,
-          variant,
-          size,
-          color,
-          leftSection: iconProp !== undefined ? iconElement : undefined,
-          ...componentsProps?.button,
-          ...componentsProps?.Button,
-          visibleFrom: !responsive ? undefined : breakpoint,
-          display: !responsive && collapsed ? "none" : componentsProps?.Button?.display ?? componentsProps?.button?.display,
-          style: import_lodash7.merge(transitionStyle, componentsProps?.button?.style, componentsProps?.Button?.style),
-          className: clsx_default(clickTransformationClass, componentsProps?.Button?.className, componentsProps?.button?.className),
-          children: label
+        /* @__PURE__ */ jsx_runtime13.jsx(import_core5.Group, {
+          ref: rightSectionRef,
+          h: "100%",
+          gap: gutter,
+          pl: 0,
+          wrap: "nowrap",
+          ...componentsProps?.sectionContainers?.["right" /* Right */],
+          className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-right-section", componentsProps?.sectionContainers?.["right" /* Right */]?.className)
         })
       ]
     })
   });
 }
+var FrameLayout_default = Object.assign(FrameLayout, {
+  Element: Element2
+});
+
+// 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_core6 = require("@mantine/core");
+var jsx_runtime14 = require("react/jsx-runtime");
+function PageContainer({
+  children,
+  p = 0,
+  hidden = false,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx_runtime14.jsx(import_core6.Container, {
+    size: theme.containerSize,
+    p,
+    w: "100%",
+    "data-hidden": hidden,
+    ...componentsProps?.container,
+    className: clsx_default("remoraid-page-container", componentsProps?.container?.className),
+    children
+  });
+}
+
+// src/core/components/FrameLayout/Element/index.tsx
+var import_lodash7 = __toESM(require_lodash());
+var jsx_runtime15 = require("react/jsx-runtime");
+var layoutElementContext = import_react14.createContext(null);
+var useFrameLayoutElement = () => {
+  return import_react14.useContext(layoutElementContext);
+};
+function Element2({
+  section,
+  includeContainer = true,
+  includePageContainer = false,
+  layoutId,
+  hidden = false,
+  componentsProps,
+  children
+}) {
+  const { layouts } = useLayouts();
+  const closestLayout = useFrameLayout();
+  if (!closestLayout) {
+    throw new InvalidComponentUsageError("FrameLayout.Element", "must be used as child of 'FrameLayout'.");
+  }
+  const layout = layouts[layoutId ?? closestLayout.layoutId];
+  if (!layout) {
+    return 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%";
+  }
+  const element = includePageContainer ? /* @__PURE__ */ jsx_runtime15.jsx(PageContainer, {
+    p: 0,
+    hidden,
+    ...componentsProps?.PageContainer,
+    children
+  }) : children;
+  return /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Portal, {
+    target: layout.sections[section],
+    children: /* @__PURE__ */ jsx_runtime15.jsx(layoutElementContext.Provider, {
+      value: { layoutType: "frame" /* Frame */, section },
+      children: includeContainer ? /* @__PURE__ */ jsx_runtime15.jsx(import_core7.Box, {
+        "data-hidden": hidden,
+        ...import_lodash7.merge(containerProps, componentsProps?.container),
+        className: clsx_default("remoraid-frame-layout-element", containerProps?.className, componentsProps?.container?.className),
+        children: element
+      }) : element
+    })
+  });
+}
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-var jsx_runtime17 = require("react/jsx-runtime");
+var jsx_runtime16 = require("react/jsx-runtime");
 function NavbarMinimalContent({
   orientation,
   maxElements,
   collapseStaticElementsBreakpoint: collapseStaticElementsBreakpointProp,
+  includeDefaultNavigationElements = true,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
@@ -6785,7 +6839,7 @@ function NavbarMinimalContent({
     buttonCollapsed = false;
   }
   const buttonClickTransformation = orientation === "horizontal" /* Horizontal */ ? "tiltRight" /* TiltRight */ : "default" /* Default */;
-  const logoButton = app.logo ? /* @__PURE__ */ jsx_runtime17.jsx(RemoraidButton, {
+  const logoButton = app.logo ? /* @__PURE__ */ jsx_runtime16.jsx(RemoraidButton, {
     label: app.name,
     variant: "subtle",
     icon: app.logo,
@@ -6806,9 +6860,9 @@ function NavbarMinimalContent({
       componentsProps?.logoButton?.onClick?.(e);
     }
   }) : undefined;
-  const button = (element, key) => /* @__PURE__ */ jsx_runtime17.jsx(NavigationMenu, {
+  const button = (element, key) => /* @__PURE__ */ jsx_runtime16.jsx(NavigationMenu, {
     label: element.label,
-    target: /* @__PURE__ */ jsx_runtime17.jsx(RemoraidButton, {
+    target: /* @__PURE__ */ jsx_runtime16.jsx(RemoraidButton, {
       mounted: element.mounted,
       label: element.label,
       icon: element.icon,
@@ -6845,19 +6899,23 @@ function NavbarMinimalContent({
   }, key);
   const elements = [
     ...app.nav,
-    ...getDefaultNavigationElements({ colorScheme, setColorScheme })
+    ...includeDefaultNavigationElements ? getDefaultNavigationElements({
+      colorScheme,
+      setColorScheme,
+      auth: app.auth
+    }) : []
   ];
   const buttons = elements.filter((element) => !element.static).sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).slice(0, maxElements).map((element, i) => button(element, `nav-element-${i}`));
   const staticElements = elements.filter((element) => element.static);
   const staticButtons = staticElements.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)).map((element, i) => button(element, `static-nav-element-${i}`));
   const collapseStaticElements = staticElements.filter((element) => element.mounted ?? true).length > 1;
-  const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Box, {
+  const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Box, {
     hiddenFrom: collapseStaticElementsBreakpoint,
-    children: /* @__PURE__ */ jsx_runtime17.jsx(NavigationMenu, {
+    children: /* @__PURE__ */ jsx_runtime16.jsx(NavigationMenu, {
       elements: staticElements,
-      target: /* @__PURE__ */ jsx_runtime17.jsx(RemoraidButton, {
+      target: /* @__PURE__ */ jsx_runtime16.jsx(RemoraidButton, {
         label: "Static elements",
-        icon: import_icons_react4.IconDots,
+        icon: import_icons_react3.IconDots,
         responsive: orientation === "vertical" /* Vertical */ ? buttonResponsive : false,
         collapsed: orientation === "vertical" /* Vertical */ ? buttonCollapsed : true,
         clickTransformation: buttonClickTransformation,
@@ -6876,41 +6934,41 @@ function NavbarMinimalContent({
       }, componentsProps?.NavigationMenu?.componentsProps)
     })
   }) : null;
-  return /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Paper, {
+  return /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Paper, {
     bg: theme.transparentBackground,
     h: "100%",
     p: "md",
     shadow: "md",
     ...componentsProps?.container,
-    children: orientation === "vertical" /* Vertical */ ? /* @__PURE__ */ jsx_runtime17.jsxs(import_core9.Stack, {
+    children: orientation === "vertical" /* Vertical */ ? /* @__PURE__ */ jsx_runtime16.jsxs(import_core8.Stack, {
       h: "100%",
       children: [
         logoButton,
-        /* @__PURE__ */ jsx_runtime17.jsx(import_core9.ScrollArea, {
+        /* @__PURE__ */ jsx_runtime16.jsx(import_core8.ScrollArea, {
           flex: 1,
-          children: /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Stack, {
+          children: /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Stack, {
             children: buttons
           })
         }),
-        /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Stack, {
+        /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Stack, {
           visibleFrom: collapseStaticElements ? collapseStaticElementsBreakpoint : undefined,
           children: staticButtons
         }),
         staticMenuButton
       ]
-    }) : /* @__PURE__ */ jsx_runtime17.jsxs(import_core9.Group, {
+    }) : /* @__PURE__ */ jsx_runtime16.jsxs(import_core8.Group, {
       wrap: "nowrap",
       children: [
         logoButton,
-        /* @__PURE__ */ jsx_runtime17.jsx(import_core9.ScrollArea, {
+        /* @__PURE__ */ jsx_runtime16.jsx(import_core8.ScrollArea, {
           flex: 1,
           style: { contain: "inline-size" },
-          children: /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Group, {
+          children: /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Group, {
             wrap: "nowrap",
             children: buttons
           })
         }),
-        /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Group, {
+        /* @__PURE__ */ jsx_runtime16.jsx(import_core8.Group, {
           wrap: "nowrap",
           visibleFrom: collapseStaticElements ? collapseStaticElementsBreakpoint : undefined,
           children: staticButtons
@@ -6925,17 +6983,17 @@ function NavbarMinimalContent({
 var import_lodash11 = __toESM(require_lodash());
 
 // src/core/components/Pinnable/index.tsx
-var import_react15 = require("react");
-var import_icons_react7 = require("@tabler/icons-react");
-var import_core12 = require("@mantine/core");
+var import_react16 = require("react");
+var import_icons_react6 = require("@tabler/icons-react");
+var import_core11 = require("@mantine/core");
 
 // src/core/components/Controls/ControlButton/index.tsx
-var import_core10 = require("@mantine/core");
-var import_icons_react5 = require("@tabler/icons-react");
+var import_core9 = require("@mantine/core");
+var import_icons_react4 = require("@tabler/icons-react");
 var import_lodash9 = __toESM(require_lodash());
-var jsx_runtime18 = require("react/jsx-runtime");
+var jsx_runtime17 = require("react/jsx-runtime");
 function ControlButton({
-  icon: Icon4 = import_icons_react5.IconClick,
+  icon: Icon3 = import_icons_react4.IconClick,
   mounted = true,
   size = "xs",
   iconSize = "tiny" /* Tiny */,
@@ -6946,17 +7004,17 @@ function ControlButton({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx_runtime18.jsx(import_core10.Transition, {
+  return /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Transition, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime18.jsx(import_core10.Tooltip, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime17.jsx(import_core9.Tooltip, {
       label: tooltip,
       disabled: !Boolean(tooltip),
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx_runtime18.jsx(import_core10.ActionIcon, {
+      children: /* @__PURE__ */ jsx_runtime17.jsx(import_core9.ActionIcon, {
         "data-control-button": true,
         size,
         color,
@@ -6967,7 +7025,7 @@ function ControlButton({
           order,
           ...import_lodash9.merge(transitionStyle, componentsProps?.button?.style)
         },
-        children: /* @__PURE__ */ jsx_runtime18.jsx(Icon4, {
+        children: /* @__PURE__ */ jsx_runtime17.jsx(Icon3, {
           ...import_lodash9.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
         })
       })
@@ -6976,11 +7034,11 @@ function ControlButton({
 }
 
 // src/core/components/Controls/index.tsx
-var import_react14 = require("react");
-var import_core11 = require("@mantine/core");
-var import_icons_react6 = require("@tabler/icons-react");
+var import_react15 = require("react");
+var import_core10 = require("@mantine/core");
+var import_icons_react5 = require("@tabler/icons-react");
 var import_lodash10 = __toESM(require_lodash());
-var jsx_runtime19 = require("react/jsx-runtime");
+var jsx_runtime18 = require("react/jsx-runtime");
 function Controls({
   groupRef,
   mounted = true,
@@ -6994,12 +7052,12 @@ function Controls({
   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({
+  const [pos, setPos] = import_react15.useState({
     x: 0,
     y: 0
   });
-  const offsetRef = import_react14.useRef({ x: 0, y: 0 });
-  const containerRef = import_react14.useRef(null);
+  const offsetRef = import_react15.useRef({ x: 0, y: 0 });
+  const containerRef = import_react15.useRef(null);
   const clamp = (v, min, max) => {
     return Math.min(Math.max(v, min), max);
   };
@@ -7038,14 +7096,14 @@ function Controls({
   const handlePointerUp = (e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   };
-  return /* @__PURE__ */ jsx_runtime19.jsx(import_core11.Transition, {
+  return /* @__PURE__ */ jsx_runtime18.jsx(import_core10.Transition, {
     mounted,
     keepMounted: true,
     transition: "pop",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime19.jsx(import_core11.Paper, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx_runtime18.jsx(import_core10.Paper, {
       ref: containerRef,
       pos: "absolute",
       p: gutter,
@@ -7061,14 +7119,14 @@ function Controls({
         ...import_lodash10.merge(transitionStyle, componentsProps?.container?.style)
       },
       className: clsx_default("remoraid-controls", componentsProps?.container?.className),
-      children: /* @__PURE__ */ jsx_runtime19.jsxs(import_core11.Group, {
+      children: /* @__PURE__ */ jsx_runtime18.jsxs(import_core10.Group, {
         gap: gutter,
         ref: groupRef,
         wrap: "nowrap",
         ...componentsProps?.group,
         className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
         children: [
-          /* @__PURE__ */ jsx_runtime19.jsx(import_icons_react6.IconGripHorizontal, {
+          /* @__PURE__ */ jsx_runtime18.jsx(import_icons_react5.IconGripHorizontal, {
             ...import_lodash10.merge({}, theme.componentsProps.icons[iconSize], { order: -100, color: "var(--mantine-color-default-border)" }, componentsProps?.gripIcon)
           }),
           children,
@@ -7076,7 +7134,7 @@ function Controls({
             if (isValidElementOfType(ControlButton, button)) {
               return button;
             }
-            return /* @__PURE__ */ jsx_runtime19.jsx(ControlButton, {
+            return /* @__PURE__ */ jsx_runtime18.jsx(ControlButton, {
               ...button
             }, i);
           })
@@ -7087,7 +7145,7 @@ function Controls({
 }
 
 // src/core/components/Pinnable/index.tsx
-var jsx_runtime20 = require("react/jsx-runtime");
+var jsx_runtime19 = require("react/jsx-runtime");
 function Pinnable({
   layoutType: layoutTypeProp,
   section,
@@ -7101,14 +7159,14 @@ function Pinnable({
 }) {
   const layoutType = layoutTypeProp ?? "frame" /* Frame */;
   const { layouts } = useLayouts();
-  const [pinned, setPinned] = import_react15.useState(initialValue);
-  const containerRef = import_react15.useRef(null);
+  const [pinned, setPinned] = import_react16.useState(initialValue);
+  const containerRef = import_react16.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_runtime20.jsx(ControlButton, {
-    icon: pinned ? import_icons_react7.IconPinnedOff : import_icons_react7.IconPin,
+  const controlButton = import_react16.useMemo(() => /* @__PURE__ */ jsx_runtime19.jsx(ControlButton, {
+    icon: pinned ? import_icons_react6.IconPinnedOff : import_icons_react6.IconPin,
     tooltip: pinned ? "Unpin" : "Pin",
     color: "green",
     order: 100,
@@ -7118,7 +7176,7 @@ function Pinnable({
       componentsProps?.button?.onClick?.(e);
     }
   }), [pinned, componentsProps?.button]);
-  const element = /* @__PURE__ */ jsx_runtime20.jsxs(import_core12.Box, {
+  const element = /* @__PURE__ */ jsx_runtime19.jsxs(import_core11.Box, {
     pos: "relative",
     ref: containerRef,
     "data-hidden": hidden,
@@ -7126,25 +7184,25 @@ function Pinnable({
     ...componentsProps?.container,
     className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
     children: [
-      controlsContainer === undefined ? /* @__PURE__ */ jsx_runtime20.jsx(Controls, {
+      controlsContainer === undefined ? /* @__PURE__ */ jsx_runtime19.jsx(Controls, {
         dragContainerRef: containerRef,
         ...componentsProps?.controls,
         children: controlButton
-      }) : controlsContainer !== null && /* @__PURE__ */ jsx_runtime20.jsx(import_core12.Portal, {
+      }) : controlsContainer !== null && /* @__PURE__ */ jsx_runtime19.jsx(import_core11.Portal, {
         target: controlsContainer,
         children: controlButton
       }),
       children
     ]
   });
-  import_react15.useEffect(() => {
+  import_react16.useEffect(() => {
     onPinnedValueChange?.(pinned);
   }, [pinned]);
   if (!layout) {
     return null;
   }
   if (pinned && layoutType === "frame" /* Frame */) {
-    return /* @__PURE__ */ jsx_runtime20.jsx(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx_runtime19.jsx(FrameLayout_default.Element, {
       layoutId,
       section,
       hidden,
@@ -7156,9 +7214,10 @@ function Pinnable({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
-var jsx_runtime21 = require("react/jsx-runtime");
+var jsx_runtime20 = require("react/jsx-runtime");
 function NavbarMinimal({
   pinnable = true,
+  includeDefaultNavigationElements = true,
   componentsProps
 }) {
   const {
@@ -7166,15 +7225,19 @@ function NavbarMinimal({
       navbar: { position }
     }
   } = useAppShellUserExperience();
-  const [hover, setHover] = import_react16.useState(false);
+  const [hover, setHover] = import_react17.useState(false);
   const handleEnter = () => {
     setHover(true);
   };
   const handleLeave = () => {
     setHover(false);
   };
+  const contentProps = {
+    includeDefaultNavigationElements,
+    ...componentsProps?.content
+  };
   if (position === "left" /* Left */ || position === "right" /* Right */) {
-    return /* @__PURE__ */ jsx_runtime21.jsx(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx_runtime20.jsx(FrameLayout_default.Element, {
       section: position,
       includeContainer: true,
       ...componentsProps?.layoutElement,
@@ -7185,19 +7248,19 @@ function NavbarMinimal({
           }
         }
       }, componentsProps?.layoutElement?.componentsProps),
-      children: /* @__PURE__ */ jsx_runtime21.jsx(NavbarMinimalContent, {
+      children: /* @__PURE__ */ jsx_runtime20.jsx(NavbarMinimalContent, {
         orientation: "vertical" /* Vertical */,
-        ...componentsProps?.content
+        ...contentProps
       })
     });
   }
   if (position === "top" /* Top */ || position === "bottom" /* Bottom */) {
-    const content = /* @__PURE__ */ jsx_runtime21.jsx(NavbarMinimalContent, {
+    const content = /* @__PURE__ */ jsx_runtime20.jsx(NavbarMinimalContent, {
       orientation: "horizontal" /* Horizontal */,
-      ...componentsProps?.content
+      ...contentProps
     });
     if (pinnable) {
-      return /* @__PURE__ */ jsx_runtime21.jsx(PageContainer, {
+      return /* @__PURE__ */ jsx_runtime20.jsx(PageContainer, {
         ...componentsProps?.container,
         componentsProps: {
           ...componentsProps?.container?.componentsProps,
@@ -7206,7 +7269,7 @@ function NavbarMinimal({
             className: clsx_default("hide-if-empty", componentsProps?.container?.componentsProps?.container?.className)
           }
         },
-        children: /* @__PURE__ */ jsx_runtime21.jsx(Pinnable, {
+        children: /* @__PURE__ */ jsx_runtime20.jsx(Pinnable, {
           section: position,
           initialValue: true,
           ...componentsProps?.Pinnable,
@@ -7249,11 +7312,11 @@ function NavbarMinimal({
     return content;
   }
   if (position === "content" /* Content */) {
-    return /* @__PURE__ */ jsx_runtime21.jsx(PageContainer, {
+    return /* @__PURE__ */ jsx_runtime20.jsx(PageContainer, {
       ...componentsProps?.container,
-      children: /* @__PURE__ */ jsx_runtime21.jsx(NavbarMinimalContent, {
+      children: /* @__PURE__ */ jsx_runtime20.jsx(NavbarMinimalContent, {
         orientation: "horizontal" /* Horizontal */,
-        ...componentsProps?.content
+        ...contentProps
       })
     });
   }
@@ -7261,19 +7324,8 @@ function NavbarMinimal({
 }
 
 // src/core/components/AppShell/Navbar/index.tsx
-var import_icons_react8 = require("@tabler/icons-react");
-var jsx_runtime22 = require("react/jsx-runtime");
-var supportedNavbarPositions = {
-  ["minimal" /* Minimal */]: [
-    null,
-    "top" /* Top */,
-    "bottom" /* Bottom */,
-    "left" /* Left */,
-    "right" /* Right */,
-    "content" /* Content */
-  ]
-};
-var defaultNavbarPositions = { ["minimal" /* Minimal */]: "left" /* Left */ };
+var import_icons_react7 = require("@tabler/icons-react");
+var jsx_runtime21 = require("react/jsx-runtime");
 var getDefaultNavigationElements = ({
   colorScheme,
   setColorScheme,
@@ -7282,7 +7334,7 @@ var getDefaultNavigationElements = ({
   {
     type: "button" /* Button */,
     label: colorScheme === "dark" ? "Light mode" : "Dark mode",
-    icon: colorScheme === "dark" ? import_icons_react8.IconSun : import_icons_react8.IconMoon,
+    icon: colorScheme === "dark" ? import_icons_react7.IconSun : import_icons_react7.IconMoon,
     static: true,
     onClick: () => {
       if (!colorScheme || !setColorScheme) {
@@ -7297,14 +7349,14 @@ var getDefaultNavigationElements = ({
     label: "Login",
     href: "/login",
     static: true,
-    icon: import_icons_react8.IconLogin
+    icon: import_icons_react7.IconLogin
   },
   {
     mounted: auth !== undefined && auth.user !== null,
     type: "button" /* Button */,
     label: "Logout",
     static: true,
-    icon: import_icons_react8.IconLogout,
+    icon: import_icons_react7.IconLogout,
     onClick: () => {
       auth?.onLogout?.();
     }
@@ -7313,7 +7365,7 @@ var getDefaultNavigationElements = ({
 function Navbar({ componentsProps }) {
   const { navbarVariant } = useRemoraidApp();
   if (navbarVariant === "minimal" /* Minimal */) {
-    return /* @__PURE__ */ jsx_runtime22.jsx(NavbarMinimal, {
+    return /* @__PURE__ */ jsx_runtime21.jsx(NavbarMinimal, {
       ...componentsProps?.NavbarMinimal
     });
   }
@@ -7323,60 +7375,60 @@ var Navbar_default = Object.assign(Navbar, {
   NavbarMinimal
 });
 
-// src/core/components/AppShell/AppShellUserExperienceProvider/index.tsx
-var jsx_runtime23 = require("react/jsx-runtime");
-var defaultAppShellUserExperience = {
-  navbar: {
-    position: null,
-    mobilePosition: null,
-    mode: "responsive" /* Responsive */
-  },
-  footer: {
-    position: null
-  }
-};
-var defaultAppShellUserExperienceCookieName = "remoraid-app-shell-user-experience";
-var appShellUserExperienceContext = createUserExperienceContext(defaultAppShellUserExperience);
-var useAppShellUserExperience = () => {
-  return import_react17.useContext(appShellUserExperienceContext);
-};
-function AppShellUserExperienceProvider({
-  children,
-  initialValue,
-  cookieName
+// src/core/components/AppShell/Footer/FooterMinimal/index.tsx
+var import_core12 = require("@mantine/core");
+var import_icons_react8 = require("@tabler/icons-react");
+var import_lodash12 = __toESM(require_lodash());
+var jsx_runtime22 = require("react/jsx-runtime");
+function FooterMinimal({
+  icon: Icon4 = import_icons_react8.IconPennant,
+  componentsProps
 }) {
-  const { navbarVariant, footerVariant } = useRemoraidApp();
-  const isValidUserExperience = (x) => {
-    if (typeof x !== "object") {
-      return false;
-    }
-    if (x === null) {
-      return false;
-    }
-    if (!("navbar" in x)) {
-      return false;
-    }
-    if (!("footer" in x)) {
-      return false;
+  const theme = useRemoraidTheme();
+  const {
+    userExperience: {
+      footer: { position }
     }
-    return true;
-  };
-  return /* @__PURE__ */ jsx_runtime23.jsx(UserExperienceProviderWrapper, {
-    context: appShellUserExperienceContext,
-    isValidUserExperience,
-    cookieName: cookieName ?? defaultAppShellUserExperienceCookieName,
-    defaultUserExperience: defaultAppShellUserExperience,
-    initialValue: import_lodash12.merge({
-      navbar: {
-        position: navbarVariant === null ? null : defaultNavbarPositions[navbarVariant]
-      },
-      footer: {
-        position: footerVariant === null ? null : defaultFooterPositions[footerVariant]
-      }
-    }, initialValue),
-    children
+  } = useAppShellUserExperience();
+  const content = /* @__PURE__ */ jsx_runtime22.jsx(PageContainer, {
+    ...componentsProps?.container,
+    children: /* @__PURE__ */ jsx_runtime22.jsx(import_core12.Center, {
+      children: /* @__PURE__ */ jsx_runtime22.jsx(Icon4, {
+        color: "var(--mantine-color-disabled)",
+        ...theme.componentsProps.icons.huge,
+        ...componentsProps?.icon
+      })
+    })
   });
+  if (position === "bottom" /* Bottom */) {
+    return /* @__PURE__ */ jsx_runtime22.jsx(FrameLayout_default.Element, {
+      section: position,
+      includeContainer: true,
+      ...componentsProps?.layoutElement,
+      componentsProps: import_lodash12.merge({ container: { style: { order: -50 } } }, componentsProps?.layoutElement?.componentsProps),
+      children: content
+    });
+  }
+  if (position === "content" /* Content */) {
+    return content;
+  }
+  return null;
+}
+
+// src/core/components/AppShell/Footer/index.tsx
+var jsx_runtime23 = require("react/jsx-runtime");
+function Footer({ componentsProps }) {
+  const { footerVariant } = useRemoraidApp();
+  if (footerVariant === "minimal" /* Minimal */) {
+    return /* @__PURE__ */ jsx_runtime23.jsx(FooterMinimal, {
+      ...componentsProps?.FooterMinimal
+    });
+  }
+  return null;
 }
+var Footer_default = Object.assign(Footer, {
+  FooterMinimal
+});
 
 // src/core/components/AppShell/index.tsx
 var jsx_runtime24 = require("react/jsx-runtime");
@@ -7483,23 +7535,28 @@ var import_react20 = require("react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
 var import_core15 = require("@mantine/core");
+var import_lodash14 = __toESM(require_lodash());
 var jsx_runtime26 = require("react/jsx-runtime");
 function ScrollableChipGroup({
   value,
-  ref,
   onChange,
   gap = "xs",
   componentsProps,
   children
 }) {
-  return /* @__PURE__ */ jsx_runtime26.jsx(import_core15.ScrollArea, {
-    ref,
-    ...componentsProps?.ScrollArea,
-    style: { contain: "inline-size", ...componentsProps?.ScrollArea?.style },
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Scroller, {
+    ...theme.componentsProps?.Scroller,
+    ...componentsProps?.Scroller,
+    className: clsx_default("remoraid-masked-scroller", theme.componentsProps?.Scroller?.className, componentsProps?.Scroller?.className),
+    style: import_lodash14.merge({ contain: "inline-size" }, theme.componentsProps?.Scroller?.style, componentsProps?.Scroller?.style),
+    attributes: import_lodash14.merge({
+      container: { "data-remoraid-scroller-container": true }
+    }, theme.componentsProps?.Scroller?.attributes, componentsProps?.Scroller?.attributes),
     children: /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Chip.Group, {
       value,
       onChange,
-      ...componentsProps?.chipGroup,
+      ...componentsProps?.ChipGroup,
       multiple: true,
       children: /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Flex, {
         justify: "flex-start",
@@ -7514,12 +7571,12 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_lodash14 = __toESM(require_lodash());
+var import_lodash15 = __toESM(require_lodash());
 var jsx_runtime27 = require("react/jsx-runtime");
 function WidgetSelectionHeader({
   title,
   pinnableSection = "top" /* Top */,
-  initiallyPinned = true,
+  initiallyPinned: initiallyPinnedProp,
   disabledWidgets,
   componentsProps
 }) {
@@ -7535,6 +7592,7 @@ function WidgetSelectionHeader({
   if (!page) {
     throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
   }
+  const initiallyPinned = pinnableSection ? initiallyPinnedProp ?? true : false;
   const [hover, setHover] = import_react20.useState(false);
   const [isPinned, setIsPinned] = import_react20.useState(initiallyPinned);
   const handleEnter = () => {
@@ -7543,7 +7601,7 @@ function WidgetSelectionHeader({
   const handleLeave = () => {
     setHover(false);
   };
-  const scrollAreaRef = import_react20.useRef(null);
+  const containerRef = import_react20.useRef(null);
   const widgets = widgetsContext2.widgets[page.pageId] ?? {};
   const selectedWidgets = Object.entries(widgets).reduce((t, [widgetId, widget]) => widget?.selected ? [...t, widgetId] : t, []);
   const element = /* @__PURE__ */ jsx_runtime27.jsxs(import_core16.Flex, {
@@ -7551,6 +7609,7 @@ function WidgetSelectionHeader({
     align: "center",
     gap: "md",
     ...componentsProps?.container,
+    ref: containerRef,
     onMouseEnter: (e) => {
       if (!pinnableSection) {
         handleEnter();
@@ -7561,13 +7620,14 @@ function WidgetSelectionHeader({
       if (!pinnableSection) {
         handleLeave();
       }
-      componentsProps?.container?.onMouseEnter?.(e);
+      componentsProps?.container?.onMouseLeave?.(e);
     },
     className: clsx_default(!pinnableSection ? "remoraid-non-widget-segment" : undefined, !pinnableSection ? "remoraid-segment" : undefined, componentsProps?.container?.className),
     children: [
       /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Text, {
         size: "md",
         ...componentsProps?.title,
+        style: { whiteSpace: "nowrap", ...componentsProps?.title?.style },
         children: title ?? page.name
       }),
       /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Divider, {
@@ -7576,13 +7636,17 @@ function WidgetSelectionHeader({
       }),
       isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_runtime27.jsx(ScrollableChipGroup, {
         value: selectedWidgets,
-        ref: scrollAreaRef,
         ...componentsProps?.ScrollableChipGroup,
         onChange: (value) => {
           updateWidgetSelectionBulk(page.pageId, value);
           componentsProps?.ScrollableChipGroup?.onChange?.(value);
         },
-        componentsProps: import_lodash14.merge({ ScrollArea: { flex: 1 } }, componentsProps?.ScrollableChipGroup?.componentsProps),
+        componentsProps: import_lodash15.merge({
+          Scroller: {
+            flex: 1,
+            miw: 0
+          }
+        }, componentsProps?.ScrollableChipGroup?.componentsProps),
         children: Object.entries(widgets).map(([widgetId, widget]) => {
           if (!widget) {
             return;
@@ -7603,12 +7667,15 @@ function WidgetSelectionHeader({
                       ...theme.componentsProps.icons.extraSmall
                     }),
                     ...componentsProps?.Chip,
-                    styles: import_lodash14.merge({
+                    styles: import_lodash15.merge({
                       label: {
                         transition: "background-color var(--remoraid-transition-duration-short)"
                       }
                     }, componentsProps?.Chip?.styles),
-                    id: `remoraid-widget-selection-header-chip-${widgetId}`,
+                    wrapperProps: {
+                      ...componentsProps?.Chip?.wrapperProps,
+                      id: `remoraid-widget-selection-header-chip-${widgetId}`
+                    },
                     children: widget.name
                   })
                 })
@@ -7649,19 +7716,20 @@ function WidgetSelectionHeader({
     if (!activeWidget) {
       return;
     }
-    if (!isPinned) {
+    if (!containerRef?.current) {
       return;
     }
-    if (!scrollAreaRef?.current) {
+    const activeWidgetChipElement = containerRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
+    if (!activeWidgetChipElement) {
       return;
     }
-    const activeWidgetChipElement = scrollAreaRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
-    if (!activeWidgetChipElement) {
+    const scrollContainerElement = activeWidgetChipElement.closest("[data-remoraid-scroller-container]");
+    if (!scrollContainerElement) {
       return;
     }
-    activeWidgetChipElement.scrollIntoView({
-      behavior: "smooth",
-      inline: "center"
+    scrollContainerElement.scrollTo({
+      left: activeWidgetChipElement.offsetLeft - scrollContainerElement.clientWidth / 2 + activeWidgetChipElement.clientWidth / 2,
+      behavior: "smooth"
     });
   }, [activeWidget]);
   if (pinnableSection) {
@@ -7745,7 +7813,7 @@ function BadgeMinimal({
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var import_lodash15 = __toESM(require_lodash());
+var import_lodash16 = __toESM(require_lodash());
 var jsx_runtime29 = require("react/jsx-runtime");
 var react = require("react");
 function BadgeGroup({
@@ -7793,7 +7861,7 @@ function BadgeGroup({
                 ...componentsProps?.cumulativeBadge,
                 style: {
                   cursor: "pointer",
-                  ...import_lodash15.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
+                  ...import_lodash16.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
                 },
                 children: [
                   numVisibleBadges,
@@ -7817,7 +7885,7 @@ function BadgeGroup({
 }
 // src/core/components/AlertMinimal/index.tsx
 var import_core19 = require("@mantine/core");
-var import_lodash16 = __toESM(require_lodash());
+var import_lodash17 = __toESM(require_lodash());
 var jsx_runtime30 = require("react/jsx-runtime");
 function AlertMinimal({
   category,
@@ -7834,7 +7902,7 @@ function AlertMinimal({
     icon: Icon4,
     iconSize = "small" /* Small */,
     componentsProps
-  } = import_lodash16.merge({}, theme.componentsProps.alerts[category], props);
+  } = import_lodash17.merge({}, theme.componentsProps.alerts[category], props);
   return /* @__PURE__ */ jsx_runtime30.jsx(import_core19.Transition, {
     mounted,
     transition: "fade",
@@ -7848,10 +7916,10 @@ function AlertMinimal({
       onClose,
       withCloseButton: onClose !== undefined,
       icon: Icon4 ? /* @__PURE__ */ jsx_runtime30.jsx(Icon4, {
-        ...import_lodash16.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+        ...import_lodash17.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
       }) : undefined,
       ...componentsProps?.alert,
-      style: import_lodash16.merge(transitionStyle, componentsProps?.alert?.style),
+      style: import_lodash17.merge(transitionStyle, componentsProps?.alert?.style),
       children: [
         text,
         children
@@ -7863,7 +7931,7 @@ function AlertMinimal({
 var import_core20 = require("@mantine/core");
 var import_react22 = require("react");
 var import_icons_react10 = require("@tabler/icons-react");
-var import_lodash17 = __toESM(require_lodash());
+var import_lodash18 = __toESM(require_lodash());
 var jsx_runtime31 = require("react/jsx-runtime");
 function WidgetWrapper({
   config,
@@ -7934,7 +8002,7 @@ function WidgetWrapper({
         handleLeave(e);
         componentsProps?.container?.onMouseLeave?.(e);
       },
-      style: import_lodash17.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
+      style: import_lodash18.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
       className: clsx_default("remoraid-segment", componentsProps?.container?.className),
       id: config.widgetId,
       children: [
@@ -8008,7 +8076,7 @@ function WidgetWrapper({
 // src/core/components/Widget/index.tsx
 var import_core21 = require("@mantine/core");
 var import_react23 = require("react");
-var import_lodash18 = __toESM(require_lodash());
+var import_lodash19 = __toESM(require_lodash());
 var jsx_runtime32 = require("react/jsx-runtime");
 var react2 = require("react");
 function Widget({
@@ -8080,7 +8148,7 @@ function Widget({
                     size: "sm",
                     c: "dimmed",
                     ...componentsProps?.description,
-                    style: import_lodash18.merge(transitionStyle, componentsProps?.description?.style),
+                    style: import_lodash19.merge(transitionStyle, componentsProps?.description?.style),
                     children: description
                   })
                 })
@@ -8351,7 +8419,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash19 = __toESM(require_lodash());
+var import_lodash20 = __toESM(require_lodash());
 var import_core25 = require("@mantine/core");
 var jsx_runtime39 = require("react/jsx-runtime");
 var defaultNavbarSettingsWidgetId = "navbar-settings";
@@ -8362,7 +8430,7 @@ function NavbarSettingsWidget({
 }) {
   const additionalRows = additionalRowsProp?.map((additionalRow) => asElementOrPropsOfType(SettingsTable_default.Row, additionalRow, "Check the 'additionalRows' property of 'NavbarSettingsWidget'."));
   const { userExperience, updateUserExperience, initialUserExperience } = useAppShellUserExperience();
-  const app = useRemoraidApp();
+  const { navbarVariant, navbarMetadata: navbarMetadata2 } = useRemoraidApp();
   const modeLabels = {
     ["responsive" /* Responsive */]: "Responsive",
     ["collapsed" /* Collapsed */]: "Collapsed",
@@ -8379,7 +8447,15 @@ function NavbarSettingsWidget({
     widgetProps: {
       id: defaultNavbarSettingsWidgetId,
       title: "Navbar Settings",
-      ...widgetProps
+      ...widgetProps,
+      alerts: [
+        {
+          category: "negative" /* Negative */,
+          text: "This app does not contain a registered navbar.",
+          mounted: navbarVariant === null
+        },
+        ...widgetProps?.alerts ?? []
+      ]
     },
     onRestoreDefaultValues: () => {
       updateUserExperience((prev) => ({
@@ -8387,15 +8463,15 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash19.isEqual(userExperience.navbar, initialUserExperience.navbar),
-    children: /* @__PURE__ */ jsx_runtime39.jsxs(SettingsTable_default, {
+    custom: !import_lodash20.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    children: navbarVariant !== null && /* @__PURE__ */ jsx_runtime39.jsxs(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
         /* @__PURE__ */ jsx_runtime39.jsx(SettingsTable_default.Row, {
           label: "Select navbar position",
           children: /* @__PURE__ */ jsx_runtime39.jsx(import_core25.Select, {
             value: userExperience.navbar.position ?? "hidden",
-            data: app.navbarVariant === null ? [] : supportedNavbarPositions[app.navbarVariant].map((position) => ({
+            data: navbarMetadata2.supportedPositions.map((position) => ({
               value: position ?? "hidden",
               label: position === null ? "Hidden" : positionLabels[position]
             })),
@@ -8417,7 +8493,7 @@ function NavbarSettingsWidget({
           label: "Select navbar mode",
           children: /* @__PURE__ */ jsx_runtime39.jsx(import_core25.Select, {
             value: userExperience.navbar.mode,
-            data: Object.values(NavbarMode).map((mode) => ({
+            data: navbarMetadata2.supportedModes.map((mode) => ({
               value: mode,
               label: modeLabels[mode]
             })),
@@ -8445,7 +8521,7 @@ function NavbarSettingsWidget({
   });
 }
 // src/core/components/FooterSettingsWidget/index.tsx
-var import_lodash20 = __toESM(require_lodash());
+var import_lodash21 = __toESM(require_lodash());
 var import_core26 = require("@mantine/core");
 var jsx_runtime40 = require("react/jsx-runtime");
 var defaultFooterSettingsWidgetId = "footer-settings";
@@ -8456,7 +8532,7 @@ function FooterSettingsWidget({
 }) {
   const additionalRows = additionalRowsProp?.map((additionalRow) => asElementOrPropsOfType(SettingsTable_default.Row, additionalRow, "Check the 'additionalRows' property of 'FooterSettingsWidget'."));
   const { userExperience, updateUserExperience, initialUserExperience } = useAppShellUserExperience();
-  const app = useRemoraidApp();
+  const { footerVariant, footerMetadata: footerMetadata2 } = useRemoraidApp();
   const positionLabels = {
     ["bottom" /* Bottom */]: "Bottom",
     ["top" /* Top */]: "Top",
@@ -8468,7 +8544,15 @@ function FooterSettingsWidget({
     widgetProps: {
       id: defaultFooterSettingsWidgetId,
       title: "Footer Settings",
-      ...widgetProps
+      ...widgetProps,
+      alerts: [
+        {
+          category: "negative" /* Negative */,
+          text: "This app does not contain a registered footer.",
+          mounted: footerVariant === null
+        },
+        ...widgetProps?.alerts ?? []
+      ]
     },
     onRestoreDefaultValues: () => {
       updateUserExperience((prev) => ({
@@ -8476,15 +8560,15 @@ function FooterSettingsWidget({
         footer: initialUserExperience.footer
       }));
     },
-    custom: !import_lodash20.isEqual(userExperience.footer, initialUserExperience.footer),
-    children: /* @__PURE__ */ jsx_runtime40.jsxs(SettingsTable_default, {
+    custom: !import_lodash21.isEqual(userExperience.footer, initialUserExperience.footer),
+    children: footerVariant !== null && /* @__PURE__ */ jsx_runtime40.jsxs(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
         /* @__PURE__ */ jsx_runtime40.jsx(SettingsTable_default.Row, {
           label: "Select footer position",
           children: /* @__PURE__ */ jsx_runtime40.jsx(import_core26.Select, {
             value: userExperience.footer.position ?? "hidden",
-            data: app.footerVariant === null ? [] : supportedFooterPositions[app.footerVariant].map((position) => ({
+            data: footerMetadata2.supportedPositions.map((position) => ({
               value: position ?? "hidden",
               label: position === null ? "Hidden" : positionLabels[position]
             })),