@trops/dash-core 0.1.662 → 0.1.663

package/dist/index.js

@@ -61206,6 +61206,68 @@ function renderFormItem(displayName, key, instructions, required, value, _onChan
   }, "config-item-".concat(key));
 }
 
+function useConfigTokens() {
+  var _ref = React.useContext(DashReact.ThemeContext) || {},
+    _ref$currentTheme = _ref.currentTheme,
+    currentTheme = _ref$currentTheme === void 0 ? {} : _ref$currentTheme;
+  return {
+    muted: currentTheme["text-neutral-medium"] || "text-gray-400",
+    strong: currentTheme["text-neutral-light"] || "text-gray-200",
+    hairline: currentTheme["border-neutral-dark"] || "border-gray-700",
+    selectedBg: currentTheme["bg-neutral-very-dark"] || "bg-gray-800",
+    selectedBorder: currentTheme["border-primary-dark"] || "border-gray-600",
+    fieldBg: currentTheme["bg-neutral-very-dark"] || "bg-gray-900"
+  };
+}
+
+/**
+ * A row in one of the modal's left-hand lists (provider types, widgets,
+ * event handlers) — styled like the Bots view's team list.
+ *
+ * @param {{ title: React.ReactNode, subtitle?: React.ReactNode,
+ *           meta?: React.ReactNode, badge?: React.ReactNode,
+ *           active?: boolean, mono?: boolean, onClick: () => void }} props
+ *   `subtitle` is a registry id (monospace); `meta` a muted count line.
+ */
+var ConfigListRow = function ConfigListRow(_ref2) {
+  var title = _ref2.title,
+    _ref2$subtitle = _ref2.subtitle,
+    subtitle = _ref2$subtitle === void 0 ? null : _ref2$subtitle,
+    _ref2$meta = _ref2.meta,
+    meta = _ref2$meta === void 0 ? null : _ref2$meta,
+    _ref2$badge = _ref2.badge,
+    badge = _ref2$badge === void 0 ? null : _ref2$badge,
+    _ref2$active = _ref2.active,
+    active = _ref2$active === void 0 ? false : _ref2$active,
+    _ref2$mono = _ref2.mono,
+    mono = _ref2$mono === void 0 ? false : _ref2$mono,
+    onClick = _ref2.onClick;
+  var _useConfigTokens = useConfigTokens(),
+    muted = _useConfigTokens.muted,
+    selectedBg = _useConfigTokens.selectedBg,
+    selectedBorder = _useConfigTokens.selectedBorder;
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    type: "button",
+    onClick: onClick,
+    "aria-current": active ? "true" : undefined,
+    className: "w-full text-left rounded-lg px-3 py-2 border ".concat(active ? "".concat(selectedBg, " ").concat(selectedBorder) : "border-transparent"),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row items-center justify-between gap-2 min-w-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm font-medium truncate ".concat(mono ? "font-mono" : ""),
+        children: title
+      }), badge]
+    }), subtitle ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "text-xs font-mono truncate mt-0.5 ".concat(muted),
+      title: typeof subtitle === "string" ? subtitle : undefined,
+      children: subtitle
+    }) : null, meta ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "text-xs mt-0.5 ".concat(muted),
+      children: meta
+    }) : null]
+  });
+};
+
 function ownKeys$g(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$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper$b(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$b(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
@@ -61241,6 +61303,9 @@ var WidgetsTab = function WidgetsTab(_ref) {
     stagedPrefs = _ref.stagedPrefs,
     stagePrefField = _ref.stagePrefField,
     stagePrefFieldForAll = _ref.stagePrefFieldForAll;
+  var _useConfigTokens = useConfigTokens(),
+    muted = _useConfigTokens.muted,
+    hairline = _useConfigTokens.hairline;
   // Flatten every widget on the workspace, preserving which layout
   // section each came from (Main / Page N / Sidebar) so the left
   // column can group them cleanly. forEachWidget already dedupes.
@@ -61361,67 +61426,55 @@ var WidgetsTab = function WidgetsTab(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex h-full min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "w-64 border-r border-white/10 overflow-y-auto flex-shrink-0",
-      children: [sharedFields.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("button", {
-        onClick: function onClick() {
-          return setSelectedId(ALL_WIDGETS_ID);
-        },
-        className: "w-full text-left px-4 py-3 border-b border-white/10 transition-colors ".concat(isAllMode ? "bg-indigo-600/20 text-indigo-200" : "hover:bg-white/5 text-gray-300"),
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2",
+      className: "w-64 border-r overflow-y-auto flex-shrink-0 p-3 flex flex-col gap-1 ".concat(hairline),
+      children: [sharedFields.length > 0 && /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+        title: /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "flex flex-row items-center gap-2",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "layer-group",
             className: "h-3.5 w-3.5"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "font-semibold text-sm",
-            children: "All Widgets"
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "text-[11px] text-gray-500 mt-0.5",
-          children: [sharedFields.length, " shared field", sharedFields.length === 1 ? "" : "s", " \xB7 bulk edit"]
-        })]
+          }), "All Widgets"]
+        }),
+        meta: "".concat(sharedFields.length, " shared field").concat(sharedFields.length === 1 ? "" : "s", " \xB7 bulk edit"),
+        active: isAllMode,
+        onClick: function onClick() {
+          return setSelectedId(ALL_WIDGETS_ID);
+        }
       }), groupedWidgets.map(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
           section = _ref3[0],
           sectionWidgets = _ref3[1];
         return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "px-4 pt-3 pb-1 text-[10px] uppercase tracking-wider text-gray-600 font-semibold",
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
+            className: "px-3 pt-3 pb-1",
             children: section
           }), sectionWidgets.map(function (w) {
             var fieldCount = Object.keys(w.userConfig).length;
             var stagedForWidget = stagedPrefs !== null && stagedPrefs !== void 0 && stagedPrefs[w.id] ? Object.keys(stagedPrefs[w.id]).length : 0;
-            var isSel = selectedId === w.id;
-            return /*#__PURE__*/jsxRuntime.jsxs("button", {
+            return /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+              title: w.displayName,
+              subtitle: w.widgetRef || null,
+              meta: fieldCount === 0 ? "No configurable fields" : "".concat(fieldCount, " field").concat(fieldCount === 1 ? "" : "s"),
+              badge: stagedForWidget > 0 ? /*#__PURE__*/jsxRuntime.jsxs("span", {
+                className: "flex flex-row items-center gap-1.5 text-xs text-amber-400 flex-shrink-0",
+                title: "Unsaved changes",
+                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+                }), stagedForWidget]
+              }) : null,
+              active: selectedId === w.id,
               onClick: function onClick() {
                 return setSelectedId(w.id);
-              },
-              className: "w-full text-left px-4 py-2 transition-colors ".concat(isSel ? "bg-indigo-600/20 text-indigo-200" : "hover:bg-white/5 text-gray-300"),
-              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex items-center justify-between",
-                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "text-sm truncate",
-                  children: w.displayName
-                }), stagedForWidget > 0 && /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "text-[10px] bg-amber-500/20 text-amber-300 px-1.5 rounded",
-                  children: stagedForWidget
-                })]
-              }), w.widgetRef && /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "text-[10px] text-gray-500 font-mono truncate mt-0.5",
-                title: w.widgetRef,
-                children: w.widgetRef
-              }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "text-[10px] text-gray-600 mt-0.5",
-                children: fieldCount === 0 ? "No configurable fields" : "".concat(fieldCount, " field").concat(fieldCount === 1 ? "" : "s")
-              })]
+              }
             }, w.id);
           })]
         }, section);
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 overflow-y-auto p-4 min-w-0",
+      className: "flex-1 overflow-y-auto p-5 min-w-0",
       children: [!selectedId && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-sm text-gray-500 italic",
+        className: "text-sm italic ".concat(muted),
         children: "Select a widget from the list."
       }), isAllMode && /*#__PURE__*/jsxRuntime.jsx(BulkEditPane, {
         sharedFields: sharedFields,
@@ -61441,19 +61494,22 @@ function SingleWidgetPane(_ref4) {
   var widget = _ref4.widget,
     effectivePrefs = _ref4.effectivePrefs,
     onFieldChange = _ref4.onFieldChange;
+  var _useConfigTokens2 = useConfigTokens(),
+    muted = _useConfigTokens2.muted,
+    strong = _useConfigTokens2.strong;
   var hasFields = Object.keys(widget.userConfig).length > 0;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "mb-3",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-gray-200 font-semibold",
+        className: "font-semibold ".concat(strong),
         children: widget.displayName
       }), widget.widgetRef && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-xs text-gray-500 font-mono truncate mt-0.5",
+        className: "text-xs font-mono truncate mt-0.5 ".concat(muted),
         title: widget.widgetRef,
         children: widget.widgetRef
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-xs text-gray-600 mt-0.5",
+        className: "text-xs mt-0.5 ".concat(muted),
         children: widget.section
       })]
     }), hasFields ? /*#__PURE__*/jsxRuntime.jsx(PanelEditForm, {
@@ -61461,7 +61517,7 @@ function SingleWidgetPane(_ref4) {
       userPrefs: effectivePrefs,
       onFieldChange: onFieldChange
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "text-sm text-gray-500 italic",
+      className: "text-sm italic ".concat(muted),
       children: "This widget has no configurable fields. It may be event-driven \u2014 pair it with a widget that publishes the events it listens for."
     })]
   });
@@ -61470,14 +61526,17 @@ function BulkEditPane(_ref5) {
   var sharedFields = _ref5.sharedFields,
     stagedPrefs = _ref5.stagedPrefs,
     onApplyAll = _ref5.onApplyAll;
+  var _useConfigTokens3 = useConfigTokens(),
+    muted = _useConfigTokens3.muted,
+    strong = _useConfigTokens3.strong;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "mb-3",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-gray-200 font-semibold",
+        className: "font-semibold ".concat(strong),
         children: "All Widgets"
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-xs text-gray-500",
+        className: "text-xs ".concat(muted),
         children: "Fields declared by 2+ widgets on this dashboard. Apply once to update every matching widget."
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -61489,7 +61548,7 @@ function BulkEditPane(_ref5) {
           onApplyAll: onApplyAll
         }, "".concat(field.key, "::").concat(field.schema.type));
       }), sharedFields.length === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-sm text-gray-500 italic",
+        className: "text-sm italic ".concat(muted),
         children: "No shared fields across widgets on this dashboard."
       })]
     })]
@@ -61516,32 +61575,38 @@ function SharedFieldRow(_ref6) {
     if (allSame) setDraft(distinctValues[0]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allSame, distinctValues[0]]);
+  var _useConfigTokens4 = useConfigTokens(),
+    muted = _useConfigTokens4.muted,
+    strong = _useConfigTokens4.strong,
+    hairline = _useConfigTokens4.hairline,
+    fieldBg = _useConfigTokens4.fieldBg;
+  var fieldClass = "w-full px-2 py-1.5 rounded-lg border text-sm ".concat(fieldBg, " ").concat(hairline, " ").concat(strong);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "border border-white/10 rounded p-3",
+    className: "rounded-lg border p-3 ".concat(hairline),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-start justify-between gap-3 mb-2",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex-1 min-w-0",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-sm text-gray-200 font-semibold",
+          className: "text-sm font-semibold ".concat(strong),
           children: field.schema.displayName || field.key
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "text-[11px] text-gray-500",
+          className: "text-xs ".concat(muted),
           children: ["Applies to ", field.widgets.length, " widgets", allSame ? "" : " \xB7 ".concat(distinctValues.length, " distinct values in use")]
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
+        title: "Apply to all",
+        size: "sm",
         onClick: function onClick() {
           return onApplyAll(field.widgets, field.key, draft);
-        },
-        className: "px-3 py-1 text-xs bg-indigo-600 hover:bg-indigo-500 text-white rounded transition-colors",
-        children: "Apply to all"
+        }
       })]
     }), field.schema.type === "select" ? /*#__PURE__*/jsxRuntime.jsx("select", {
       value: draft,
       onChange: function onChange(e) {
         return setDraft(e.target.value);
       },
-      className: "w-full px-2 py-1.5 bg-gray-900 border border-white/10 rounded text-sm text-gray-200",
+      className: fieldClass,
       children: (field.schema.options || []).map(function (opt) {
         return /*#__PURE__*/jsxRuntime.jsx("option", {
           value: opt.value,
@@ -61555,7 +61620,7 @@ function SharedFieldRow(_ref6) {
         return setDraft(e.target.value);
       },
       placeholder: allSame ? "" : "(multiple values — set one for all)",
-      className: "w-full px-2 py-1.5 bg-gray-900 border border-white/10 rounded text-sm text-gray-200"
+      className: fieldClass
     })]
   });
 }
@@ -62814,30 +62879,88 @@ function _unsupportedIterableToArray$9(r, a) { if (r) { if ("string" == typeof r
 function _arrayLikeToArray$9(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys$e(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$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DashboardConfigModal = function DashboardConfigModal(_ref) {
-  var isOpen = _ref.isOpen,
-    setIsOpen = _ref.setIsOpen,
-    workspace = _ref.workspace;
-    _ref.workspaces;
-    var appProviders = _ref.appProviders,
-    getWidgetRequirements = _ref.getWidgetRequirements,
-    _ref$getWidgetConfig = _ref.getWidgetConfig,
-    getWidgetConfig = _ref$getWidgetConfig === void 0 ? null : _ref$getWidgetConfig,
-    onSaveBindings = _ref.onSaveBindings,
-    onSaveListeners = _ref.onSaveListeners,
-    _ref$onSaveUserPrefs = _ref.onSaveUserPrefs,
-    onSaveUserPrefs = _ref$onSaveUserPrefs === void 0 ? null : _ref$onSaveUserPrefs,
-    _ref$onSkip = _ref.onSkip,
-    onSkip = _ref$onSkip === void 0 ? null : _ref$onSkip,
-    _ref$initialTab = _ref.initialTab,
-    initialTab = _ref$initialTab === void 0 ? "providers" : _ref$initialTab,
-    _ref$onOpenBotsView = _ref.onOpenBotsView,
-    onOpenBotsView = _ref$onOpenBotsView === void 0 ? null : _ref$onOpenBotsView;
+var ConfigTab = function ConfigTab(_ref) {
+  var active = _ref.active,
+    onClick = _ref.onClick,
+    children = _ref.children;
+  var _useConfigTokens = useConfigTokens(),
+    muted = _useConfigTokens.muted;
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: "button",
+    role: "tab",
+    "aria-selected": active,
+    onClick: onClick,
+    className: "py-2.5 text-sm font-medium -mb-px border-b-2 ".concat(active ? "border-indigo-400" : "border-transparent ".concat(muted)),
+    children: children
+  });
+};
+
+/**
+ * DashboardConfigModal
+ *
+ * Workspace-scoped wiring panel. Lets a user assign providers to every
+ * widget in the current workspace from one place instead of opening each
+ * widget's settings individually. v1 ships the Providers tab; Listeners
+ * tab lands in a follow-up PR (data model needs more exploration).
+ *
+ * Auto-opens on dashboard install when any required provider is still
+ * unresolved after applying app-wide defaults. Also openable manually
+ * via the dashboard toolbar's config button.
+ *
+ * @param {boolean} isOpen
+ * @param {(open: boolean) => void} setIsOpen
+ * @param {object}   workspace          Current workspace (layout/pages/sidebarLayout/selectedProviders).
+ * @param {object|Array} appProviders   Either a map keyed by provider name, or an array. Each entry has
+ *                                      at least { name?, type, providerClass, isDefaultForType }.
+ * @param {(componentName: string) => Array} getWidgetRequirements
+ *                                      Called per widget instance. Should return the `providers: [...]`
+ *                                      array from the component's .dash.js. Usually backed by
+ *                                      ComponentManager.componentMap().
+ * @param {(componentName: string) => object | null} getWidgetConfig
+ *                                      Called per widget instance. Returns the full ComponentManager
+ *                                      entry (events, eventHandlers, displayName, …). Used by the
+ *                                      Listeners tab to discover what each widget emits/handles.
+ * @param {(changes: Array<{widgetId, providerType, providerName}>) => void} onSaveBindings
+ *                                      Called with the staged provider changes on Save. The parent persists
+ *                                      by forwarding to its existing `handleProviderSelect` /
+ *                                      `saveWorkspace` plumbing.
+ * @param {(changes: {adds: Array, removes: Array}) => void} onSaveListeners
+ *                                      Called with the staged listener changes on Save. Each entry is
+ *                                      `{ receiverItemId, handlerName, sourceComponent, sourceItemId, eventName }`.
+ *                                      Parent uses `applyWiringChanges` + saveWorkspace.
+ * @param {(changes: Array<{widgetId, key, value}>) => void} onSaveUserPrefs
+ *                                      Called with the staged widget userPrefs changes on Save. Parent
+ *                                      applies them to workspace + persists via saveWorkspace. Enables
+ *                                      bulk-edit of fields shared across widgets (e.g. basePath).
+ * @param {"providers"|"listeners"|"widgets"} initialTab  Which tab to focus when the modal opens.
+ */
+var DashboardConfigModal = function DashboardConfigModal(_ref2) {
+  var isOpen = _ref2.isOpen,
+    setIsOpen = _ref2.setIsOpen,
+    workspace = _ref2.workspace;
+    _ref2.workspaces;
+    var appProviders = _ref2.appProviders,
+    getWidgetRequirements = _ref2.getWidgetRequirements,
+    _ref2$getWidgetConfig = _ref2.getWidgetConfig,
+    getWidgetConfig = _ref2$getWidgetConfig === void 0 ? null : _ref2$getWidgetConfig,
+    onSaveBindings = _ref2.onSaveBindings,
+    onSaveListeners = _ref2.onSaveListeners,
+    _ref2$onSaveUserPrefs = _ref2.onSaveUserPrefs,
+    onSaveUserPrefs = _ref2$onSaveUserPrefs === void 0 ? null : _ref2$onSaveUserPrefs,
+    _ref2$onSkip = _ref2.onSkip,
+    onSkip = _ref2$onSkip === void 0 ? null : _ref2$onSkip,
+    _ref2$initialTab = _ref2.initialTab,
+    initialTab = _ref2$initialTab === void 0 ? "providers" : _ref2$initialTab,
+    _ref2$onOpenBotsView = _ref2.onOpenBotsView,
+    onOpenBotsView = _ref2$onOpenBotsView === void 0 ? null : _ref2$onOpenBotsView;
   var _useContext = React.useContext(DashReact.ThemeContext),
     currentTheme = _useContext.currentTheme;
   var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
     grow: false
   });
+  var _useConfigTokens2 = useConfigTokens(),
+    muted = _useConfigTokens2.muted,
+    hairline = _useConfigTokens2.hairline;
 
   // Active tab. Defaults to whatever the parent requested via
   // `initialTab`. Resets on each open via the modal's mount cycle.
@@ -63046,10 +63169,10 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
     }
     return Array.from(byPackage.values()).map(function (e) {
       return _objectSpread$e(_objectSpread$e({}, e), {}, {
-        components: Array.from(e.components.entries()).map(function (_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 2),
-            component = _ref3[0],
-            count = _ref3[1];
+        components: Array.from(e.components.entries()).map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            component = _ref4[0],
+            count = _ref4[1];
           return {
             component: component,
             count: count
@@ -63370,80 +63493,84 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col h-full w-full rounded-lg overflow-clip border ".concat(panelStyles.backgroundColor || "", " ").concat(panelStyles.borderColor || "", " ").concat(panelStyles.textColor || ""),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-shrink-0 flex flex-row items-center justify-between p-4",
+        className: "flex-shrink-0 flex flex-row items-start justify-between px-5 pt-4",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "sliders",
-            className: "h-4 w-4 opacity-70"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-lg font-semibold",
-            children: "Dashboard Config"
-          }), unresolvedCount > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag, {
-            text: "".concat(unresolvedCount, " unresolved"),
-            className: "bg-amber-900/40 text-amber-200"
-          })]
+          className: "flex flex-col gap-0.5 min-w-0",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-row items-center gap-3",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: "sliders",
+              className: "h-4 w-4 opacity-70"
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-lg font-semibold",
+              children: "Dashboard Config"
+            }), unresolvedCount > 0 && /*#__PURE__*/jsxRuntime.jsxs("span", {
+              "data-testid": "config-unresolved",
+              className: "flex flex-row items-center gap-1.5 text-sm text-amber-400",
+              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+              }), unresolvedCount, " unresolved"]
+            })]
+          }), workspace !== null && workspace !== void 0 && workspace.name ? /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm truncate ".concat(muted),
+            children: workspace.name
+          }) : null]
         }), /*#__PURE__*/jsxRuntime.jsx("button", {
           type: "button",
           onClick: handleCancel,
+          "aria-label": "Close",
           className: "opacity-50 hover:opacity-100 transition-opacity cursor-pointer",
           children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "xmark",
             className: "h-5 w-5"
           })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-shrink-0 flex flex-row items-center gap-2 px-4 pt-3",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
-          type: "button",
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        role: "tablist",
+        className: "flex-shrink-0 flex flex-row gap-6 px-5 mt-3 border-b ".concat(hairline),
+        children: [/*#__PURE__*/jsxRuntime.jsxs(ConfigTab, {
+          active: activeTab === "providers",
           onClick: function onClick() {
             return setActiveTab("providers");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "providers" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: ["Providers", unresolvedCount > 0 && /*#__PURE__*/jsxRuntime.jsx("span", {
             className: "ml-2 inline-block h-1.5 w-1.5 rounded-full bg-amber-400 align-middle"
           })]
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "listeners",
           onClick: function onClick() {
             return setActiveTab("listeners");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "listeners" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Listeners"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "notifications",
           onClick: function onClick() {
             return setActiveTab("notifications");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "notifications" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Notifications"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "widgets",
           onClick: function onClick() {
             return setActiveTab("widgets");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "widgets" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Widgets"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "permissions",
           onClick: function onClick() {
             return setActiveTab("permissions");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "permissions" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Permissions"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "bots",
           onClick: function onClick() {
             return setActiveTab("bots");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "bots" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Bots"
-        }), /*#__PURE__*/jsxRuntime.jsxs("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsxs(ConfigTab, {
+          active: activeTab === "dependencies",
           onClick: function onClick() {
             return setActiveTab("dependencies");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "dependencies" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: ["Dependencies", dependencyCount > 0 && /*#__PURE__*/jsxRuntime.jsxs(DashReact.Caption2, {
             className: "ml-2",
             children: ["(", dependencyCount, ")"]
@@ -63451,7 +63578,7 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
             className: "ml-1 inline-block h-1.5 w-1.5 rounded-full bg-amber-400 align-middle"
           })]
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex-1 min-h-0 ".concat(activeTab === "widgets" ? "" : "p-5"),
         children: [activeTab === "listeners" && /*#__PURE__*/jsxRuntime.jsx(ListenersTab, {
           emitters: emitters,
@@ -63511,8 +63638,8 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
  * write fails the user can re-toggle. No staging — the bulk modal
  * doesn't gate the user behind a Save button for boolean prefs.
  */
-function NotificationsTab(_ref4) {
-  var workspace = _ref4.workspace;
+function NotificationsTab(_ref5) {
+  var workspace = _ref5.workspace;
   var _useState9 = React.useState(""),
     _useState0 = _slicedToArray(_useState9, 2),
     searchQuery = _useState0[0],
@@ -63754,12 +63881,16 @@ function NotificationsTab(_ref4) {
  * dot per-type when any widget of that type is unresolved). Column 2
  * shows the selected type's bulk dropdown + per-widget dropdowns.
  */
-function ProvidersTab(_ref5) {
+function ProvidersTab(_ref6) {
   var _typeEntries$, _selectedRows$;
-  var grouped = _ref5.grouped,
-    providersByType = _ref5.providersByType,
-    onBulk = _ref5.onBulk,
-    onPerWidget = _ref5.onPerWidget;
+  var grouped = _ref6.grouped,
+    providersByType = _ref6.providersByType,
+    onBulk = _ref6.onBulk,
+    onPerWidget = _ref6.onPerWidget;
+  var _useConfigTokens3 = useConfigTokens(),
+    muted = _useConfigTokens3.muted,
+    hairline = _useConfigTokens3.hairline,
+    fieldBg = _useConfigTokens3.fieldBg;
   var typeEntries = React.useMemo(function () {
     return Array.from(grouped.entries());
   }, [grouped]);
@@ -63790,73 +63921,66 @@ function ProvidersTab(_ref5) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-row gap-3 h-full min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "w-56 flex-shrink-0 overflow-hidden flex flex-col border-r border-white/10",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-3 py-2 text-xs font-semibold opacity-50 uppercase tracking-wider",
+      className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
+        className: "px-3 mb-2",
         children: "Provider Types"
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "overflow-y-auto flex-1",
-        children: typeEntries.map(function (_ref6) {
-          var _ref7 = _slicedToArray(_ref6, 2),
-            providerType = _ref7[0],
-            rows = _ref7[1];
-          var isActive = selectedType === providerType;
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "overflow-y-auto flex-1 flex flex-col gap-1",
+        children: typeEntries.map(function (_ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2),
+            providerType = _ref8[0],
+            rows = _ref8[1];
           var unresolvedHere = rows.filter(function (r) {
             return r.required && !r.resolvedProviderName;
           }).length;
-          return /*#__PURE__*/jsxRuntime.jsxs("button", {
-            type: "button",
+          return /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+            title: providerType,
+            active: selectedType === providerType,
             onClick: function onClick() {
               return setSelectedType(providerType);
             },
-            className: "w-full text-left px-3 py-2 border-l-2 ".concat(isActive ? "bg-indigo-900/30 border-indigo-400" : "border-transparent hover:bg-white/5"),
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex items-center gap-2",
+            meta: "".concat(rows.length, " widget").concat(rows.length === 1 ? "" : "s"),
+            badge: unresolvedHere > 0 ? /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "flex flex-row items-center gap-1.5 text-xs text-amber-400 flex-shrink-0",
               children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-sm font-medium truncate",
-                children: providerType
-              }), unresolvedHere > 0 && /*#__PURE__*/jsxRuntime.jsxs("span", {
-                className: "text-[10px] text-amber-300 flex items-center gap-1",
-                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                  icon: "triangle-exclamation",
-                  className: "h-2.5 w-2.5"
-                }), unresolvedHere]
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "text-xs opacity-50 mt-0.5",
-              children: [rows.length, " widget", rows.length === 1 ? "" : "s"]
-            })]
+                className: "inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+              }), unresolvedHere]
+            }) : null
           }, providerType);
         })
       })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      "aria-hidden": true,
+      className: "flex-shrink-0 border-r ".concat(hairline)
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-1 min-w-0 overflow-hidden flex flex-col",
       children: selectedType ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "px-4 py-3 flex-shrink-0",
+          className: "px-4 pb-3 flex-shrink-0 border-b ".concat(hairline),
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "text-sm font-semibold",
             children: [selectedType, " ", /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "opacity-60 font-normal",
+              className: "font-normal ".concat(muted),
               children: "provider"
             })]
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "text-xs opacity-60 mt-1",
+            className: "text-xs mt-1 ".concat(muted),
             children: "Apply one provider to every widget of this type, or adjust per-widget below."
           })]
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex-1 overflow-y-auto p-4 space-y-4",
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex items-center gap-3",
             children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "text-xs opacity-60 flex-shrink-0 w-20",
+              className: "text-xs flex-shrink-0 w-20 ".concat(muted),
               children: "Bulk assign"
             }), /*#__PURE__*/jsxRuntime.jsxs("select", {
               value: topValue,
               onChange: function onChange(e) {
                 return onBulk(selectedType, e.target.value);
               },
-              className: "flex-1 bg-gray-800 border border-white/10 rounded px-3 py-1.5 text-sm",
+              className: "flex-1 rounded-lg border px-3 py-1.5 text-sm ".concat(fieldBg, " ").concat(hairline),
               children: [/*#__PURE__*/jsxRuntime.jsx("option", {
                 value: "",
                 children: "\u2014 Select provider \u2014"
@@ -63868,10 +63992,11 @@ function ProvidersTab(_ref5) {
               })]
             })]
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "text-xs font-semibold opacity-50 uppercase tracking-wider mb-2",
+            className: "flex flex-col gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
               children: "Per-widget"
             }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex flex-col gap-2",
               children: selectedRows.map(function (row) {
                 var _row$layoutItem;
                 var hasExplicitOverride = !!((_row$layoutItem = row.layoutItem) !== null && _row$layoutItem !== void 0 && (_row$layoutItem = _row$layoutItem.selectedProviders) !== null && _row$layoutItem !== void 0 && _row$layoutItem[selectedType]);
@@ -63879,35 +64004,29 @@ function ProvidersTab(_ref5) {
                 var isMissing = !row.resolvedProviderName;
                 var needsAttention = isRequired && isMissing;
                 return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex flex-row items-center gap-3 py-2 px-2 rounded border-l-2 transition-colors ".concat(needsAttention ? "bg-red-900 border-red-500" : "border-transparent hover:bg-gray-800"),
+                  "data-testid": "provider-row",
+                  className: "flex flex-row items-center gap-3 rounded-lg border px-3 py-2 ".concat(hairline),
                   children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
                     className: "flex-1 min-w-0",
-                    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                      className: "text-sm truncate flex items-center gap-1.5 ".concat(needsAttention ? "font-semibold text-red-100" : "font-medium"),
-                      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "truncate",
-                        children: row.label || row.component || "widget"
-                      }), isRequired && /*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: needsAttention ? "text-red-300" : "text-indigo-300",
-                        title: "Required provider",
-                        "aria-label": "required",
-                        children: "*"
-                      })]
-                    }), (row.widgetRef || row.component) && /*#__PURE__*/jsxRuntime.jsx(DashReact.Caption, {
-                      block: true,
-                      className: "font-mono truncate mt-0.5",
+                    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "text-sm font-medium truncate",
+                      children: row.label || row.component || "widget"
+                    }), (row.widgetRef || row.component) && /*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "text-xs font-mono truncate mt-0.5 ".concat(muted),
                       title: row.widgetRef || row.component,
                       children: row.widgetRef || row.component
                     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                      className: "flex items-center gap-1.5 mt-1 text-xs",
-                      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "uppercase tracking-wide px-1.5 py-0.5 rounded font-semibold ".concat(needsAttention ? "bg-red-600 text-white" : isRequired ? "bg-indigo-800 text-indigo-100" : "bg-gray-700 text-gray-300"),
-                        children: isRequired ? "required" : "optional"
+                      className: "flex flex-row items-center gap-3 mt-1 text-xs",
+                      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+                        className: "flex flex-row items-center gap-1.5 uppercase tracking-wider font-semibold ".concat(needsAttention ? "text-amber-400" : muted),
+                        children: [needsAttention && /*#__PURE__*/jsxRuntime.jsx("span", {
+                          className: "inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+                        }), isRequired ? "Required" : "Optional"]
                       }), hasExplicitOverride && /*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "uppercase tracking-wide px-1.5 py-0.5 rounded font-semibold bg-indigo-900 text-indigo-200",
-                        children: "override"
+                        className: "uppercase tracking-wider font-semibold ".concat(muted),
+                        children: "Override"
                       }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "opacity-40 truncate ml-1",
+                        className: "font-mono truncate ".concat(muted),
                         children: (row.widgetId || "").slice(0, 8)
                       })]
                     })]
@@ -63916,7 +64035,7 @@ function ProvidersTab(_ref5) {
                     onChange: function onChange(e) {
                       return onPerWidget(row.widgetId, selectedType, e.target.value);
                     },
-                    className: "bg-gray-800 border rounded px-2 py-1 text-xs min-w-[12rem] ".concat(needsAttention ? "border-red-400" : "border-gray-700"),
+                    className: "w-48 flex-shrink-0 rounded-lg border px-2 py-1 text-xs ".concat(fieldBg, " ").concat(needsAttention ? "border-amber-400" : hairline),
                     children: [/*#__PURE__*/jsxRuntime.jsx("option", {
                       value: "",
                       children: "\u2014 none \u2014"
@@ -63933,7 +64052,7 @@ function ProvidersTab(_ref5) {
           })]
         })]
       }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 flex items-center justify-center text-sm opacity-60",
+        className: "flex-1 flex items-center justify-center text-sm ".concat(muted),
         children: "Pick a provider type to bulk-assign or adjust per widget."
       })
     })]
@@ -63954,8 +64073,8 @@ function ProvidersTab(_ref5) {
  * package (no `config.id` / `config.package` / item.workspace hint).
  * Usually this is a stale layout item whose widget got uninstalled.
  */
-function DependenciesTab(_ref9) {
-  var dependencies = _ref9.dependencies;
+function DependenciesTab(_ref0) {
+  var dependencies = _ref0.dependencies;
   if (!dependencies || dependencies.length === 0) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex items-center justify-center h-full text-sm opacity-60 text-center",
@@ -64028,13 +64147,16 @@ function sameWiringEntry(a, b) {
  * adjusts wiring per handler from a single dropdown of all emitters'
  * (widget × event) pairs.
  */
-function ListenersTab(_ref0) {
+function ListenersTab(_ref1) {
   var _receivers$;
-  var emitters = _ref0.emitters,
-    receivers = _ref0.receivers,
-    wiring = _ref0.wiring,
-    onAdd = _ref0.onAdd,
-    onRemove = _ref0.onRemove;
+  var emitters = _ref1.emitters,
+    receivers = _ref1.receivers,
+    wiring = _ref1.wiring,
+    onAdd = _ref1.onAdd,
+    onRemove = _ref1.onRemove;
+  var _useConfigTokens4 = useConfigTokens(),
+    muted = _useConfigTokens4.muted,
+    hairline = _useConfigTokens4.hairline;
   var _useState17 = React.useState(((_receivers$ = receivers[0]) === null || _receivers$ === void 0 ? void 0 : _receivers$.key) || null),
     _useState18 = _slicedToArray(_useState17, 2),
     selectedReceiverKey = _useState18[0],
@@ -64090,31 +64212,25 @@ function ListenersTab(_ref0) {
       className: "flex flex-row gap-3 flex-1 min-h-0",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "px-3 py-2 text-xs font-semibold opacity-50 uppercase tracking-wider",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
+          className: "px-3 mb-2",
           children: "Widgets"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "overflow-y-auto flex-1",
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "overflow-y-auto flex-1 flex flex-col gap-1",
           children: receivers.map(function (r) {
-            var isActive = r.key === selectedReceiverKey;
-            return /*#__PURE__*/jsxRuntime.jsxs("button", {
-              type: "button",
+            return /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+              title: r.label,
+              subtitle: r.widgetRef || null,
+              active: r.key === selectedReceiverKey,
               onClick: function onClick() {
                 return setSelectedReceiverKey(r.key);
-              },
-              className: "w-full text-left px-3 py-2 border-l-2 ".concat(isActive ? "bg-indigo-900/30 border-indigo-400" : "border-transparent hover:bg-white/5"),
-              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "text-sm font-medium truncate",
-                children: r.label
-              }), r.widgetRef && /*#__PURE__*/jsxRuntime.jsx(DashReact.Caption, {
-                block: true,
-                className: "font-mono truncate mt-0.5",
-                title: r.widgetRef,
-                children: r.widgetRef
-              })]
+              }
             }, r.key);
           })
         })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        "aria-hidden": true,
+        className: "flex-shrink-0 border-r ".concat(hairline)
       }), selectedReceiver ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx(HandlersColumn, {
           receiver: selectedReceiver,
@@ -64134,7 +64250,7 @@ function ListenersTab(_ref0) {
           onRemove: onRemove
         })]
       }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 min-w-0 flex items-center justify-center text-sm opacity-60",
+        className: "flex-1 min-w-0 flex items-center justify-center text-sm ".concat(muted),
         children: "Pick a widget on the left to wire its handlers."
       })]
     })
@@ -64147,11 +64263,11 @@ function ListenersTab(_ref0) {
  * third column. Matches the left-column look from
  * PanelEditItemHandlers.
  */
-function HandlersColumn(_ref10) {
-  var receiver = _ref10.receiver,
-    myWiring = _ref10.myWiring,
-    selectedHandler = _ref10.selectedHandler,
-    onSelectHandler = _ref10.onSelectHandler;
+function HandlersColumn(_ref11) {
+  var receiver = _ref11.receiver,
+    myWiring = _ref11.myWiring,
+    selectedHandler = _ref11.selectedHandler,
+    onSelectHandler = _ref11.onSelectHandler;
   var countsByHandler = React.useMemo(function () {
     var m = new Map();
     var _iterator9 = _createForOfIteratorHelper$9(myWiring),
@@ -64168,44 +64284,43 @@ function HandlersColumn(_ref10) {
     }
     return m;
   }, [myWiring]);
+  var _useConfigTokens5 = useConfigTokens(),
+    muted = _useConfigTokens5.muted,
+    hairline = _useConfigTokens5.hairline;
   return (
     /*#__PURE__*/
     // Plain <div> wrapper — Card2 reads as washed-out against the
     // modal's dark chrome. See ListenersTab + ProvidersTab fix.
-    jsxRuntime.jsxs("div", {
-      className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-3 py-2 text-xs font-semibold opacity-50 uppercase tracking-wider",
-        children: "Event Handlers"
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "overflow-y-auto flex-1",
-        children: receiver.eventHandlers.length === 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-xs opacity-50 text-center py-6 px-3",
-          children: "This widget declares no event handlers."
-        }) : receiver.eventHandlers.map(function (h) {
-          var isActive = h === selectedHandler;
-          var count = countsByHandler.get(h) || 0;
-          return /*#__PURE__*/jsxRuntime.jsxs("button", {
-            type: "button",
-            onClick: function onClick() {
-              return onSelectHandler(h);
-            },
-            className: "w-full text-left px-3 py-2 text-sm flex items-center justify-between gap-2 border-l-2 ".concat(isActive ? "bg-indigo-900/30 border-indigo-400" : "border-transparent hover:bg-white/5"),
-            children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "flex items-center gap-2 min-w-0",
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "bolt",
-                className: "h-3 w-3 opacity-60 flex-shrink-0"
-              }), /*#__PURE__*/jsxRuntime.jsx("code", {
-                className: "truncate",
-                children: h
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "text-xs opacity-60 flex-shrink-0",
-              children: count
-            })]
-          }, h);
-        })
+    jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
+          className: "px-3 mb-2",
+          children: "Event Handlers"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "overflow-y-auto flex-1 flex flex-col gap-1",
+          children: receiver.eventHandlers.length === 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "text-xs text-center py-6 px-3 ".concat(muted),
+            children: "This widget declares no event handlers."
+          }) : receiver.eventHandlers.map(function (h) {
+            var count = countsByHandler.get(h) || 0;
+            return /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+              title: h,
+              mono: true,
+              active: h === selectedHandler,
+              onClick: function onClick() {
+                return onSelectHandler(h);
+              },
+              badge: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-xs flex-shrink-0 ".concat(muted),
+                children: count
+              })
+            }, h);
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        "aria-hidden": true,
+        className: "flex-shrink-0 border-r ".concat(hairline)
       })]
     })
   );
@@ -64217,13 +64332,16 @@ function HandlersColumn(_ref10) {
  * Checked = wired; toggling commits an add/remove. Mirrors the
  * right-column UX of PanelEditItemHandlers.
  */
-function EventsColumn(_ref11) {
-  var receiver = _ref11.receiver,
-    handlerName = _ref11.handlerName,
-    myWiring = _ref11.myWiring,
-    emitters = _ref11.emitters,
-    onAdd = _ref11.onAdd,
-    onRemove = _ref11.onRemove;
+function EventsColumn(_ref12) {
+  var receiver = _ref12.receiver,
+    handlerName = _ref12.handlerName,
+    myWiring = _ref12.myWiring,
+    emitters = _ref12.emitters,
+    onAdd = _ref12.onAdd,
+    onRemove = _ref12.onRemove;
+  var _useConfigTokens6 = useConfigTokens(),
+    muted = _useConfigTokens6.muted,
+    hairline = _useConfigTokens6.hairline;
   // Wired-for-this-handler: dedupe defensively (legacy workspaces
   // occasionally contain duplicate entries under the same handler).
   var wiredHere = React.useMemo(function () {
@@ -64260,7 +64378,7 @@ function EventsColumn(_ref11) {
   });
   if (!handlerName) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-1 min-w-0 flex items-center justify-center text-sm opacity-60",
+      className: "flex-1 min-w-0 flex items-center justify-center text-sm ".concat(muted),
       children: "Select a handler to view available events."
     });
   }
@@ -64294,7 +64412,7 @@ function EventsColumn(_ref11) {
     jsxRuntime.jsxs("div", {
       className: "flex-1 min-w-0 overflow-hidden flex flex-col",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-shrink-0 px-4 py-2 text-xs opacity-60",
+        className: "flex-shrink-0 px-4 pb-3 text-xs border-b ".concat(muted, " ").concat(hairline),
         children: ["Check an event to fire ", /*#__PURE__*/jsxRuntime.jsx("code", {
           className: "text-xs",
           children: handlerName
@@ -64302,22 +64420,21 @@ function EventsColumn(_ref11) {
           className: "font-medium",
           children: receiver.label
         }), "."]
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 overflow-y-auto p-4 space-y-5",
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1 overflow-y-auto p-4 flex flex-col gap-3",
         children: emittersForList.length === 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-sm opacity-60",
+          className: "text-sm ".concat(muted),
           children: "No other widgets in this dashboard emit events."
         }) : emittersForList.map(function (e) {
           return /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "space-y-1",
+            className: "rounded-lg border px-3 py-2 flex flex-col gap-1 ".concat(hairline),
             children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "flex flex-col gap-0.5 mb-1",
               children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                 className: "text-sm font-semibold",
                 children: e.label
-              }), (e.widgetRef || e.component) && /*#__PURE__*/jsxRuntime.jsx(DashReact.Caption, {
-                block: true,
-                className: "font-mono truncate",
+              }), (e.widgetRef || e.component) && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-xs font-mono truncate ".concat(muted),
                 children: (e.widgetRef || e.component) + (e.itemId != null ? "[".concat(e.itemId, "]") : "")
               })]
             }), e.events.map(function (eventName) {