@trops/dash-core 0.1.453 → 0.1.455

package/dist/index.esm.js

@@ -3711,7 +3711,7 @@ var FolderDetail = function FolderDetail(_ref) {
   });
 };
 
-var OptionCard$1 = function OptionCard(_ref) {
+var OptionCard$2 = function OptionCard(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
     description = _ref.description,
@@ -3760,28 +3760,28 @@ var CreationMethodPicker = function CreationMethodPicker(_ref2) {
       })]
     }), /*#__PURE__*/jsxs("div", {
       className: "flex flex-col w-2/3 p-6 pt-10 space-y-3",
-      children: [/*#__PURE__*/jsx(OptionCard$1, {
+      children: [/*#__PURE__*/jsx(OptionCard$2, {
         icon: "plus",
         title: "New Dashboard",
         description: "Start from a blank template and customize your layout",
         onClick: function onClick() {
           return onSelect("template");
         }
-      }), /*#__PURE__*/jsx(OptionCard$1, {
+      }), /*#__PURE__*/jsx(OptionCard$2, {
         icon: "file-zipper",
         title: "Import from File",
         description: "Import a dashboard from a .zip file on your computer",
         onClick: function onClick() {
           return onSelect("import");
         }
-      }), /*#__PURE__*/jsx(OptionCard$1, {
+      }), /*#__PURE__*/jsx(OptionCard$2, {
         icon: "compass",
         title: "Search Registry",
         description: "Browse and install dashboards from the online registry",
         onClick: function onClick() {
           return onSelect("registry");
         }
-      }), /*#__PURE__*/jsx(OptionCard$1, {
+      }), /*#__PURE__*/jsx(OptionCard$2, {
         icon: "wand-magic-sparkles",
         title: "Dashboard Wizard",
         description: "Guided setup \u2014 pick categories, providers, and widgets step by step",
@@ -43913,7 +43913,9 @@ var ProviderDetail = function ProviderDetail(_ref) {
     _ref$catalogAuthComma = _ref.catalogAuthCommand,
     catalogAuthCommand = _ref$catalogAuthComma === void 0 ? null : _ref$catalogAuthComma,
     _ref$catalogCredentia = _ref.catalogCredentialSchema,
-    catalogCredentialSchema = _ref$catalogCredentia === void 0 ? {} : _ref$catalogCredentia;
+    catalogCredentialSchema = _ref$catalogCredentia === void 0 ? {} : _ref$catalogCredentia,
+    _ref$onBack = _ref.onBack,
+    onBack = _ref$onBack === void 0 ? null : _ref$onBack;
   var appContext = useContext(AppContext);
   var dashApi = appContext === null || appContext === void 0 ? void 0 : appContext.dashApi;
   var isMcp = (provider === null || provider === void 0 ? void 0 : provider.providerClass) === "mcp";
@@ -44242,7 +44244,15 @@ var ProviderDetail = function ProviderDetail(_ref) {
       className: "flex flex-col flex-1 min-h-0",
       children: [/*#__PURE__*/jsxs("div", {
         className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-5",
-        children: [/*#__PURE__*/jsx(SubHeading3, {
+        children: [onBack && /*#__PURE__*/jsxs("button", {
+          type: "button",
+          onClick: onBack,
+          className: "flex items-center gap-2 text-sm opacity-60 hover:opacity-100 transition-opacity",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "chevron-left",
+            className: "h-3 w-3"
+          }), "Back"]
+        }), /*#__PURE__*/jsx(SubHeading3, {
           title: isCreating ? "New Provider" : "Edit Provider",
           padding: false
         }), /*#__PURE__*/jsxs("div", {
@@ -45836,7 +45846,9 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
   var onSave = _ref.onSave,
     onCancel = _ref.onCancel,
     _ref$initialSelectedI = _ref.initialSelectedId,
-    initialSelectedId = _ref$initialSelectedI === void 0 ? null : _ref$initialSelectedI;
+    initialSelectedId = _ref$initialSelectedI === void 0 ? null : _ref$initialSelectedI,
+    _ref$onBack = _ref.onBack,
+    onBack = _ref$onBack === void 0 ? null : _ref$onBack;
   var appContext = useContext(AppContext);
   var dashApi = appContext === null || appContext === void 0 ? void 0 : appContext.dashApi;
   var _useState = useState([]),
@@ -46487,7 +46499,15 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
     className: "flex flex-col flex-1 min-h-0",
     children: /*#__PURE__*/jsxs("div", {
       className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-4",
-      children: [/*#__PURE__*/jsxs("div", {
+      children: [onBack && /*#__PURE__*/jsxs("button", {
+        type: "button",
+        onClick: onBack,
+        className: "flex items-center gap-2 text-sm opacity-60 hover:opacity-100 transition-opacity",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "chevron-left",
+          className: "h-3 w-3"
+        }), "Back"]
+      }), /*#__PURE__*/jsxs("div", {
         className: "flex items-center justify-between",
         children: [/*#__PURE__*/jsx(SubHeading3, {
           title: "Add MCP Server",
@@ -46664,7 +46684,9 @@ var WebSocketProviderForm = function WebSocketProviderForm(_ref) {
     _ref$initialCredentia = _ref.initialCredentials,
     initialCredentials = _ref$initialCredentia === void 0 ? {} : _ref$initialCredentia,
     onSave = _ref.onSave,
-    onCancel = _ref.onCancel;
+    onCancel = _ref.onCancel,
+    _ref$onBack = _ref.onBack,
+    onBack = _ref$onBack === void 0 ? null : _ref$onBack;
   var _useState = useState(initialName),
     _useState2 = _slicedToArray(_useState, 2),
     name = _useState2[0],
@@ -46878,7 +46900,15 @@ var WebSocketProviderForm = function WebSocketProviderForm(_ref) {
     className: "flex flex-col flex-1 min-h-0",
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-5",
-      children: [/*#__PURE__*/jsx(SubHeading3, {
+      children: [onBack && /*#__PURE__*/jsxs("button", {
+        type: "button",
+        onClick: onBack,
+        className: "flex items-center gap-2 text-sm opacity-60 hover:opacity-100 transition-opacity",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "chevron-left",
+          className: "h-3 w-3"
+        }), "Back"]
+      }), /*#__PURE__*/jsx(SubHeading3, {
         title: isEditMode ? "Edit WebSocket Provider" : "New WebSocket Provider",
         padding: false
       }), /*#__PURE__*/jsxs("div", {
@@ -47054,6 +47084,103 @@ var WebSocketProviderForm = function WebSocketProviderForm(_ref) {
   });
 };
 
+var OptionCard$1 = function OptionCard(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    onClick = _ref.onClick,
+    currentTheme = _ref.currentTheme;
+  return /*#__PURE__*/jsxs("button", {
+    type: "button",
+    onClick: onClick,
+    className: "w-full flex flex-row items-center gap-4 p-4 rounded-lg text-left transition-opacity ".concat(currentTheme["bg-primary-medium"] || "bg-white/5", " hover:opacity-80"),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex-shrink-0 h-8 w-8 flex items-center justify-center opacity-60",
+      children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: icon,
+        className: "h-5 w-5"
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col min-w-0",
+      children: [/*#__PURE__*/jsx("span", {
+        className: "text-sm font-medium",
+        children: title
+      }), /*#__PURE__*/jsx("span", {
+        className: "text-xs opacity-50 mt-0.5",
+        children: description
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex-shrink-0 ml-auto opacity-30",
+      children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: "chevron-right",
+        className: "h-3 w-3"
+      })
+    })]
+  });
+};
+
+/**
+ * NewProviderPicker — the 3-option chooser shown when the user clicks
+ * "+ New Provider" from the Settings → Providers header without a
+ * specific class pre-selected. Mirrors InstallWidgetPicker's pattern
+ * so the UI feels consistent across "+ New ..." entry points in
+ * Settings.
+ *
+ * Calls `onSelect(class)` with the literal class string ("credential",
+ * "mcp", or "websocket"). The parent (ProvidersSection) then routes
+ * to the appropriate create flow:
+ *
+ *   credential → ProviderDetail (credential create form)
+ *   mcp        → McpCatalogDetail (catalog browser)
+ *   websocket  → WsProviderDetail (WebSocket add form)
+ *
+ * The Widget Builder's existing deep-link path (which always passes
+ * an explicit class) bypasses this chooser and goes straight to the
+ * matching form.
+ */
+var NewProviderPicker = function NewProviderPicker(_ref2) {
+  var onSelect = _ref2.onSelect;
+  var _useContext = useContext(ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex-1 overflow-y-auto p-6 space-y-3 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsx("span", {
+        className: "text-xs font-semibold opacity-50 block mb-4",
+        children: "ADD A NEW PROVIDER"
+      }), /*#__PURE__*/jsx(OptionCard$1, {
+        icon: "key",
+        title: "Credential",
+        description: "API key or token credentials for services like Algolia, Anthropic, or any HTTP API",
+        onClick: function onClick() {
+          return onSelect("credential");
+        },
+        currentTheme: currentTheme
+      }), /*#__PURE__*/jsx(OptionCard$1, {
+        icon: "plug",
+        title: "MCP",
+        description: "Model Context Protocol server \u2014 pick from a curated catalog (Slack, Filesystem, Notion, etc.)",
+        onClick: function onClick() {
+          return onSelect("mcp");
+        },
+        currentTheme: currentTheme
+      }), /*#__PURE__*/jsx(OptionCard$1, {
+        icon: "diagram-project",
+        title: "WebSocket",
+        description: "Real-time WebSocket connection to a streaming endpoint",
+        onClick: function onClick() {
+          return onSelect("websocket");
+        },
+        currentTheme: currentTheme
+      })]
+    })
+  });
+};
+
 var ProvidersSection = function ProvidersSection(_ref) {
   var _ref$dashApi = _ref.dashApi,
     dashApi = _ref$dashApi === void 0 ? null : _ref$dashApi,
@@ -47094,42 +47221,59 @@ var ProvidersSection = function ProvidersSection(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isCreating = _useState8[0],
     setIsCreating = _useState8[1];
+  // When the user clicks "+ New Provider" without a pre-selected
+  // class (Settings header button), show the class chooser
+  // (Credential / MCP / WebSocket) instead of defaulting to the
+  // credential form. Widget Builder's deep-link path passes a class
+  // explicitly and bypasses this chooser.
   var _useState9 = useState(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    isEditing = _useState0[0],
-    setIsEditing = _useState0[1];
-  var _useState1 = useState(""),
+    isShowingClassChooser = _useState0[0],
+    setIsShowingClassChooser = _useState0[1];
+  // Tracks whether the current create-flow detail was reached via the
+  // chooser (vs. the Widget Builder deep-link or list-edit). Only the
+  // chooser-entry path renders the "← Back" affordance, since that's
+  // the only path that has somewhere to go back to.
+  var _useState1 = useState(false),
     _useState10 = _slicedToArray(_useState1, 2),
-    formName = _useState10[0],
-    setFormName = _useState10[1];
-  var _useState11 = useState(""),
+    cameFromClassChooser = _useState10[0],
+    setCameFromClassChooser = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    formType = _useState12[0],
-    setFormType = _useState12[1];
-  var _useState13 = useState({}),
+    isEditing = _useState12[0],
+    setIsEditing = _useState12[1];
+  var _useState13 = useState(""),
     _useState14 = _slicedToArray(_useState13, 2),
-    formCredentials = _useState14[0],
-    setFormCredentials = _useState14[1];
-  var _useState15 = useState(null),
+    formName = _useState14[0],
+    setFormName = _useState14[1];
+  var _useState15 = useState(""),
     _useState16 = _slicedToArray(_useState15, 2),
-    deleteTarget = _useState16[0],
-    setDeleteTarget = _useState16[1];
-  var _useState17 = useState(false),
+    formType = _useState16[0],
+    setFormType = _useState16[1];
+  var _useState17 = useState({}),
     _useState18 = _slicedToArray(_useState17, 2),
-    isAddingMcp = _useState18[0],
-    setIsAddingMcp = _useState18[1];
-  var _useState19 = useState(false),
+    formCredentials = _useState18[0],
+    setFormCredentials = _useState18[1];
+  var _useState19 = useState(null),
     _useState20 = _slicedToArray(_useState19, 2),
-    isEditingMcp = _useState20[0],
-    setIsEditingMcp = _useState20[1];
+    deleteTarget = _useState20[0],
+    setDeleteTarget = _useState20[1];
   var _useState21 = useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    isAddingWs = _useState22[0],
-    setIsAddingWs = _useState22[1];
+    isAddingMcp = _useState22[0],
+    setIsAddingMcp = _useState22[1];
   var _useState23 = useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    isEditingWs = _useState24[0],
-    setIsEditingWs = _useState24[1];
+    isEditingMcp = _useState24[0],
+    setIsEditingMcp = _useState24[1];
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    isAddingWs = _useState26[0],
+    setIsAddingWs = _useState26[1];
+  var _useState27 = useState(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    isEditingWs = _useState28[0],
+    setIsEditingWs = _useState28[1];
 
   // Row ID counter for env/header rows in MCP edit mode
   var nextRowIdRef = useRef(0);
@@ -47411,19 +47555,39 @@ var ProvidersSection = function ProvidersSection(_ref) {
     if (createRequested && !prevCreateRequested.current) {
       resetForm();
       setSelectedName(null);
+      setIsShowingClassChooser(false);
+      // External create requests (deep-link or header button) do NOT
+      // come via the chooser, so any leftover "came from chooser" state
+      // from a prior session must be cleared before routing.
+      setCameFromClassChooser(false);
       if (initialProviderClass === "mcp") {
         // MCP class: open the catalog detail. Pre-select happens in
         // McpCatalogDetail via the initialSelectedId prop passed below.
         setIsCreating(false);
         setIsAddingMcp(true);
-      } else {
-        // Credential class (default): open the credential create form
-        // and pre-fill the type field if provided.
+      } else if (initialProviderClass === "websocket") {
+        // WebSocket class: open the WebSocket add form. Reachable via
+        // a future Widget Builder deep-link for ws-typed widgets.
+        setIsCreating(false);
+        setIsAddingMcp(false);
+        setIsAddingWs(true);
+      } else if (initialProviderClass === "credential") {
+        // Credential class: open the credential create form and
+        // pre-fill the type field if provided.
         setIsAddingMcp(false);
         setIsCreating(true);
         if (initialProviderType) {
           setFormType(initialProviderType);
         }
+      } else {
+        // No class specified — Settings header "+ New Provider"
+        // button hits this branch. Show the chooser so the user
+        // picks Credential / MCP / WebSocket explicitly instead of
+        // landing on the credential form by default.
+        setIsAddingMcp(false);
+        setIsCreating(false);
+        setIsAddingWs(false);
+        setIsShowingClassChooser(true);
       }
     }
     prevCreateRequested.current = createRequested;
@@ -47523,13 +47687,26 @@ var ProvidersSection = function ProvidersSection(_ref) {
       })]
     })]
   });
+
+  // Closes whichever create-flow detail is open and re-opens the
+  // class chooser. Only attached to the detail's onBack prop when
+  // the user reached it via the chooser (cameFromClassChooser).
+  var goBackToClassChooser = function goBackToClassChooser() {
+    resetForm();
+    setIsAddingWs(false);
+    setIsAddingMcp(false);
+    setIsCreating(false);
+    setCameFromClassChooser(false);
+    setIsShowingClassChooser(true);
+  };
   var detailContent = null;
   if (isAddingWs) {
     detailContent = /*#__PURE__*/jsx(WebSocketProviderForm, {
       onSave: handleWsSave,
       onCancel: function onCancel() {
         return setIsAddingWs(false);
-      }
+      },
+      onBack: cameFromClassChooser ? goBackToClassChooser : null
     });
   } else if (isEditingWs && selectedName && selectedProvider) {
     var wc = selectedProvider.wsConfig || {};
@@ -47555,13 +47732,28 @@ var ProvidersSection = function ProvidersSection(_ref) {
         return setIsEditingWs(false);
       }
     }, selectedName);
+  } else if (isShowingClassChooser) {
+    detailContent = /*#__PURE__*/jsx(NewProviderPicker, {
+      onSelect: function onSelect(cls) {
+        setIsShowingClassChooser(false);
+        setCameFromClassChooser(true);
+        if (cls === "mcp") {
+          setIsAddingMcp(true);
+        } else if (cls === "websocket") {
+          setIsAddingWs(true);
+        } else {
+          setIsCreating(true);
+        }
+      }
+    });
   } else if (isAddingMcp) {
     detailContent = /*#__PURE__*/jsx(McpCatalogDetail, {
       onSave: handleMcpSave,
       onCancel: function onCancel() {
         return setIsAddingMcp(false);
       },
-      initialSelectedId: initialProviderType
+      initialSelectedId: initialProviderType,
+      onBack: cameFromClassChooser ? goBackToClassChooser : null
     });
   } else if (isCreating) {
     detailContent = /*#__PURE__*/jsx(ProviderDetail, {
@@ -47576,7 +47768,8 @@ var ProvidersSection = function ProvidersSection(_ref) {
       onCancelEdit: function onCancelEdit() {
         resetForm();
         setIsCreating(false);
-      }
+      },
+      onBack: cameFromClassChooser ? goBackToClassChooser : null
     });
   } else if (isEditingMcp && selectedName && selectedProvider) {
     var mc = selectedProvider.mcpConfig || {};