remoraid 3.3.2 → 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,6 +5753,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
 import { px, rgba, useMantineTheme } from "@mantine/core";
@@ -6157,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);
@@ -6168,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
   });
 }
@@ -6179,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) {
@@ -6212,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,
@@ -6239,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);
 };
@@ -6373,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,
@@ -6388,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%",
@@ -6401,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",
@@ -6410,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,
@@ -6438,283 +6645,114 @@ function FrameLayout({
             })
           ]
         }),
-        /* @__PURE__ */ jsx12(Group, {
+        /* @__PURE__ */ jsx13(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
-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;
-  }
-  return null;
-}
-
-// src/core/components/AppShell/Footer/index.tsx
-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,
-  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}`))
-            ]
-          })
-        ]
-      });
-    }
+          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/Navbar/NavbarMinimal/NavbarMinimalContent/index.tsx
-import { IconDots } from "@tabler/icons-react";
+// src/core/lib/errors.ts
+class InvalidComponentUsageError extends Error {
+  constructor(component, rule) {
+    super(`Invalid usage of '${component}': ${rule}`);
+    this.name = "InvalidComponentUsageError";
+  }
+}
 
-// src/core/components/RemoraidButton/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 */,
+// src/core/components/Page/PageContainer/index.tsx
+import { Container } from "@mantine/core";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function PageContainer({
+  children,
+  p = 0,
+  hidden = false,
   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 ?? IconClick;
-  const iconElement = isValidElement3(Icon3) ? Icon3 : /* @__PURE__ */ jsx16(Icon3, {
-    ...import_lodash7.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+  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
   });
-  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
-        })
-      ]
+}
+
+// src/core/components/FrameLayout/Element/index.tsx
+var import_lodash7 = __toESM(require_lodash(), 1);
+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 { 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();
@@ -6742,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,
@@ -6763,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,
@@ -6802,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,
@@ -6833,7 +6875,7 @@ function NavbarMinimalContent({
       }, componentsProps?.NavigationMenu?.componentsProps)
     })
   }) : null;
-  return /* @__PURE__ */ jsx17(Paper, {
+  return /* @__PURE__ */ jsx16(Paper, {
     bg: theme.transparentBackground,
     h: "100%",
     p: "md",
@@ -6843,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
         }),
@@ -6859,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
@@ -6899,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 */,
@@ -6912,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,
@@ -6933,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)
         })
       })
@@ -6950,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,
@@ -7008,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,
@@ -7038,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,
@@ -7046,7 +7088,7 @@ function Controls({
             if (isValidElementOfType(ControlButton, button)) {
               return button;
             }
-            return /* @__PURE__ */ jsx19(ControlButton, {
+            return /* @__PURE__ */ jsx18(ControlButton, {
               ...button
             }, i);
           })
@@ -7057,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,
@@ -7077,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",
@@ -7096,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
       }),
@@ -7114,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,
@@ -7126,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 {
@@ -7143,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,
@@ -7155,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,
@@ -7176,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,
@@ -7219,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
       })
     });
   }
@@ -7232,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,
@@ -7283,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
     });
   }
@@ -7293,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";
@@ -8389,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",
@@ -8406,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) => ({
@@ -8415,14 +8459,14 @@ function NavbarSettingsWidget({
       }));
     },
     custom: !import_lodash20.isEqual(userExperience.navbar, initialUserExperience.navbar),
-    children: /* @__PURE__ */ jsxs15(SettingsTable_default, {
+    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]
             })),
@@ -8444,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]
             })),
@@ -8483,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",
@@ -8495,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) => ({
@@ -8504,14 +8556,14 @@ function FooterSettingsWidget({
       }));
     },
     custom: !import_lodash21.isEqual(userExperience.footer, initialUserExperience.footer),
-    children: /* @__PURE__ */ jsxs16(SettingsTable_default, {
+    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]
             })),
@@ -8651,10 +8703,9 @@ export {
   useFrameLayoutElement,
   useFrameLayout,
   useAppShellUserExperience,
-  supportedNavbarPositions,
-  supportedFooterPositions,
   scrollToWidget,
   remoraidAppShellLayoutId,
+  navbarMetadata,
   isValidElementOfType,
   isIcon,
   getElementTypeName,
@@ -8662,6 +8713,7 @@ export {
   getDefaultNavigationElements,
   getDefaultButtonIconSize,
   getCssVars,
+  footerMetadata,
   defaultUserExperienceCookieName,
   defaultUserExperience,
   defaultTransitionDurations,
@@ -8669,10 +8721,8 @@ export {
   defaultSettingsTableOptions,
   defaultRemoraidButtonSize,
   defaultNavbarSettingsWidgetId,
-  defaultNavbarPositions,
   defaultLayoutsContext,
   defaultFooterSettingsWidgetId,
-  defaultFooterPositions,
   defaultAppShellUserExperienceCookieName,
   defaultAppShellUserExperience,
   defaultAppContext,