remoraid 2.33.1 → 2.36.2

package/dist/core/index.cjs

@@ -5561,6 +5561,9 @@ var useWidgets = () => {
 };
 var useWidget = (pageId, widgetId) => {
   const { widgets } = useWidgets();
+  if (pageId === undefined || widgetId === undefined) {
+    return null;
+  }
   return widgets?.[pageId]?.[widgetId] ?? null;
 };
 function WidgetsProvider({
@@ -6909,6 +6912,7 @@ function Pinnable({
   layoutId,
   controlsContainer,
   hidden = false,
+  onPinnedValueChange,
   componentsProps,
   children
 }) {
@@ -6927,7 +6931,7 @@ function Pinnable({
     order: 100,
     ...componentsProps?.button,
     onClick: (e) => {
-      setPinned((p) => !p);
+      setPinned((prev) => !prev);
       componentsProps?.button?.onClick?.(e);
     }
   }, undefined, false, undefined, this), [pinned, componentsProps?.button]);
@@ -6950,6 +6954,9 @@ function Pinnable({
       children
     ]
   }, undefined, true, undefined, this);
+  import_react13.useEffect(() => {
+    onPinnedValueChange?.(pinned);
+  }, [pinned]);
   if (!layout) {
     return null;
   }
@@ -7542,11 +7549,13 @@ function WidgetWrapper({
 }
 // src/core/components/Widget/index.tsx
 var import_core20 = require("@mantine/core");
+var import_lodash13 = __toESM(require_lodash());
 var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
 var react2 = require("react");
 function Widget({
   id,
   title,
+  description,
   config,
   badges: badgesProp,
   buttons: buttonsProp,
@@ -7585,21 +7594,36 @@ function Widget({
           justify: "space-between",
           wrap: "nowrap",
           children: [
-            /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
-              gap: badgesGap,
-              wrap: "nowrap",
+            /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
+              gap: 4,
               children: [
-                /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
-                  order: 1,
-                  size: "h2",
-                  lineClamp: 1,
-                  ...componentsProps?.title,
-                  children: title ?? id
-                }, undefined, false, undefined, this),
-                badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
-                  badges,
+                /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
                   gap: badgesGap,
-                  ...componentsProps?.badgeGroup
+                  wrap: "nowrap",
+                  children: [
+                    /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
+                      order: 1,
+                      size: "h2",
+                      lineClamp: 1,
+                      ...componentsProps?.title,
+                      children: title ?? id
+                    }, undefined, false, undefined, this),
+                    badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
+                      badges,
+                      gap: badgesGap,
+                      ...componentsProps?.badgeGroup
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Transition, {
+                  mounted: Boolean(description),
+                  children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Text, {
+                    size: "sm",
+                    c: "dimmed",
+                    ...componentsProps?.description,
+                    style: import_lodash13.merge(transitionStyle, componentsProps?.description?.style),
+                    children: description
+                  }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
@@ -7638,7 +7662,7 @@ function Widget({
             });
           })
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.ScrollArea.Autosize, {
+        (loading || Boolean(children)) && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.ScrollArea.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           children: loading ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Center, {
@@ -7868,7 +7892,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash13 = __toESM(require_lodash());
+var import_lodash14 = __toESM(require_lodash());
 var import_core24 = require("@mantine/core");
 var import_icons_react12 = require("@tabler/icons-react");
 var jsx_dev_runtime33 = require("react/jsx-dev-runtime");
@@ -7894,7 +7918,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash13.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash14.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsx_dev_runtime33.jsxDEV(SettingsTable_default, {
       ...componentsProps?.table,
       children: [

package/dist/core/index.d.ts

@@ -185,7 +185,7 @@ declare enum ClickTransformation {
 }
 declare const getDefaultWidgetContext: (configuration: WidgetConfiguration) => WidgetContext;
 declare const useWidgets: () => WidgetsContext;
-declare const useWidget: (pageId: string, widgetId: string) => WidgetContext | null;
+declare const useWidget: (pageId: string | undefined, widgetId: string | undefined) => WidgetContext | null;
 interface WidgetsProviderProps {}
 import { PartialDeep as PartialDeep2 } from "type-fest";
 declare const defaultTransitionDurations: RemoraidTheme["transitionDurations"];
@@ -485,6 +485,7 @@ interface ExplicitPinnableProps<T extends LayoutType> {
 	layoutId?: string;
 	controlsContainer?: HTMLDivElement | null;
 	hidden?: boolean;
+	onPinnedValueChange?: (newValue: boolean) => void;
 	componentsProps?: {
 		controls?: Partial<ControlsProps>
 		button?: Partial<ControlButtonProps>
@@ -493,7 +494,7 @@ interface ExplicitPinnableProps<T extends LayoutType> {
 	};
 }
 type PinnableProps<T extends LayoutType = PinnableDefaultLayoutType> = OptionalIfExtends<ExplicitPinnableProps<T>, "layoutType", PinnableDefaultLayoutType, T>;
-declare function Pinnable2<T extends LayoutType = PinnableDefaultLayoutType>({ layoutType: layoutTypeProp, section, initialValue, layoutId, controlsContainer, hidden, componentsProps, children }: PropsWithChildren15<PinnableProps<T>>): ReactNode20;
+declare function Pinnable2<T extends LayoutType = PinnableDefaultLayoutType>({ layoutType: layoutTypeProp, section, initialValue, layoutId, controlsContainer, hidden, onPinnedValueChange, componentsProps, children }: PropsWithChildren15<PinnableProps<T>>): ReactNode20;
 interface WidgetSelectionHeaderProps {
 	title?: string;
 	pinnableSection?: FrameLayoutSection.Top | FrameLayoutSection.Bottom | null;
@@ -582,11 +583,12 @@ interface WidgetWrapperProps {
 	};
 }
 declare function WidgetWrapper({ config, mt, withCloseButton, pinnableSection, componentsProps, children }: PropsWithChildren16<WidgetWrapperProps>): ReactNode25;
-import { MantineSize as MantineSize10, LoaderProps, DividerProps, StackProps as StackProps3, TitleProps, ScrollAreaAutosizeProps } from "@mantine/core";
+import { MantineSize as MantineSize10, LoaderProps, DividerProps, StackProps as StackProps3, TitleProps, ScrollAreaAutosizeProps, TextProps as TextProps2 } from "@mantine/core";
 import { PropsWithChildren as PropsWithChildren17, ReactNode as ReactNode26 } from "react";
 interface WidgetProps {
 	id: string;
 	title?: string;
+	description?: string;
 	config?: Partial<Omit<WidgetConfiguration, "widgetId">>;
 	badges?: ElementOrPropsOfType<typeof BadgeMinimal>[];
 	buttons?: ElementOrPropsOfType<typeof RemoraidButton, RemoraidButtonProps<true> | RemoraidButtonProps<false>>[];
@@ -605,12 +607,13 @@ interface WidgetProps {
 		childrenContainer?: Partial<ScrollAreaAutosizeProps>
 		loader?: Partial<LoaderProps>
 		title?: Partial<TitleProps>
+		description?: Partial<TextProps2>
 		badgeGroup?: Partial<BadgeGroupProps>
 		divider?: Partial<DividerProps>
 		alertsContainer?: Partial<StackProps3>
 	};
 }
-declare function Widget({ id, title, config, badges: badgesProp, buttons: buttonsProp, alerts: alertsProp, gaps, loading, mt, pinnableSection, componentsProps, children }: PropsWithChildren17<WidgetProps>): ReactNode26;
+declare function Widget({ id, title, description, config, badges: badgesProp, buttons: buttonsProp, alerts: alertsProp, gaps, loading, mt, pinnableSection, componentsProps, children }: PropsWithChildren17<WidgetProps>): ReactNode26;
 import { ContainerProps as ContainerProps2, StackProps as StackProps4 } from "@mantine/core";
 import { PropsWithChildren as PropsWithChildren18, ReactNode as ReactNode27 } from "react";
 declare const usePage: () => PageConfiguration | null;

package/dist/core/index.js

@@ -5462,6 +5462,9 @@ var useWidgets = () => {
 };
 var useWidget = (pageId, widgetId) => {
   const { widgets } = useWidgets();
+  if (pageId === undefined || widgetId === undefined) {
+    return null;
+  }
   return widgets?.[pageId]?.[widgetId] ?? null;
 };
 function WidgetsProvider({
@@ -6661,7 +6664,7 @@ function Page({
 
 // src/core/components/WidgetSelectionHeader/index.tsx
 import { IconCheck, IconFocus, IconNavigation } from "@tabler/icons-react";
-import { useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState8 } from "react";
 
 // src/core/components/ScrollableChipGroup/index.tsx
 import {
@@ -6704,6 +6707,7 @@ var import_lodash8 = __toESM(require_lodash(), 1);
 
 // src/core/components/Pinnable/index.tsx
 import {
+  useEffect as useEffect4,
   useMemo as useMemo4,
   useRef as useRef2,
   useState as useState7
@@ -6885,6 +6889,7 @@ function Pinnable({
   layoutId,
   controlsContainer,
   hidden = false,
+  onPinnedValueChange,
   componentsProps,
   children
 }) {
@@ -6903,7 +6908,7 @@ function Pinnable({
     order: 100,
     ...componentsProps?.button,
     onClick: (e) => {
-      setPinned((p) => !p);
+      setPinned((prev) => !prev);
       componentsProps?.button?.onClick?.(e);
     }
   }, undefined, false, undefined, this), [pinned, componentsProps?.button]);
@@ -6926,6 +6931,9 @@ function Pinnable({
       children
     ]
   }, undefined, true, undefined, this);
+  useEffect4(() => {
+    onPinnedValueChange?.(pinned);
+  }, [pinned]);
   if (!layout) {
     return null;
   }
@@ -7071,7 +7079,7 @@ function WidgetSelectionHeader({
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!activeWidget) {
       return;
     }
@@ -7389,7 +7397,7 @@ function RemoraidButton({
 import { Paper as Paper3, Transition as Transition7 } from "@mantine/core";
 import {
   useCallback as useCallback2,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useRef as useRef4,
   useState as useState9
 } from "react";
@@ -7526,7 +7534,7 @@ function WidgetWrapper({
       children: element
     }, undefined, false, undefined, this);
   }
-  useEffect5(() => {
+  useEffect6(() => {
     if (!page) {
       return;
     }
@@ -7545,13 +7553,17 @@ import {
   Title,
   Stack as Stack5,
   Box as Box5,
-  ScrollArea as ScrollArea3
+  ScrollArea as ScrollArea3,
+  Transition as Transition8,
+  Text as Text2
 } from "@mantine/core";
+var import_lodash13 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV26 } from "react/jsx-dev-runtime";
 import { createElement as createElement2 } from "react";
 function Widget({
   id,
   title,
+  description,
   config,
   badges: badgesProp,
   buttons: buttonsProp,
@@ -7590,21 +7602,36 @@ function Widget({
           justify: "space-between",
           wrap: "nowrap",
           children: [
-            /* @__PURE__ */ jsxDEV26(Group5, {
-              gap: badgesGap,
-              wrap: "nowrap",
+            /* @__PURE__ */ jsxDEV26(Stack5, {
+              gap: 4,
               children: [
-                /* @__PURE__ */ jsxDEV26(Title, {
-                  order: 1,
-                  size: "h2",
-                  lineClamp: 1,
-                  ...componentsProps?.title,
-                  children: title ?? id
-                }, undefined, false, undefined, this),
-                badges !== undefined && /* @__PURE__ */ jsxDEV26(BadgeGroup, {
-                  badges,
+                /* @__PURE__ */ jsxDEV26(Group5, {
                   gap: badgesGap,
-                  ...componentsProps?.badgeGroup
+                  wrap: "nowrap",
+                  children: [
+                    /* @__PURE__ */ jsxDEV26(Title, {
+                      order: 1,
+                      size: "h2",
+                      lineClamp: 1,
+                      ...componentsProps?.title,
+                      children: title ?? id
+                    }, undefined, false, undefined, this),
+                    badges !== undefined && /* @__PURE__ */ jsxDEV26(BadgeGroup, {
+                      badges,
+                      gap: badgesGap,
+                      ...componentsProps?.badgeGroup
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV26(Transition8, {
+                  mounted: Boolean(description),
+                  children: (transitionStyle) => /* @__PURE__ */ jsxDEV26(Text2, {
+                    size: "sm",
+                    c: "dimmed",
+                    ...componentsProps?.description,
+                    style: import_lodash13.merge(transitionStyle, componentsProps?.description?.style),
+                    children: description
+                  }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
@@ -7643,7 +7670,7 @@ function Widget({
             });
           })
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV26(ScrollArea3.Autosize, {
+        (loading || Boolean(children)) && /* @__PURE__ */ jsxDEV26(ScrollArea3.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           children: loading ? /* @__PURE__ */ jsxDEV26(Center, {
@@ -7815,7 +7842,7 @@ import { createContext as createContext7, useContext as useContext10 } from "rea
 import { Table as Table2 } from "@mantine/core";
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
-import { Table, Text as Text2 } from "@mantine/core";
+import { Table, Text as Text3 } from "@mantine/core";
 import { jsxDEV as jsxDEV31 } from "react/jsx-dev-runtime";
 function Row({
   children,
@@ -7826,7 +7853,7 @@ function Row({
     children: [
       /* @__PURE__ */ jsxDEV31(Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsxDEV31(Text2, {
+        children: /* @__PURE__ */ jsxDEV31(Text3, {
           size: "sm",
           children: label
         }, undefined, false, undefined, this)
@@ -7873,7 +7900,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash13 = __toESM(require_lodash(), 1);
+var import_lodash14 = __toESM(require_lodash(), 1);
 import { Chip as Chip3, Group as Group7 } from "@mantine/core";
 import { IconLink as IconLink2 } from "@tabler/icons-react";
 import { jsxDEV as jsxDEV33 } from "react/jsx-dev-runtime";
@@ -7899,7 +7926,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash13.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash14.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsxDEV33(SettingsTable_default, {
       ...componentsProps?.table,
       children: [

package/dist/jsonforms/index.cjs

@@ -6409,6 +6409,7 @@ function Pinnable({
   layoutId,
   controlsContainer,
   hidden = false,
+  onPinnedValueChange,
   componentsProps,
   children
 }) {
@@ -6427,7 +6428,7 @@ function Pinnable({
     order: 100,
     ...componentsProps?.button,
     onClick: (e) => {
-      setPinned((p) => !p);
+      setPinned((prev) => !prev);
       componentsProps?.button?.onClick?.(e);
     }
   }, undefined, false, undefined, this), [pinned, componentsProps?.button]);
@@ -6450,6 +6451,9 @@ function Pinnable({
       children
     ]
   }, undefined, true, undefined, this);
+  import_react13.useEffect(() => {
+    onPinnedValueChange?.(pinned);
+  }, [pinned]);
   if (!layout) {
     return null;
   }
@@ -6853,11 +6857,13 @@ function WidgetWrapper({
 }
 // src/core/components/Widget/index.tsx
 var import_core20 = require("@mantine/core");
+var import_lodash13 = __toESM(require_lodash());
 var jsx_dev_runtime26 = require("react/jsx-dev-runtime");
 var react2 = require("react");
 function Widget({
   id,
   title,
+  description,
   config,
   badges: badgesProp,
   buttons: buttonsProp,
@@ -6896,21 +6902,36 @@ function Widget({
           justify: "space-between",
           wrap: "nowrap",
           children: [
-            /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
-              gap: badgesGap,
-              wrap: "nowrap",
+            /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Stack, {
+              gap: 4,
               children: [
-                /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
-                  order: 1,
-                  size: "h2",
-                  lineClamp: 1,
-                  ...componentsProps?.title,
-                  children: title ?? id
-                }, undefined, false, undefined, this),
-                badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
-                  badges,
+                /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Group, {
                   gap: badgesGap,
-                  ...componentsProps?.badgeGroup
+                  wrap: "nowrap",
+                  children: [
+                    /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Title, {
+                      order: 1,
+                      size: "h2",
+                      lineClamp: 1,
+                      ...componentsProps?.title,
+                      children: title ?? id
+                    }, undefined, false, undefined, this),
+                    badges !== undefined && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(BadgeGroup, {
+                      badges,
+                      gap: badgesGap,
+                      ...componentsProps?.badgeGroup
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Transition, {
+                  mounted: Boolean(description),
+                  children: (transitionStyle) => /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Text, {
+                    size: "sm",
+                    c: "dimmed",
+                    ...componentsProps?.description,
+                    style: import_lodash13.merge(transitionStyle, componentsProps?.description?.style),
+                    children: description
+                  }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
@@ -6949,7 +6970,7 @@ function Widget({
             });
           })
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.ScrollArea.Autosize, {
+        (loading || Boolean(children)) && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.ScrollArea.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           children: loading ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(import_core20.Center, {
@@ -7120,7 +7141,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash13 = __toESM(require_lodash());
+var import_lodash14 = __toESM(require_lodash());
 var import_core24 = require("@mantine/core");
 var import_icons_react12 = require("@tabler/icons-react");
 var jsx_dev_runtime33 = require("react/jsx-dev-runtime");
@@ -7405,7 +7426,7 @@ var import_react26 = require("@jsonforms/react");
 var import_core31 = require("@mantine/core");
 var import_icons_react13 = require("@tabler/icons-react");
 var import_core32 = require("remoraid/core");
-var import_lodash14 = __toESM(require_lodash());
+var import_lodash15 = __toESM(require_lodash());
 var jsx_dev_runtime39 = require("react/jsx-dev-runtime");
 function PlainArrayControl(props) {
   const theme = import_core32.useRemoraidTheme();
@@ -7463,7 +7484,7 @@ function PlainArrayControl(props) {
                       renderers: renderers ?? [],
                       cells: cells ?? [],
                       onChange: ({ data: newData }) => {
-                        if (import_lodash14.isEqual(data[i], newData.item)) {
+                        if (import_lodash15.isEqual(data[i], newData.item)) {
                           return;
                         }
                         const dataCopy = [...data];

package/dist/jsonforms/index.js

@@ -6253,7 +6253,7 @@ var usePage = () => {
 
 // src/core/components/WidgetSelectionHeader/index.tsx
 import { IconCheck, IconFocus, IconNavigation } from "@tabler/icons-react";
-import { useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState8 } from "react";
 
 // src/core/components/ScrollableChipGroup/index.tsx
 import {
@@ -6268,6 +6268,7 @@ var import_lodash8 = __toESM(require_lodash(), 1);
 
 // src/core/components/Pinnable/index.tsx
 import {
+  useEffect as useEffect4,
   useMemo as useMemo4,
   useRef as useRef2,
   useState as useState7
@@ -6449,6 +6450,7 @@ function Pinnable({
   layoutId,
   controlsContainer,
   hidden = false,
+  onPinnedValueChange,
   componentsProps,
   children
 }) {
@@ -6467,7 +6469,7 @@ function Pinnable({
     order: 100,
     ...componentsProps?.button,
     onClick: (e) => {
-      setPinned((p) => !p);
+      setPinned((prev) => !prev);
       componentsProps?.button?.onClick?.(e);
     }
   }, undefined, false, undefined, this), [pinned, componentsProps?.button]);
@@ -6490,6 +6492,9 @@ function Pinnable({
       children
     ]
   }, undefined, true, undefined, this);
+  useEffect4(() => {
+    onPinnedValueChange?.(pinned);
+  }, [pinned]);
   if (!layout) {
     return null;
   }
@@ -6764,7 +6769,7 @@ function RemoraidButton({
 import { Paper as Paper3, Transition as Transition7 } from "@mantine/core";
 import {
   useCallback as useCallback2,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useRef as useRef4,
   useState as useState9
 } from "react";
@@ -6901,7 +6906,7 @@ function WidgetWrapper({
       children: element
     }, undefined, false, undefined, this);
   }
-  useEffect5(() => {
+  useEffect6(() => {
     if (!page) {
       return;
     }
@@ -6920,13 +6925,17 @@ import {
   Title,
   Stack as Stack5,
   Box as Box5,
-  ScrollArea as ScrollArea3
+  ScrollArea as ScrollArea3,
+  Transition as Transition8,
+  Text as Text2
 } from "@mantine/core";
+var import_lodash13 = __toESM(require_lodash(), 1);
 import { jsxDEV as jsxDEV26 } from "react/jsx-dev-runtime";
 import { createElement as createElement2 } from "react";
 function Widget({
   id,
   title,
+  description,
   config,
   badges: badgesProp,
   buttons: buttonsProp,
@@ -6965,21 +6974,36 @@ function Widget({
           justify: "space-between",
           wrap: "nowrap",
           children: [
-            /* @__PURE__ */ jsxDEV26(Group5, {
-              gap: badgesGap,
-              wrap: "nowrap",
+            /* @__PURE__ */ jsxDEV26(Stack5, {
+              gap: 4,
               children: [
-                /* @__PURE__ */ jsxDEV26(Title, {
-                  order: 1,
-                  size: "h2",
-                  lineClamp: 1,
-                  ...componentsProps?.title,
-                  children: title ?? id
-                }, undefined, false, undefined, this),
-                badges !== undefined && /* @__PURE__ */ jsxDEV26(BadgeGroup, {
-                  badges,
+                /* @__PURE__ */ jsxDEV26(Group5, {
                   gap: badgesGap,
-                  ...componentsProps?.badgeGroup
+                  wrap: "nowrap",
+                  children: [
+                    /* @__PURE__ */ jsxDEV26(Title, {
+                      order: 1,
+                      size: "h2",
+                      lineClamp: 1,
+                      ...componentsProps?.title,
+                      children: title ?? id
+                    }, undefined, false, undefined, this),
+                    badges !== undefined && /* @__PURE__ */ jsxDEV26(BadgeGroup, {
+                      badges,
+                      gap: badgesGap,
+                      ...componentsProps?.badgeGroup
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV26(Transition8, {
+                  mounted: Boolean(description),
+                  children: (transitionStyle) => /* @__PURE__ */ jsxDEV26(Text2, {
+                    size: "sm",
+                    c: "dimmed",
+                    ...componentsProps?.description,
+                    style: import_lodash13.merge(transitionStyle, componentsProps?.description?.style),
+                    children: description
+                  }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
@@ -7018,7 +7042,7 @@ function Widget({
             });
           })
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV26(ScrollArea3.Autosize, {
+        (loading || Boolean(children)) && /* @__PURE__ */ jsxDEV26(ScrollArea3.Autosize, {
           flex: 1,
           ...componentsProps?.childrenContainer,
           children: loading ? /* @__PURE__ */ jsxDEV26(Center, {
@@ -7131,7 +7155,7 @@ import { createContext as createContext7, useContext as useContext10 } from "rea
 import { Table as Table2 } from "@mantine/core";
 
 // src/core/components/SettingsWidget/SettingsTable/Row/index.tsx
-import { Table, Text as Text2 } from "@mantine/core";
+import { Table, Text as Text3 } from "@mantine/core";
 import { jsxDEV as jsxDEV31 } from "react/jsx-dev-runtime";
 function Row({
   children,
@@ -7142,7 +7166,7 @@ function Row({
     children: [
       /* @__PURE__ */ jsxDEV31(Table.Th, {
         w: options.leftColumnWidth,
-        children: /* @__PURE__ */ jsxDEV31(Text2, {
+        children: /* @__PURE__ */ jsxDEV31(Text3, {
           size: "sm",
           children: label
         }, undefined, false, undefined, this)
@@ -7189,7 +7213,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash13 = __toESM(require_lodash(), 1);
+var import_lodash14 = __toESM(require_lodash(), 1);
 import { Chip as Chip3, Group as Group7 } from "@mantine/core";
 import { IconLink as IconLink2 } from "@tabler/icons-react";
 import { jsxDEV as jsxDEV33 } from "react/jsx-dev-runtime";
@@ -7491,7 +7515,7 @@ import {
 } from "@jsonforms/react";
 import { Box as Box7, Button as Button2, Flex as Flex4, Input as Input3, Paper as Paper6, Stack as Stack6 } from "@mantine/core";
 import { IconPlus, IconTrash } from "@tabler/icons-react";
-var import_lodash14 = __toESM(require_lodash(), 1);
+var import_lodash15 = __toESM(require_lodash(), 1);
 import {
   AlertCategory as AlertCategory3,
   AlertMinimal as AlertMinimal2,
@@ -7555,7 +7579,7 @@ function PlainArrayControl(props) {
                       renderers: renderers ?? [],
                       cells: cells ?? [],
                       onChange: ({ data: newData }) => {
-                        if (import_lodash14.isEqual(data[i], newData.item)) {
+                        if (import_lodash15.isEqual(data[i], newData.item)) {
                           return;
                         }
                         const dataCopy = [...data];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remoraid",
-  "version": "2.33.1",
+  "version": "2.36.2",
   "author": "Konrad Goldammer",
   "repository": {
     "type": "git",