@trops/dash-core 0.1.453 → 0.1.454

package/dist/index.js

@@ -3729,7 +3729,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,
@@ -3778,28 +3778,28 @@ var CreationMethodPicker = function CreationMethodPicker(_ref2) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col w-2/3 p-6 pt-10 space-y-3",
-      children: [/*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+      children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(OptionCard$1, {
+      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(OptionCard$1, {
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
         icon: "compass",
         title: "Search Registry",
         description: "Browse and install dashboards from the online registry",
         onClick: function onClick() {
           return onSelect("registry");
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
         icon: "wand-magic-sparkles",
         title: "Dashboard Wizard",
         description: "Guided setup \u2014 pick categories, providers, and widgets step by step",
@@ -47072,6 +47072,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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 h-8 w-8 flex items-center justify-center opacity-60",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: icon,
+        className: "h-5 w-5"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col min-w-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm font-medium",
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs opacity-50 mt-0.5",
+        children: description
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 ml-auto opacity-30",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.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 = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 overflow-y-auto p-6 space-y-3 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs font-semibold opacity-50 block mb-4",
+        children: "ADD A NEW PROVIDER"
+      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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,
@@ -47112,42 +47209,51 @@ 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 = React.useState(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    isEditing = _useState0[0],
-    setIsEditing = _useState0[1];
-  var _useState1 = React.useState(""),
+    isShowingClassChooser = _useState0[0],
+    setIsShowingClassChooser = _useState0[1];
+  var _useState1 = React.useState(false),
     _useState10 = _slicedToArray(_useState1, 2),
-    formName = _useState10[0],
-    setFormName = _useState10[1];
+    isEditing = _useState10[0],
+    setIsEditing = _useState10[1];
   var _useState11 = React.useState(""),
     _useState12 = _slicedToArray(_useState11, 2),
-    formType = _useState12[0],
-    setFormType = _useState12[1];
-  var _useState13 = React.useState({}),
+    formName = _useState12[0],
+    setFormName = _useState12[1];
+  var _useState13 = React.useState(""),
     _useState14 = _slicedToArray(_useState13, 2),
-    formCredentials = _useState14[0],
-    setFormCredentials = _useState14[1];
-  var _useState15 = React.useState(null),
+    formType = _useState14[0],
+    setFormType = _useState14[1];
+  var _useState15 = React.useState({}),
     _useState16 = _slicedToArray(_useState15, 2),
-    deleteTarget = _useState16[0],
-    setDeleteTarget = _useState16[1];
-  var _useState17 = React.useState(false),
+    formCredentials = _useState16[0],
+    setFormCredentials = _useState16[1];
+  var _useState17 = React.useState(null),
     _useState18 = _slicedToArray(_useState17, 2),
-    isAddingMcp = _useState18[0],
-    setIsAddingMcp = _useState18[1];
+    deleteTarget = _useState18[0],
+    setDeleteTarget = _useState18[1];
   var _useState19 = React.useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    isEditingMcp = _useState20[0],
-    setIsEditingMcp = _useState20[1];
+    isAddingMcp = _useState20[0],
+    setIsAddingMcp = _useState20[1];
   var _useState21 = React.useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    isAddingWs = _useState22[0],
-    setIsAddingWs = _useState22[1];
+    isEditingMcp = _useState22[0],
+    setIsEditingMcp = _useState22[1];
   var _useState23 = React.useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    isEditingWs = _useState24[0],
-    setIsEditingWs = _useState24[1];
+    isAddingWs = _useState24[0],
+    setIsAddingWs = _useState24[1];
+  var _useState25 = React.useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    isEditingWs = _useState26[0],
+    setIsEditingWs = _useState26[1];
 
   // Row ID counter for env/header rows in MCP edit mode
   var nextRowIdRef = React.useRef(0);
@@ -47429,19 +47535,35 @@ var ProvidersSection = function ProvidersSection(_ref) {
     if (createRequested && !prevCreateRequested.current) {
       resetForm();
       setSelectedName(null);
+      setIsShowingClassChooser(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;
@@ -47573,6 +47695,19 @@ var ProvidersSection = function ProvidersSection(_ref) {
         return setIsEditingWs(false);
       }
     }, selectedName);
+  } else if (isShowingClassChooser) {
+    detailContent = /*#__PURE__*/jsxRuntime.jsx(NewProviderPicker, {
+      onSelect: function onSelect(cls) {
+        setIsShowingClassChooser(false);
+        if (cls === "mcp") {
+          setIsAddingMcp(true);
+        } else if (cls === "websocket") {
+          setIsAddingWs(true);
+        } else {
+          setIsCreating(true);
+        }
+      }
+    });
   } else if (isAddingMcp) {
     detailContent = /*#__PURE__*/jsxRuntime.jsx(McpCatalogDetail, {
       onSave: handleMcpSave,