@trops/dash-core 0.1.470 → 0.1.472

package/dist/index.js

@@ -9393,7 +9393,7 @@ hasPropertyDescriptors.hasArrayLengthDefineBug = function hasArrayLengthDefineBu
 var hasPropertyDescriptors_1 = hasPropertyDescriptors;
 
 var keys = objectKeys$2;
-var hasSymbols$4 = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol';
+var hasSymbols$5 = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol';
 
 var toStr$4 = Object.prototype.toString;
 var concat = Array.prototype.concat;
@@ -9426,7 +9426,7 @@ var defineProperty$1 = function (object, name, value, predicate) {
 var defineProperties$1 = function (object, map) {
 	var predicates = arguments.length > 2 ? arguments[2] : {};
 	var props = keys(map);
-	if (hasSymbols$4) {
+	if (hasSymbols$5) {
 		props = concat.call(props, Object.getOwnPropertySymbols(map));
 	}
 	for (var i = 0; i < props.length; i += 1) {
@@ -9492,11 +9492,11 @@ var sign$1 = function sign(number) {
 };
 
 var shams$1;
-var hasRequiredShams$1;
+var hasRequiredShams;
 
-function requireShams$1 () {
-	if (hasRequiredShams$1) return shams$1;
-	hasRequiredShams$1 = 1;
+function requireShams () {
+	if (hasRequiredShams) return shams$1;
+	hasRequiredShams = 1;
 
 	/** @type {import('./shams')} */
 	/* eslint complexity: [2, 18], max-statements: [2, 33] */
@@ -9545,10 +9545,10 @@ function requireShams$1 () {
 }
 
 var origSymbol = typeof Symbol !== 'undefined' && Symbol;
-var hasSymbolSham = requireShams$1();
+var hasSymbolSham = requireShams();
 
 /** @type {import('.')} */
-var hasSymbols$3 = function hasNativeSymbols() {
+var hasSymbols$4 = function hasNativeSymbols() {
 	if (typeof origSymbol !== 'function') { return false; }
 	if (typeof Symbol !== 'function') { return false; }
 	if (typeof origSymbol('foo') !== 'symbol') { return false; }
@@ -9852,7 +9852,7 @@ var ThrowTypeError = $gOPD$1
 	}())
 	: throwTypeError;
 
-var hasSymbols$2 = hasSymbols$3();
+var hasSymbols$3 = hasSymbols$4();
 
 var getProto$2 = getProto$3;
 var $ObjectGPO = requireObject_getPrototypeOf();
@@ -9870,7 +9870,7 @@ var INTRINSICS = {
 	'%AggregateError%': typeof AggregateError === 'undefined' ? undefined$1 : AggregateError,
 	'%Array%': Array,
 	'%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined$1 : ArrayBuffer,
-	'%ArrayIteratorPrototype%': hasSymbols$2 && getProto$2 ? getProto$2([][Symbol.iterator]()) : undefined$1,
+	'%ArrayIteratorPrototype%': hasSymbols$3 && getProto$2 ? getProto$2([][Symbol.iterator]()) : undefined$1,
 	'%AsyncFromSyncIteratorPrototype%': undefined$1,
 	'%AsyncFunction%': needsEval,
 	'%AsyncGenerator%': needsEval,
@@ -9901,10 +9901,10 @@ var INTRINSICS = {
 	'%Int32Array%': typeof Int32Array === 'undefined' ? undefined$1 : Int32Array,
 	'%isFinite%': isFinite,
 	'%isNaN%': isNaN,
-	'%IteratorPrototype%': hasSymbols$2 && getProto$2 ? getProto$2(getProto$2([][Symbol.iterator]())) : undefined$1,
+	'%IteratorPrototype%': hasSymbols$3 && getProto$2 ? getProto$2(getProto$2([][Symbol.iterator]())) : undefined$1,
 	'%JSON%': typeof JSON === 'object' ? JSON : undefined$1,
 	'%Map%': typeof Map === 'undefined' ? undefined$1 : Map,
-	'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$2 || !getProto$2 ? undefined$1 : getProto$2(new Map()[Symbol.iterator]()),
+	'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$3 || !getProto$2 ? undefined$1 : getProto$2(new Map()[Symbol.iterator]()),
 	'%Math%': Math,
 	'%Number%': Number,
 	'%Object%': $Object$2,
@@ -9918,11 +9918,11 @@ var INTRINSICS = {
 	'%Reflect%': typeof Reflect === 'undefined' ? undefined$1 : Reflect,
 	'%RegExp%': RegExp,
 	'%Set%': typeof Set === 'undefined' ? undefined$1 : Set,
-	'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$2 || !getProto$2 ? undefined$1 : getProto$2(new Set()[Symbol.iterator]()),
+	'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$3 || !getProto$2 ? undefined$1 : getProto$2(new Set()[Symbol.iterator]()),
 	'%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined$1 : SharedArrayBuffer,
 	'%String%': String,
-	'%StringIteratorPrototype%': hasSymbols$2 && getProto$2 ? getProto$2(''[Symbol.iterator]()) : undefined$1,
-	'%Symbol%': hasSymbols$2 ? Symbol : undefined$1,
+	'%StringIteratorPrototype%': hasSymbols$3 && getProto$2 ? getProto$2(''[Symbol.iterator]()) : undefined$1,
+	'%Symbol%': hasSymbols$3 ? Symbol : undefined$1,
 	'%SyntaxError%': $SyntaxError$1,
 	'%ThrowTypeError%': ThrowTypeError,
 	'%TypedArray%': TypedArray,
@@ -10275,12 +10275,12 @@ var callBound$i = function callBoundIntrinsic(name, allowMissing) {
 
 // modified from https://github.com/es-shims/es6-shim
 var objectKeys$1 = objectKeys$2;
-var hasSymbols$1 = requireShams$1()();
+var hasSymbols$2 = requireShams()();
 var callBound$h = callBound$i;
 var $Object$1 = esObjectAtoms;
 var $push = callBound$h('Array.prototype.push');
 var $propIsEnumerable = callBound$h('Object.prototype.propertyIsEnumerable');
-var originalGetSymbols = hasSymbols$1 ? $Object$1.getOwnPropertySymbols : null;
+var originalGetSymbols = hasSymbols$2 ? $Object$1.getOwnPropertySymbols : null;
 
 // eslint-disable-next-line no-unused-vars
 var implementation$8 = function assign(target, source1) {
@@ -10294,7 +10294,7 @@ var implementation$8 = function assign(target, source1) {
 
 		// step 3.a.ii:
 		var keys = objectKeys$1(from);
-		var getSymbols = hasSymbols$1 && ($Object$1.getOwnPropertySymbols || originalGetSymbols);
+		var getSymbols = hasSymbols$2 && ($Object$1.getOwnPropertySymbols || originalGetSymbols);
 		if (getSymbols) {
 			var syms = getSymbols(from);
 			for (var j = 0; j < syms.length; ++j) {
@@ -10591,23 +10591,14 @@ var regexp_prototype_flags = flagsBound;
 
 var esGetIterator = {exports: {}};
 
-var shams;
-var hasRequiredShams;
+var hasSymbols$1 = requireShams();
 
-function requireShams () {
-	if (hasRequiredShams) return shams;
-	hasRequiredShams = 1;
-
-	var hasSymbols = requireShams$1();
-
-	/** @type {import('.')} */
-	shams = function hasToStringTagShams() {
-		return hasSymbols() && !!Symbol.toStringTag;
-	};
-	return shams;
-}
+/** @type {import('.')} */
+var shams = function hasToStringTagShams() {
+	return hasSymbols$1() && !!Symbol.toStringTag;
+};
 
-var hasToStringTag$7 = requireShams()();
+var hasToStringTag$7 = shams();
 var callBound$f = callBound$i;
 
 var $toString$7 = callBound$f('Object.prototype.toString');
@@ -11644,7 +11635,7 @@ var tryStringObject = function tryStringObject(value) {
 /** @type {(receiver: ThisParameterType<typeof Object.prototype.toString>, ...args: Parameters<typeof Object.prototype.toString>) => ReturnType<typeof Object.prototype.toString>} */
 var $toString$6 = callBound$c('Object.prototype.toString');
 var strClass = '[object String]';
-var hasToStringTag$6 = requireShams()();
+var hasToStringTag$6 = shams();
 
 /** @type {import('.')} */
 var isString$2 = function isString(value) {
@@ -11760,7 +11751,7 @@ var isSet$2 = exported$1 || function isSet(x) {
 var isArguments$1 = isArguments$2;
 var getStopIterationIterator = stopIterationIterator;
 
-if (hasSymbols$3() || requireShams$1()()) {
+if (hasSymbols$4() || requireShams()()) {
 	var $iterator = Symbol.iterator;
 	// Symbol is available natively or shammed
 	// natively:
@@ -12049,7 +12040,7 @@ var tryDateObject = function tryDateGetDayCall(value) {
 /** @type {(value: unknown) => string} */
 var toStr$2 = callBound$9('Object.prototype.toString');
 var dateClass = '[object Date]';
-var hasToStringTag$5 = requireShams()();
+var hasToStringTag$5 = shams();
 
 /** @type {import('.')} */
 var isDateObject = function isDateObject(value) {
@@ -12060,7 +12051,7 @@ var isDateObject = function isDateObject(value) {
 };
 
 var callBound$8 = callBound$i;
-var hasToStringTag$4 = requireShams()();
+var hasToStringTag$4 = shams();
 var hasOwn = hasown;
 var gOPD$1 = gopd$1;
 
@@ -12165,7 +12156,7 @@ var tryNumberObject = function tryNumberObject(value) {
 };
 var $toString$3 = callBound$6('Object.prototype.toString');
 var numClass = '[object Number]';
-var hasToStringTag$3 = requireShams()();
+var hasToStringTag$3 = shams();
 
 /** @type {import('.')} */
 var isNumberObject = function isNumberObject(value) {
@@ -12192,7 +12183,7 @@ var tryBooleanObject = function booleanBrandCheck(value) {
 	}
 };
 var boolClass = '[object Boolean]';
-var hasToStringTag$2 = requireShams()();
+var hasToStringTag$2 = shams();
 
 /** @type {import('.')} */
 var isBooleanObject = function isBoolean(value) {
@@ -12234,7 +12225,7 @@ function requireSafeRegexTest () {
 
 var callBound$4 = callBound$i;
 var $toString$1 = callBound$4('Object.prototype.toString');
-var hasSymbols = hasSymbols$3();
+var hasSymbols = hasSymbols$4();
 var safeRegexTest = requireSafeRegexTest();
 
 if (hasSymbols) {
@@ -12680,7 +12671,7 @@ var gOPD = gopd$1;
 var getProto = getProto$3;
 
 var $toString = callBound$2('Object.prototype.toString');
-var hasToStringTag = requireShams()();
+var hasToStringTag = shams();
 
 var g = typeof globalThis === 'undefined' ? commonjsGlobal : globalThis;
 var typedArrays = availableTypedArrays();
@@ -52901,11 +52892,12 @@ var EditField = function EditField(_ref7) {
 
 function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var GLOBAL_KEY = "__global__";
 var NotificationsSection = function NotificationsSection(_ref) {
   var _ref$workspaces = _ref.workspaces,
     workspaces = _ref$workspaces === void 0 ? [] : _ref$workspaces;
-  var appContext = React.useContext(AppContext);
-  appContext === null || appContext === void 0 ? void 0 : appContext.dashApi;
+  React.useContext(AppContext);
+
   var _useState = React.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     globalEnabled = _useState2[0],
@@ -52922,6 +52914,22 @@ var NotificationsSection = function NotificationsSection(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     loading = _useState8[0],
     setLoading = _useState8[1];
+  var _useState9 = React.useState(""),
+    _useState0 = _slicedToArray(_useState9, 2),
+    searchQuery = _useState0[0],
+    setSearchQuery = _useState0[1];
+  var _useState1 = React.useState(GLOBAL_KEY),
+    _useState10 = _slicedToArray(_useState1, 2),
+    selectedKey = _useState10[0],
+    setSelectedKey = _useState10[1];
+  var _useState11 = React.useState("all"),
+    _useState12 = _slicedToArray(_useState11, 2),
+    filterDashboard = _useState12[0],
+    setFilterDashboard = _useState12[1];
+  var _useState13 = React.useState("all"),
+    _useState14 = _slicedToArray(_useState13, 2),
+    filterPackage = _useState14[0],
+    setFilterPackage = _useState14[1];
 
   // Load preferences on mount
   React.useEffect(function () {
@@ -52938,38 +52946,79 @@ var NotificationsSection = function NotificationsSection(_ref) {
     });
   }, []);
 
-  // Collect all widget instances with notifications from workspaces.
-  // Route through `ComponentManager.resolve` so a legacy layout
-  // referencing a bare component name still finds its registered
-  // scoped form (post-v0.1.432). Direct `componentMap[item.component]`
-  // returns undefined for bare names after the migration.
-  var widgetInstances = [];
-  workspaces.forEach(function (ws) {
-    var items = flattenLayout(ws.layout);
-    items.forEach(function (item) {
-      var _config$notifications;
-      var config = ComponentManager.resolve(item.component, item);
-      if ((config === null || config === void 0 || (_config$notifications = config.notifications) === null || _config$notifications === void 0 ? void 0 : _config$notifications.length) > 0) {
-        var _item$userPrefs;
-        widgetInstances.push({
-          uuid: item.uuid || item.uuidString,
-          componentName: item.component,
-          title: ((_item$userPrefs = item.userPrefs) === null || _item$userPrefs === void 0 ? void 0 : _item$userPrefs.title) || config.displayName || item.component,
-          workspaceName: ws.name || ws.id,
-          notifications: config.notifications,
-          "package": config["package"]
-        });
-      }
+  // Collect every widget instance with notifications, alphabetized
+  // by display title. Route through `ComponentManager.resolve` so a
+  // legacy layout referencing a bare component name still finds the
+  // registered scoped form.
+  var widgetInstances = React.useMemo(function () {
+    var out = [];
+    workspaces.forEach(function (ws) {
+      var items = flattenLayout(ws.layout);
+      items.forEach(function (item) {
+        var _config$notifications;
+        var config = ComponentManager.resolve(item.component, item);
+        if ((config === null || config === void 0 || (_config$notifications = config.notifications) === null || _config$notifications === void 0 ? void 0 : _config$notifications.length) > 0) {
+          var _item$userPrefs;
+          out.push({
+            uuid: item.uuid || item.uuidString,
+            componentName: item.component,
+            title: ((_item$userPrefs = item.userPrefs) === null || _item$userPrefs === void 0 ? void 0 : _item$userPrefs.title) || config.displayName || item.component,
+            workspaceName: ws.name || ws.id,
+            notifications: config.notifications,
+            "package": config["package"] || "Other"
+          });
+        }
+      });
     });
-  });
+    return out.sort(function (a, b) {
+      return String(a.title).localeCompare(String(b.title), undefined, {
+        sensitivity: "base"
+      });
+    });
+  }, [workspaces]);
 
-  // Group by package
-  var grouped = {};
-  widgetInstances.forEach(function (wi) {
-    var pkg = wi["package"] || "Other";
-    if (!grouped[pkg]) grouped[pkg] = [];
-    grouped[pkg].push(wi);
-  });
+  // Derive dropdown option lists. Both sorted alphabetically so the
+  // dropdowns don't shuffle as the underlying list changes order.
+  var dashboardOptions = React.useMemo(function () {
+    var set = new Set();
+    widgetInstances.forEach(function (wi) {
+      if (wi.workspaceName) set.add(wi.workspaceName);
+    });
+    return _toConsumableArray(set).sort(function (a, b) {
+      return String(a).localeCompare(String(b), undefined, {
+        sensitivity: "base"
+      });
+    });
+  }, [widgetInstances]);
+  var packageOptions = React.useMemo(function () {
+    var set = new Set();
+    widgetInstances.forEach(function (wi) {
+      if (wi["package"]) set.add(wi["package"]);
+    });
+    return _toConsumableArray(set).sort(function (a, b) {
+      return String(a).localeCompare(String(b), undefined, {
+        sensitivity: "base"
+      });
+    });
+  }, [widgetInstances]);
+  var hasActiveFilters = searchQuery.trim() !== "" || filterDashboard !== "all" || filterPackage !== "all";
+  var clearFilters = function clearFilters() {
+    setSearchQuery("");
+    setFilterDashboard("all");
+    setFilterPackage("all");
+  };
+
+  // Filter by search + dashboard + package (composed AND).
+  var filteredInstances = React.useMemo(function () {
+    var q = searchQuery.trim().toLowerCase();
+    return widgetInstances.filter(function (wi) {
+      if (filterDashboard !== "all" && wi.workspaceName !== filterDashboard) return false;
+      if (filterPackage !== "all" && wi["package"] !== filterPackage) return false;
+      if (!q) return true;
+      var hay = [wi.title, wi["package"], wi.workspaceName, wi.componentName].filter(Boolean).join(" ").toLowerCase();
+      return hay.includes(q);
+    });
+  }, [widgetInstances, searchQuery, filterDashboard, filterPackage]);
   function handleGlobalToggle(value) {
     var _window$mainApi2;
     setGlobalEnabled(value);
@@ -53003,16 +53052,126 @@ var NotificationsSection = function NotificationsSection(_ref) {
       children: "Loading notification preferences..."
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "flex-1 overflow-y-auto p-6",
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col space-y-6",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+
+  // ── Left list ──────────────────────────────────────────────────────
+  var listContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col h-full",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-2 px-3 py-2 flex-shrink-0 border-b border-white/10",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: "Search widgets...",
+        inputClassName: "py-1.5 text-xs"
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "grid grid-cols-2 gap-1.5",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("select", {
+          value: filterDashboard,
+          onChange: function onChange(e) {
+            return setFilterDashboard(e.target.value);
+          },
+          className: "w-full px-2 py-1 text-xs bg-gray-800/50 border border-white/10 rounded text-gray-200 focus:outline-none",
+          children: [/*#__PURE__*/jsxRuntime.jsx("option", {
+            value: "all",
+            children: "All Dashboards"
+          }), dashboardOptions.map(function (d) {
+            return /*#__PURE__*/jsxRuntime.jsx("option", {
+              value: d,
+              children: d
+            }, d);
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("select", {
+          value: filterPackage,
+          onChange: function onChange(e) {
+            return setFilterPackage(e.target.value);
+          },
+          className: "w-full px-2 py-1 text-xs bg-gray-800/50 border border-white/10 rounded text-gray-200 focus:outline-none",
+          children: [/*#__PURE__*/jsxRuntime.jsx("option", {
+            value: "all",
+            children: "All Packages"
+          }), packageOptions.map(function (p) {
+            return /*#__PURE__*/jsxRuntime.jsx("option", {
+              value: p,
+              children: p
+            }, p);
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between text-[10px] px-0.5",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "opacity-50",
+          children: hasActiveFilters ? "".concat(filteredInstances.length, " of ").concat(widgetInstances.length, " widgets") : "".concat(widgetInstances.length, " widget").concat(widgetInstances.length === 1 ? "" : "s")
+        }), hasActiveFilters && /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: clearFilters,
+          className: "opacity-60 hover:opacity-100 transition-opacity text-gray-300 hover:bg-white/10 px-1.5 py-0.5 rounded",
+          children: "Clear"
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Sidebar.Content, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Sidebar.Item, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: globalEnabled ? "bell" : "bell-slash",
+          className: "h-3.5 w-3.5"
+        }),
+        active: selectedKey === GLOBAL_KEY,
+        onClick: function onClick() {
+          return setSelectedKey(GLOBAL_KEY);
+        },
+        children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "flex flex-col",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "font-medium",
+            children: "Global"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-[10px] opacity-40",
+            children: "Master switch + Do Not Disturb"
+          })]
+        })
+      }), filteredInstances.length === 0 && widgetInstances.length === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "px-3 py-2 text-xs opacity-50",
+        children: "No widgets with notification support found. Add widgets that declare notifications to see per-type controls here."
+      }), filteredInstances.length === 0 && widgetInstances.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "px-3 py-2 text-xs opacity-50",
+        children: ["No widgets match \"", searchQuery, "\"."]
+      }), filteredInstances.map(function (wi) {
+        var isActive = selectedKey === wi.uuid;
+        return /*#__PURE__*/jsxRuntime.jsx(DashReact.Sidebar.Item, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "bell",
+            className: "h-3.5 w-3.5"
+          }),
+          active: isActive,
+          onClick: function onClick() {
+            return setSelectedKey(wi.uuid);
+          },
+          className: isActive ? "bg-white/10 opacity-100" : "",
+          children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+            className: "flex flex-col",
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "font-medium truncate",
+              children: wi.title
+            }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-[10px] opacity-40 truncate",
+              children: [wi["package"], wi.workspaceName ? " \xB7 ".concat(wi.workspaceName) : ""]
+            })]
+          })
+        }, wi.uuid);
+      })]
+    })]
+  });
+
+  // ── Right detail ───────────────────────────────────────────────────
+  var detailContent;
+  if (selectedKey === GLOBAL_KEY) {
+    detailContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col p-6 space-y-6",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
+        title: "Global",
+        padding: false
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col space-y-3",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
-          title: "Global",
-          padding: false
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex flex-row items-center justify-between py-2",
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex flex-col",
@@ -53043,49 +53202,59 @@ var NotificationsSection = function NotificationsSection(_ref) {
             onChange: handleDndToggle
           })]
         })]
-      }), Object.keys(grouped).length > 0 ? Object.entries(grouped).map(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          pkg = _ref3[0],
-          widgets = _ref3[1];
-        return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col space-y-3",
+      })]
+    });
+  } else {
+    var wi = widgetInstances.find(function (w) {
+      return w.uuid === selectedKey;
+    });
+    if (!wi) {
+      detailContent = /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1 p-6 text-sm opacity-50",
+        children: "Select a widget on the left to configure its notifications."
+      });
+    } else {
+      detailContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col p-6 space-y-4",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col space-y-1",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
-            title: pkg,
+            title: wi.title,
             padding: false
-          }), widgets.map(function (wi) {
+          }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+            className: "text-xs opacity-50",
+            children: [wi["package"], wi.workspaceName ? " \xB7 ".concat(wi.workspaceName) : ""]
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex flex-col space-y-3",
+          children: wi.notifications.map(function (notif) {
             return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex flex-col space-y-2 pl-2 border-l-2 border-white/10",
-              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-sm font-medium opacity-80",
-                children: wi.title
-              }), wi.notifications.map(function (notif) {
-                return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex flex-row items-center justify-between py-1 pl-2",
-                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "flex flex-col",
-                    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "text-sm",
-                      children: notif.displayName
-                    }), notif.description && /*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "text-xs opacity-50",
-                      children: notif.description
-                    })]
-                  }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Switch, {
-                    checked: getTypeEnabled(wi.uuid, notif.key, notif.defaultEnabled),
-                    onChange: function onChange(value) {
-                      return handleTypeToggle(wi.uuid, notif.key, value);
-                    }
-                  })]
-                }, notif.key);
+              className: "flex flex-row items-center justify-between py-1",
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex flex-col",
+                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "text-sm",
+                  children: notif.displayName
+                }), notif.description && /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "text-xs opacity-50",
+                  children: notif.description
+                })]
+              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Switch, {
+                checked: getTypeEnabled(wi.uuid, notif.key, notif.defaultEnabled),
+                onChange: function onChange(value) {
+                  return handleTypeToggle(wi.uuid, notif.key, value);
+                }
               })]
-            }, wi.uuid);
-          })]
-        }, pkg);
-      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-sm opacity-50",
-        children: "No widgets with notification support found. Add widgets that declare notifications to see per-type controls here."
-      })]
-    })
+            }, notif.key);
+          })
+        })]
+      });
+    }
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(SectionLayout, {
+    listContent: listContent,
+    detailContent: detailContent,
+    emptyDetailMessage: "Select a widget to configure notifications"
   });
 };