remoraid 3.1.1 → 3.5.0

package/dist/core/index.js

@@ -5610,10 +5610,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) => {
@@ -5751,11 +5753,41 @@ 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
 import { px, rgba, useMantineTheme } from "@mantine/core";
 import {
   IconAlertCircle,
+  IconArrowLeft,
+  IconArrowRight,
   IconCircleCheck,
   IconInfoCircle
 } from "@tabler/icons-react";
@@ -5866,6 +5898,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__ */ jsx3(IconArrowLeft, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        }),
+        endControlIcon: /* @__PURE__ */ jsx3(IconArrowRight, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        })
       }
     }
   };
@@ -5877,7 +5921,8 @@ var getCssVars = (theme) => {
     transitionDurations,
     primaryGutter,
     containerSize,
-    transparentBackground
+    transparentBackground,
+    componentsProps: { icons }
   } = theme;
   return {
     "--mantine-color-body": bodyColor,
@@ -5889,6 +5934,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}`
     }), {})
   };
 };
@@ -6137,7 +6187,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 = createContext5(defaultAppContext);
@@ -6148,9 +6200,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__ */ jsx9(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
   });
 }
@@ -6159,16 +6232,170 @@ function AppProvider({
 var import_lodash13 = __toESM(require_lodash(), 1);
 
 // src/core/components/AppShell/AppShellUserExperienceProvider/index.tsx
-var import_lodash12 = __toESM(require_lodash(), 1);
-import { useContext as useContext10 } from "react";
+var import_lodash5 = __toESM(require_lodash(), 1);
+import { useContext as useContext8 } from "react";
+import { jsx as jsx10 } from "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 useContext8(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__ */ jsx10(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/Footer/FooterMinimal/index.tsx
-import { Center } from "@mantine/core";
-import { IconPennant } from "@tabler/icons-react";
-var import_lodash6 = __toESM(require_lodash(), 1);
+// src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
+import { useState as useState7 } from "react";
 
-// src/core/components/Page/PageContainer/index.tsx
-import { Container } from "@mantine/core";
+// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+import {
+  Box as Box3,
+  Group as Group2,
+  Paper,
+  ScrollArea as ScrollArea2,
+  Stack as Stack2
+} from "@mantine/core";
+var import_lodash8 = __toESM(require_lodash(), 1);
+
+// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/NavigationMenu/index.tsx
+import {
+  Box,
+  Menu as MantineMenu,
+  Transition,
+  useMantineTheme as useMantineTheme2
+} from "@mantine/core";
+import { isValidElement as isValidElement2 } from "react";
+import { jsx as jsx11, jsxs } from "react/jsx-runtime";
+function NavigationMenu({
+  target,
+  elements,
+  label,
+  componentsProps
+}) {
+  const theme = useRemoraidTheme();
+  const mantineTheme = useMantineTheme2();
+  const router = useRemoraidRouter();
+  const { pathname } = router;
+  const item = (element, style) => {
+    const isLeaf2 = element.children === undefined || element.children.length === 0;
+    const Menu2 = isLeaf2 ? MantineMenu : MantineMenu.Sub;
+    return /* @__PURE__ */ jsx11(Menu2.Item, {
+      leftSection: element.icon ? /* @__PURE__ */ jsx11(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 = isValidElement2(target);
+  const isLeaf = elements === undefined || elements.length === 0;
+  const Menu = isRoot ? MantineMenu : MantineMenu.Sub;
+  const menuProps = isRoot ? { trigger: "click-hover", ...componentsProps?.Menu } : { ...componentsProps?.MenuSub };
+  return /* @__PURE__ */ jsx11(Transition, {
+    mounted: isRoot ? true : target.mounted ?? true,
+    ...componentsProps?.transition,
+    children: (transitionStyle) => {
+      if (isLeaf) {
+        if (isRoot) {
+          return target;
+        }
+        return item(target, transitionStyle);
+      }
+      return /* @__PURE__ */ jsxs(Menu, {
+        ...menuProps,
+        children: [
+          /* @__PURE__ */ jsx11(Menu.Target, {
+            children: isRoot ? /* @__PURE__ */ jsx11(Box, {
+              ...componentsProps?.rootTargetContainer,
+              children: target
+            }) : item(target, transitionStyle)
+          }),
+          /* @__PURE__ */ jsxs(Menu.Dropdown, {
+            children: [
+              label !== undefined && /* @__PURE__ */ jsx11(MantineMenu.Label, {
+                children: label
+              }),
+              elements.map((element, i) => /* @__PURE__ */ jsx11(NavigationMenu, {
+                target: element,
+                elements: element.children,
+                componentsProps
+              }, `navigation-menu-${i}`))
+            ]
+          })
+        ]
+      });
+    }
+  });
+}
+
+// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
+import { IconDots } from "@tabler/icons-react";
+
+// src/core/components/RemoraidButton/index.tsx
+var import_lodash6 = __toESM(require_lodash(), 1);
+import {
+  ActionIcon,
+  Button,
+  Tooltip,
+  Transition as Transition2
+} from "@mantine/core";
+import { IconClick } from "@tabler/icons-react";
+import {
+  isValidElement as isValidElement3
+} from "react";
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -6192,26 +6419,95 @@ function clsx() {
 }
 var clsx_default = clsx;
 
-// src/core/components/Page/PageContainer/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-function PageContainer({
-  children,
-  p = 0,
-  hidden = false,
+// src/core/components/RemoraidButton/index.tsx
+import { jsx as jsx12, jsxs as jsxs2, Fragment } from "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__ */ jsx10(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 ?? IconClick;
+  const iconElement = isValidElement3(Icon2) ? Icon2 : /* @__PURE__ */ jsx12(Icon2, {
+    ...import_lodash6.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__ */ jsx12(Transition2, {
+    mounted,
+    transition: "fade",
+    duration: theme.transitionDurations.short,
+    timingFunction: "ease",
+    ...componentsProps?.transition,
+    children: (transitionStyle) => /* @__PURE__ */ jsxs2(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx12(Tooltip, {
+          label,
+          ...componentsProps?.tooltip,
+          children: /* @__PURE__ */ jsx12(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__ */ jsx12(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
+import { createContext as createContext7, useContext as useContext10 } from "react";
+import { Box as Box2, Portal } from "@mantine/core";
+
 // src/core/components/FrameLayout/index.tsx
 import {
   Group,
@@ -6219,82 +6515,13 @@ import {
   Stack
 } from "@mantine/core";
 import {
-  createContext as createContext7,
+  createContext as createContext6,
   useCallback,
   useContext as useContext9,
   useMemo as useMemo3
 } from "react";
-
-// src/core/components/FrameLayout/Element/index.tsx
-import { createContext as createContext6, useContext as useContext8 } from "react";
-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/FrameLayout/Element/index.tsx
-var import_lodash5 = __toESM(require_lodash(), 1);
-import { jsx as jsx11 } from "react/jsx-runtime";
-var layoutElementContext = createContext6(null);
-var useFrameLayoutElement = () => {
-  return useContext8(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__ */ jsx11(PageContainer, {
-    p: 0,
-    hidden,
-    ...componentsProps?.PageContainer,
-    children
-  }) : children;
-  return /* @__PURE__ */ jsx11(Portal, {
-    target: layout.sections[section],
-    children: /* @__PURE__ */ jsx11(layoutElementContext.Provider, {
-      value: { layoutType: "frame" /* Frame */, section },
-      children: includeContainer ? /* @__PURE__ */ jsx11(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
-    })
-  });
-}
-
-// src/core/components/FrameLayout/index.tsx
-import { jsx as jsx12, jsxs } from "react/jsx-runtime";
-var layoutContext = createContext7(null);
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+var layoutContext = createContext6(null);
 var useFrameLayout = () => {
   return useContext9(layoutContext);
 };
@@ -6353,7 +6580,7 @@ function FrameLayout({
       ["content" /* Content */]: n
     }));
   }, [setSections]);
-  const contentSection = /* @__PURE__ */ jsx12(Stack, {
+  const contentSection = /* @__PURE__ */ jsx13(Stack, {
     ref: contentSectionRef,
     h: "100%",
     gap: gutter,
@@ -6368,9 +6595,9 @@ function FrameLayout({
     ...layout,
     layoutId
   }), [layout?.sections, defaultSections, layoutId]);
-  return /* @__PURE__ */ jsx12(layoutContext.Provider, {
+  return /* @__PURE__ */ jsx13(layoutContext.Provider, {
     value: layoutContextValue,
-    children: /* @__PURE__ */ jsxs(Group, {
+    children: /* @__PURE__ */ jsxs3(Group, {
       gap: 0,
       h: "100%",
       w: "100%",
@@ -6381,7 +6608,7 @@ function FrameLayout({
       },
       className: clsx_default("remoraid-frame-layout", componentsProps?.horizontalContainer?.className),
       children: [
-        /* @__PURE__ */ jsx12(Group, {
+        /* @__PURE__ */ jsx13(Group, {
           ref: leftSectionRef,
           h: "100%",
           wrap: "nowrap",
@@ -6390,26 +6617,26 @@ function FrameLayout({
           ...componentsProps?.sectionContainers?.["left" /* Left */],
           className: clsx_default("remoraid-frame-layout-section", "remoraid-frame-layout-left-section", componentsProps?.sectionContainers?.["left" /* Left */]?.className)
         }),
-        /* @__PURE__ */ jsxs(Stack, {
+        /* @__PURE__ */ jsxs3(Stack, {
           h: "100%",
           flex: 1,
           gap: 0,
           ...componentsProps?.verticalContainer,
           className: clsx_default("remoraid-frame-layout-vertical-container", componentsProps?.verticalContainer?.className),
           children: [
-            /* @__PURE__ */ jsx12(Stack, {
+            /* @__PURE__ */ jsx13(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__ */ jsx12(ScrollArea, {
+            includeScrollArea ? /* @__PURE__ */ jsx13(ScrollArea, {
               flex: 1,
               ...componentsProps?.ScrollArea,
               children: contentSection
             }) : contentSection,
-            /* @__PURE__ */ jsx12(Stack, {
+            /* @__PURE__ */ jsx13(Stack, {
               ref: bottomSectionRef,
               gap: gutter,
               flex: 0,
@@ -6418,7 +6645,7 @@ function FrameLayout({
             })
           ]
         }),
-        /* @__PURE__ */ jsx12(Group, {
+        /* @__PURE__ */ jsx13(Group, {
           ref: rightSectionRef,
           h: "100%",
           gap: gutter,
@@ -6435,266 +6662,97 @@ var FrameLayout_default = Object.assign(FrameLayout, {
   Element: Element2
 });
 
-// src/core/components/AppShell/Footer/FooterMinimal/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-function FooterMinimal({
-  icon: Icon2 = IconPennant,
-  componentsProps
-}) {
-  const theme = useRemoraidTheme();
-  const {
-    userExperience: {
-      footer: { position }
-    }
-  } = useAppShellUserExperience();
-  const content = /* @__PURE__ */ jsx13(PageContainer, {
-    ...componentsProps?.container,
-    children: /* @__PURE__ */ jsx13(Center, {
-      children: /* @__PURE__ */ jsx13(Icon2, {
-        color: "var(--mantine-color-disabled)",
-        ...theme.componentsProps.icons.huge,
-        ...componentsProps?.icon
-      })
-    })
-  });
-  if (position === "bottom" /* Bottom */) {
-    return /* @__PURE__ */ jsx13(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;
+// src/core/lib/errors.ts
+class InvalidComponentUsageError extends Error {
+  constructor(component, rule) {
+    super(`Invalid usage of '${component}': ${rule}`);
+    this.name = "InvalidComponentUsageError";
   }
-  return null;
 }
 
-// src/core/components/AppShell/Footer/index.tsx
+// src/core/components/Page/PageContainer/index.tsx
+import { Container } from "@mantine/core";
 import { jsx as jsx14 } from "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__ */ jsx14(FooterMinimal, {
-      ...componentsProps?.FooterMinimal
-    });
-  }
-  return null;
-}
-var Footer_default = Object.assign(Footer, {
-  FooterMinimal
-});
-
-// src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
-import { useState as useState7 } from "react";
-
-// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-import {
-  Box as Box3,
-  Group as Group2,
-  Paper,
-  ScrollArea as ScrollArea2,
-  Stack as Stack2
-} from "@mantine/core";
-var import_lodash8 = __toESM(require_lodash(), 1);
-
-// src/core/components/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/NavigationMenu/index.tsx
-import {
-  Box as Box2,
-  Menu as MantineMenu,
-  Transition,
-  useMantineTheme as useMantineTheme2
-} from "@mantine/core";
-import { isValidElement as isValidElement2 } from "react";
-import { jsx as jsx15, jsxs as jsxs2 } from "react/jsx-runtime";
-function NavigationMenu({
-  target,
-  elements,
-  label,
+function PageContainer({
+  children,
+  p = 0,
+  hidden = false,
   componentsProps
 }) {
-  const theme = useRemoraidTheme();
-  const mantineTheme = useMantineTheme2();
-  const router = useRemoraidRouter();
-  const { pathname } = router;
-  const item = (element, style) => {
-    const isLeaf2 = element.children === undefined || element.children.length === 0;
-    const Menu2 = isLeaf2 ? MantineMenu : MantineMenu.Sub;
-    return /* @__PURE__ */ jsx15(Menu2.Item, {
-      leftSection: element.icon ? /* @__PURE__ */ jsx15(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 = isValidElement2(target);
-  const isLeaf = elements === undefined || elements.length === 0;
-  const Menu = isRoot ? MantineMenu : MantineMenu.Sub;
-  const menuProps = isRoot ? { trigger: "click-hover", ...componentsProps?.Menu } : { ...componentsProps?.MenuSub };
-  return /* @__PURE__ */ jsx15(Transition, {
-    mounted: isRoot ? true : target.mounted ?? true,
-    ...componentsProps?.transition,
-    children: (transitionStyle) => {
-      if (isLeaf) {
-        if (isRoot) {
-          return target;
-        }
-        return item(target, transitionStyle);
-      }
-      return /* @__PURE__ */ jsxs2(Menu, {
-        ...menuProps,
-        children: [
-          /* @__PURE__ */ jsx15(Menu.Target, {
-            children: isRoot ? /* @__PURE__ */ jsx15(Box2, {
-              ...componentsProps?.rootTargetContainer,
-              children: target
-            }) : item(target, transitionStyle)
-          }),
-          /* @__PURE__ */ jsxs2(Menu.Dropdown, {
-            children: [
-              label !== undefined && /* @__PURE__ */ jsx15(MantineMenu.Label, {
-                children: label
-              }),
-              elements.map((element, i) => /* @__PURE__ */ jsx15(NavigationMenu, {
-                target: element,
-                elements: element.children,
-                componentsProps
-              }, `navigation-menu-${i}`))
-            ]
-          })
-        ]
-      });
-    }
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx14(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/AppShell/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-import { IconDots } from "@tabler/icons-react";
-
-// src/core/components/RemoraidButton/index.tsx
+// src/core/components/FrameLayout/Element/index.tsx
 var import_lodash7 = __toESM(require_lodash(), 1);
-import {
-  ActionIcon,
-  Button,
-  Tooltip,
-  Transition as Transition2
-} from "@mantine/core";
-import { IconClick } from "@tabler/icons-react";
-import {
-  isValidElement as isValidElement3
-} from "react";
-import { jsx as jsx16, jsxs as jsxs3, Fragment } from "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
+import { jsx as jsx15 } from "react/jsx-runtime";
+var layoutElementContext = createContext7(null);
+var useFrameLayoutElement = () => {
+  return useContext10(layoutElementContext);
+};
+function Element2({
+  section,
+  includeContainer = true,
+  includePageContainer = false,
+  layoutId,
+  hidden = false,
+  componentsProps,
+  children
 }) {
-  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 ?? IconClick;
-  const iconElement = isValidElement3(Icon3) ? Icon3 : /* @__PURE__ */ jsx16(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__ */ jsx16(Transition2, {
-    mounted,
-    transition: "fade",
-    duration: theme.transitionDurations.short,
-    timingFunction: "ease",
-    ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsxs3(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx16(Tooltip, {
-          label,
-          ...componentsProps?.tooltip,
-          children: /* @__PURE__ */ jsx16(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__ */ jsx16(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
-        })
-      ]
+  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__ */ jsx15(PageContainer, {
+    p: 0,
+    hidden,
+    ...componentsProps?.PageContainer,
+    children
+  }) : children;
+  return /* @__PURE__ */ jsx15(Portal, {
+    target: layout.sections[section],
+    children: /* @__PURE__ */ jsx15(layoutElementContext.Provider, {
+      value: { layoutType: "frame" /* Frame */, section },
+      children: includeContainer ? /* @__PURE__ */ jsx15(Box2, {
+        "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
-import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 function NavbarMinimalContent({
   orientation,
   maxElements,
   collapseStaticElementsBreakpoint: collapseStaticElementsBreakpointProp,
+  includeDefaultNavigationElements = true,
   componentsProps
 }) {
   const theme = useRemoraidTheme();
@@ -6722,7 +6780,7 @@ function NavbarMinimalContent({
     buttonCollapsed = false;
   }
   const buttonClickTransformation = orientation === "horizontal" /* Horizontal */ ? "tiltRight" /* TiltRight */ : "default" /* Default */;
-  const logoButton = app.logo ? /* @__PURE__ */ jsx17(RemoraidButton, {
+  const logoButton = app.logo ? /* @__PURE__ */ jsx16(RemoraidButton, {
     label: app.name,
     variant: "subtle",
     icon: app.logo,
@@ -6743,9 +6801,9 @@ function NavbarMinimalContent({
       componentsProps?.logoButton?.onClick?.(e);
     }
   }) : undefined;
-  const button = (element, key) => /* @__PURE__ */ jsx17(NavigationMenu, {
+  const button = (element, key) => /* @__PURE__ */ jsx16(NavigationMenu, {
     label: element.label,
-    target: /* @__PURE__ */ jsx17(RemoraidButton, {
+    target: /* @__PURE__ */ jsx16(RemoraidButton, {
       mounted: element.mounted,
       label: element.label,
       icon: element.icon,
@@ -6782,17 +6840,21 @@ 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__ */ jsx17(Box3, {
+  const staticMenuButton = collapseStaticElements ? /* @__PURE__ */ jsx16(Box3, {
     hiddenFrom: collapseStaticElementsBreakpoint,
-    children: /* @__PURE__ */ jsx17(NavigationMenu, {
+    children: /* @__PURE__ */ jsx16(NavigationMenu, {
       elements: staticElements,
-      target: /* @__PURE__ */ jsx17(RemoraidButton, {
+      target: /* @__PURE__ */ jsx16(RemoraidButton, {
         label: "Static elements",
         icon: IconDots,
         responsive: orientation === "vertical" /* Vertical */ ? buttonResponsive : false,
@@ -6813,7 +6875,7 @@ function NavbarMinimalContent({
       }, componentsProps?.NavigationMenu?.componentsProps)
     })
   }) : null;
-  return /* @__PURE__ */ jsx17(Paper, {
+  return /* @__PURE__ */ jsx16(Paper, {
     bg: theme.transparentBackground,
     h: "100%",
     p: "md",
@@ -6823,13 +6885,13 @@ function NavbarMinimalContent({
       h: "100%",
       children: [
         logoButton,
-        /* @__PURE__ */ jsx17(ScrollArea2, {
+        /* @__PURE__ */ jsx16(ScrollArea2, {
           flex: 1,
-          children: /* @__PURE__ */ jsx17(Stack2, {
+          children: /* @__PURE__ */ jsx16(Stack2, {
             children: buttons
           })
         }),
-        /* @__PURE__ */ jsx17(Stack2, {
+        /* @__PURE__ */ jsx16(Stack2, {
           visibleFrom: collapseStaticElements ? collapseStaticElementsBreakpoint : undefined,
           children: staticButtons
         }),
@@ -6839,15 +6901,15 @@ function NavbarMinimalContent({
       wrap: "nowrap",
       children: [
         logoButton,
-        /* @__PURE__ */ jsx17(ScrollArea2, {
+        /* @__PURE__ */ jsx16(ScrollArea2, {
           flex: 1,
           style: { contain: "inline-size" },
-          children: /* @__PURE__ */ jsx17(Group2, {
+          children: /* @__PURE__ */ jsx16(Group2, {
             wrap: "nowrap",
             children: buttons
           })
         }),
-        /* @__PURE__ */ jsx17(Group2, {
+        /* @__PURE__ */ jsx16(Group2, {
           wrap: "nowrap",
           visibleFrom: collapseStaticElements ? collapseStaticElementsBreakpoint : undefined,
           children: staticButtons
@@ -6879,9 +6941,9 @@ import {
 } from "@mantine/core";
 import { IconClick as IconClick2 } from "@tabler/icons-react";
 var import_lodash9 = __toESM(require_lodash(), 1);
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function ControlButton({
-  icon: Icon4 = IconClick2,
+  icon: Icon3 = IconClick2,
   mounted = true,
   size = "xs",
   iconSize = "tiny" /* Tiny */,
@@ -6892,17 +6954,17 @@ function ControlButton({
   componentsProps
 }) {
   const theme = useRemoraidTheme();
-  return /* @__PURE__ */ jsx18(Transition3, {
+  return /* @__PURE__ */ jsx17(Transition3, {
     mounted,
     transition: "fade",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx18(Tooltip2, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx17(Tooltip2, {
       label: tooltip,
       disabled: !Boolean(tooltip),
       ...componentsProps?.tooltip,
-      children: /* @__PURE__ */ jsx18(ActionIcon2, {
+      children: /* @__PURE__ */ jsx17(ActionIcon2, {
         "data-control-button": true,
         size,
         color,
@@ -6913,7 +6975,7 @@ function ControlButton({
           order,
           ...import_lodash9.merge(transitionStyle, componentsProps?.button?.style)
         },
-        children: /* @__PURE__ */ jsx18(Icon4, {
+        children: /* @__PURE__ */ jsx17(Icon3, {
           ...import_lodash9.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
         })
       })
@@ -6930,7 +6992,7 @@ import {
 } from "@mantine/core";
 import { IconGripHorizontal } from "@tabler/icons-react";
 var import_lodash10 = __toESM(require_lodash(), 1);
-import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
 function Controls({
   groupRef,
   mounted = true,
@@ -6988,14 +7050,14 @@ function Controls({
   const handlePointerUp = (e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   };
-  return /* @__PURE__ */ jsx19(Transition4, {
+  return /* @__PURE__ */ jsx18(Transition4, {
     mounted,
     keepMounted: true,
     transition: "pop",
     duration: theme.transitionDurations.short,
     timingFunction: "ease",
     ...componentsProps?.transition,
-    children: (transitionStyle) => /* @__PURE__ */ jsx19(Paper2, {
+    children: (transitionStyle) => /* @__PURE__ */ jsx18(Paper2, {
       ref: containerRef,
       pos: "absolute",
       p: gutter,
@@ -7018,7 +7080,7 @@ function Controls({
         ...componentsProps?.group,
         className: clsx_default("remoraid-controls-group", componentsProps?.group?.className),
         children: [
-          /* @__PURE__ */ jsx19(IconGripHorizontal, {
+          /* @__PURE__ */ jsx18(IconGripHorizontal, {
             ...import_lodash10.merge({}, theme.componentsProps.icons[iconSize], { order: -100, color: "var(--mantine-color-default-border)" }, componentsProps?.gripIcon)
           }),
           children,
@@ -7026,7 +7088,7 @@ function Controls({
             if (isValidElementOfType(ControlButton, button)) {
               return button;
             }
-            return /* @__PURE__ */ jsx19(ControlButton, {
+            return /* @__PURE__ */ jsx18(ControlButton, {
               ...button
             }, i);
           })
@@ -7037,7 +7099,7 @@ function Controls({
 }
 
 // src/core/components/Pinnable/index.tsx
-import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
 function Pinnable({
   layoutType: layoutTypeProp,
   section,
@@ -7057,7 +7119,7 @@ function Pinnable({
   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__ */ jsx20(ControlButton, {
+  const controlButton = useMemo4(() => /* @__PURE__ */ jsx19(ControlButton, {
     icon: pinned ? IconPinnedOff : IconPin,
     tooltip: pinned ? "Unpin" : "Pin",
     color: "green",
@@ -7076,11 +7138,11 @@ function Pinnable({
     ...componentsProps?.container,
     className: clsx_default("remoraid-pinnable", componentsProps?.container?.className),
     children: [
-      controlsContainer === undefined ? /* @__PURE__ */ jsx20(Controls, {
+      controlsContainer === undefined ? /* @__PURE__ */ jsx19(Controls, {
         dragContainerRef: containerRef,
         ...componentsProps?.controls,
         children: controlButton
-      }) : controlsContainer !== null && /* @__PURE__ */ jsx20(Portal2, {
+      }) : controlsContainer !== null && /* @__PURE__ */ jsx19(Portal2, {
         target: controlsContainer,
         children: controlButton
       }),
@@ -7094,7 +7156,7 @@ function Pinnable({
     return null;
   }
   if (pinned && layoutType === "frame" /* Frame */) {
-    return /* @__PURE__ */ jsx20(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx19(FrameLayout_default.Element, {
       layoutId,
       section,
       hidden,
@@ -7106,9 +7168,10 @@ function Pinnable({
 }
 
 // src/core/components/AppShell/Navbar/NavbarMinimal/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function NavbarMinimal({
   pinnable = true,
+  includeDefaultNavigationElements = true,
   componentsProps
 }) {
   const {
@@ -7123,8 +7186,12 @@ function NavbarMinimal({
   const handleLeave = () => {
     setHover(false);
   };
+  const contentProps = {
+    includeDefaultNavigationElements,
+    ...componentsProps?.content
+  };
   if (position === "left" /* Left */ || position === "right" /* Right */) {
-    return /* @__PURE__ */ jsx21(FrameLayout_default.Element, {
+    return /* @__PURE__ */ jsx20(FrameLayout_default.Element, {
       section: position,
       includeContainer: true,
       ...componentsProps?.layoutElement,
@@ -7135,19 +7202,19 @@ function NavbarMinimal({
           }
         }
       }, componentsProps?.layoutElement?.componentsProps),
-      children: /* @__PURE__ */ jsx21(NavbarMinimalContent, {
+      children: /* @__PURE__ */ jsx20(NavbarMinimalContent, {
         orientation: "vertical" /* Vertical */,
-        ...componentsProps?.content
+        ...contentProps
       })
     });
   }
   if (position === "top" /* Top */ || position === "bottom" /* Bottom */) {
-    const content = /* @__PURE__ */ jsx21(NavbarMinimalContent, {
+    const content = /* @__PURE__ */ jsx20(NavbarMinimalContent, {
       orientation: "horizontal" /* Horizontal */,
-      ...componentsProps?.content
+      ...contentProps
     });
     if (pinnable) {
-      return /* @__PURE__ */ jsx21(PageContainer, {
+      return /* @__PURE__ */ jsx20(PageContainer, {
         ...componentsProps?.container,
         componentsProps: {
           ...componentsProps?.container?.componentsProps,
@@ -7156,7 +7223,7 @@ function NavbarMinimal({
             className: clsx_default("hide-if-empty", componentsProps?.container?.componentsProps?.container?.className)
           }
         },
-        children: /* @__PURE__ */ jsx21(Pinnable, {
+        children: /* @__PURE__ */ jsx20(Pinnable, {
           section: position,
           initialValue: true,
           ...componentsProps?.Pinnable,
@@ -7199,11 +7266,11 @@ function NavbarMinimal({
     return content;
   }
   if (position === "content" /* Content */) {
-    return /* @__PURE__ */ jsx21(PageContainer, {
+    return /* @__PURE__ */ jsx20(PageContainer, {
       ...componentsProps?.container,
-      children: /* @__PURE__ */ jsx21(NavbarMinimalContent, {
+      children: /* @__PURE__ */ jsx20(NavbarMinimalContent, {
         orientation: "horizontal" /* Horizontal */,
-        ...componentsProps?.content
+        ...contentProps
       })
     });
   }
@@ -7212,18 +7279,7 @@ function NavbarMinimal({
 
 // src/core/components/AppShell/Navbar/index.tsx
 import { IconLogin, IconLogout, IconMoon, IconSun } from "@tabler/icons-react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var supportedNavbarPositions = {
-  ["minimal" /* Minimal */]: [
-    null,
-    "top" /* Top */,
-    "bottom" /* Bottom */,
-    "left" /* Left */,
-    "right" /* Right */,
-    "content" /* Content */
-  ]
-};
-var defaultNavbarPositions = { ["minimal" /* Minimal */]: "left" /* Left */ };
+import { jsx as jsx21 } from "react/jsx-runtime";
 var getDefaultNavigationElements = ({
   colorScheme,
   setColorScheme,
@@ -7263,7 +7319,7 @@ var getDefaultNavigationElements = ({
 function Navbar({ componentsProps }) {
   const { navbarVariant } = useRemoraidApp();
   if (navbarVariant === "minimal" /* Minimal */) {
-    return /* @__PURE__ */ jsx22(NavbarMinimal, {
+    return /* @__PURE__ */ jsx21(NavbarMinimal, {
       ...componentsProps?.NavbarMinimal
     });
   }
@@ -7273,60 +7329,60 @@ var Navbar_default = Object.assign(Navbar, {
   NavbarMinimal
 });
 
-// src/core/components/AppShell/AppShellUserExperienceProvider/index.tsx
-import { jsx as jsx23 } from "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 useContext10(appShellUserExperienceContext);
-};
-function AppShellUserExperienceProvider({
-  children,
-  initialValue,
-  cookieName
+// src/core/components/AppShell/Footer/FooterMinimal/index.tsx
+import { Center } from "@mantine/core";
+import { IconPennant } from "@tabler/icons-react";
+var import_lodash12 = __toESM(require_lodash(), 1);
+import { jsx as jsx22 } from "react/jsx-runtime";
+function FooterMinimal({
+  icon: Icon4 = 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__ */ jsx23(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__ */ jsx22(PageContainer, {
+    ...componentsProps?.container,
+    children: /* @__PURE__ */ jsx22(Center, {
+      children: /* @__PURE__ */ jsx22(Icon4, {
+        color: "var(--mantine-color-disabled)",
+        ...theme.componentsProps.icons.huge,
+        ...componentsProps?.icon
+      })
+    })
   });
+  if (position === "bottom" /* Bottom */) {
+    return /* @__PURE__ */ jsx22(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
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Footer({ componentsProps }) {
+  const { footerVariant } = useRemoraidApp();
+  if (footerVariant === "minimal" /* Minimal */) {
+    return /* @__PURE__ */ jsx23(FooterMinimal, {
+      ...componentsProps?.FooterMinimal
+    });
+  }
+  return null;
 }
+var Footer_default = Object.assign(Footer, {
+  FooterMinimal
+});
 
 // src/core/components/AppShell/index.tsx
 import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -7446,25 +7502,30 @@ import { useEffect as useEffect6, useRef as useRef3, useState as useState8 } fro
 import {
   Chip,
   Flex,
-  ScrollArea as ScrollArea3
+  Scroller
 } from "@mantine/core";
+var import_lodash14 = __toESM(require_lodash(), 1);
 import { jsx as jsx26 } from "react/jsx-runtime";
 function ScrollableChipGroup({
   value,
-  ref,
   onChange,
   gap = "xs",
   componentsProps,
   children
 }) {
-  return /* @__PURE__ */ jsx26(ScrollArea3, {
-    ref,
-    ...componentsProps?.ScrollArea,
-    style: { contain: "inline-size", ...componentsProps?.ScrollArea?.style },
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx26(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__ */ jsx26(Chip.Group, {
       value,
       onChange,
-      ...componentsProps?.chipGroup,
+      ...componentsProps?.ChipGroup,
       multiple: true,
       children: /* @__PURE__ */ jsx26(Flex, {
         justify: "flex-start",
@@ -7479,12 +7540,12 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_lodash14 = __toESM(require_lodash(), 1);
+var import_lodash15 = __toESM(require_lodash(), 1);
 import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
 function WidgetSelectionHeader({
   title,
   pinnableSection = "top" /* Top */,
-  initiallyPinned = true,
+  initiallyPinned: initiallyPinnedProp,
   disabledWidgets,
   componentsProps
 }) {
@@ -7500,6 +7561,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] = useState8(false);
   const [isPinned, setIsPinned] = useState8(initiallyPinned);
   const handleEnter = () => {
@@ -7508,7 +7570,7 @@ function WidgetSelectionHeader({
   const handleLeave = () => {
     setHover(false);
   };
-  const scrollAreaRef = useRef3(null);
+  const containerRef = useRef3(null);
   const widgets = widgetsContext2.widgets[page.pageId] ?? {};
   const selectedWidgets = Object.entries(widgets).reduce((t, [widgetId, widget]) => widget?.selected ? [...t, widgetId] : t, []);
   const element = /* @__PURE__ */ jsxs8(Flex2, {
@@ -7516,6 +7578,7 @@ function WidgetSelectionHeader({
     align: "center",
     gap: "md",
     ...componentsProps?.container,
+    ref: containerRef,
     onMouseEnter: (e) => {
       if (!pinnableSection) {
         handleEnter();
@@ -7526,13 +7589,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__ */ jsx27(Text, {
         size: "md",
         ...componentsProps?.title,
+        style: { whiteSpace: "nowrap", ...componentsProps?.title?.style },
         children: title ?? page.name
       }),
       /* @__PURE__ */ jsx27(Divider, {
@@ -7541,13 +7605,17 @@ function WidgetSelectionHeader({
       }),
       isPageRegistered(page.pageId) && /* @__PURE__ */ jsx27(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;
@@ -7568,12 +7636,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
                   })
                 })
@@ -7614,19 +7685,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) {
@@ -7720,7 +7792,7 @@ function BadgeMinimal({
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var import_lodash15 = __toESM(require_lodash(), 1);
+var import_lodash16 = __toESM(require_lodash(), 1);
 import { jsx as jsx29, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
 import { createElement } from "react";
 function BadgeGroup({
@@ -7768,7 +7840,7 @@ function BadgeGroup({
                 ...componentsProps?.cumulativeBadge,
                 style: {
                   cursor: "pointer",
-                  ...import_lodash15.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
+                  ...import_lodash16.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
                 },
                 children: [
                   numVisibleBadges,
@@ -7792,7 +7864,7 @@ function BadgeGroup({
 }
 // src/core/components/AlertMinimal/index.tsx
 import { Alert, Transition as Transition7 } from "@mantine/core";
-var import_lodash16 = __toESM(require_lodash(), 1);
+var import_lodash17 = __toESM(require_lodash(), 1);
 import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
 function AlertMinimal({
   category,
@@ -7809,7 +7881,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__ */ jsx30(Transition7, {
     mounted,
     transition: "fade",
@@ -7823,10 +7895,10 @@ function AlertMinimal({
       onClose,
       withCloseButton: onClose !== undefined,
       icon: Icon4 ? /* @__PURE__ */ jsx30(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
@@ -7843,7 +7915,7 @@ import {
   useState as useState9
 } from "react";
 import { IconX } from "@tabler/icons-react";
-var import_lodash17 = __toESM(require_lodash(), 1);
+var import_lodash18 = __toESM(require_lodash(), 1);
 import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
 function WidgetWrapper({
   config,
@@ -7914,7 +7986,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: [
@@ -7994,12 +8066,12 @@ import {
   Title,
   Stack as Stack5,
   Box as Box7,
-  ScrollArea as ScrollArea4,
+  ScrollArea as ScrollArea3,
   Transition as Transition9,
   Text as Text2
 } from "@mantine/core";
 import { Children } from "react";
-var import_lodash18 = __toESM(require_lodash(), 1);
+var import_lodash19 = __toESM(require_lodash(), 1);
 import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 function Widget({
@@ -8071,7 +8143,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
                   })
                 })
@@ -8112,7 +8184,7 @@ function Widget({
             });
           })
         }),
-        (loading || Children.toArray(children).length > 0) && /* @__PURE__ */ jsx32(ScrollArea4.Autosize, {
+        (loading || Children.toArray(children).length > 0) && /* @__PURE__ */ jsx32(ScrollArea3.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           className: clsx_default("remoraid-widget-children-container", componentsProps?.childrenContainer?.className),
@@ -8342,7 +8414,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash19 = __toESM(require_lodash(), 1);
+var import_lodash20 = __toESM(require_lodash(), 1);
 import { Select } from "@mantine/core";
 import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultNavbarSettingsWidgetId = "navbar-settings";
@@ -8353,7 +8425,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",
@@ -8370,7 +8442,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) => ({
@@ -8378,15 +8458,15 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash19.isEqual(userExperience.navbar, initialUserExperience.navbar),
-    children: /* @__PURE__ */ jsxs15(SettingsTable_default, {
+    custom: !import_lodash20.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    children: navbarVariant !== null && /* @__PURE__ */ jsxs15(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
         /* @__PURE__ */ jsx39(SettingsTable_default.Row, {
           label: "Select navbar position",
           children: /* @__PURE__ */ jsx39(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]
             })),
@@ -8408,7 +8488,7 @@ function NavbarSettingsWidget({
           label: "Select navbar mode",
           children: /* @__PURE__ */ jsx39(Select, {
             value: userExperience.navbar.mode,
-            data: Object.values(NavbarMode).map((mode) => ({
+            data: navbarMetadata2.supportedModes.map((mode) => ({
               value: mode,
               label: modeLabels[mode]
             })),
@@ -8436,7 +8516,7 @@ function NavbarSettingsWidget({
   });
 }
 // src/core/components/FooterSettingsWidget/index.tsx
-var import_lodash20 = __toESM(require_lodash(), 1);
+var import_lodash21 = __toESM(require_lodash(), 1);
 import { Select as Select2 } from "@mantine/core";
 import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultFooterSettingsWidgetId = "footer-settings";
@@ -8447,7 +8527,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",
@@ -8459,7 +8539,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) => ({
@@ -8467,15 +8555,15 @@ function FooterSettingsWidget({
         footer: initialUserExperience.footer
       }));
     },
-    custom: !import_lodash20.isEqual(userExperience.footer, initialUserExperience.footer),
-    children: /* @__PURE__ */ jsxs16(SettingsTable_default, {
+    custom: !import_lodash21.isEqual(userExperience.footer, initialUserExperience.footer),
+    children: footerVariant !== null && /* @__PURE__ */ jsxs16(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
         /* @__PURE__ */ jsx40(SettingsTable_default.Row, {
           label: "Select footer position",
           children: /* @__PURE__ */ jsx40(Select2, {
             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]
             })),
@@ -8552,7 +8640,7 @@ import {
   Box as Box8,
   Input,
   Paper as Paper4,
-  ScrollArea as ScrollArea5
+  ScrollArea as ScrollArea4
 } from "@mantine/core";
 import { useState as useState10 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
@@ -8586,7 +8674,7 @@ function InputWrapperScrollArea({
         transition: "border-color .1s",
         borderColor: error ? "var(--mantine-color-error)" : isHovering ? "var(--mantine-primary-color-filled)" : undefined
       },
-      children: /* @__PURE__ */ jsx42(ScrollArea5, {
+      children: /* @__PURE__ */ jsx42(ScrollArea4, {
         mah,
         px: "md",
         flex: 1,
@@ -8615,10 +8703,9 @@ export {
   useFrameLayoutElement,
   useFrameLayout,
   useAppShellUserExperience,
-  supportedNavbarPositions,
-  supportedFooterPositions,
   scrollToWidget,
   remoraidAppShellLayoutId,
+  navbarMetadata,
   isValidElementOfType,
   isIcon,
   getElementTypeName,
@@ -8626,6 +8713,7 @@ export {
   getDefaultNavigationElements,
   getDefaultButtonIconSize,
   getCssVars,
+  footerMetadata,
   defaultUserExperienceCookieName,
   defaultUserExperience,
   defaultTransitionDurations,
@@ -8633,10 +8721,8 @@ export {
   defaultSettingsTableOptions,
   defaultRemoraidButtonSize,
   defaultNavbarSettingsWidgetId,
-  defaultNavbarPositions,
   defaultLayoutsContext,
   defaultFooterSettingsWidgetId,
-  defaultFooterPositions,
   defaultAppShellUserExperienceCookieName,
   defaultAppShellUserExperience,
   defaultAppContext,