@trops/dash-core 0.1.601 → 0.1.603

package/dist/index.esm.js

@@ -6519,7 +6519,7 @@ var FolderDetail = function FolderDetail(_ref) {
   });
 };
 
-var OptionCard$2 = function OptionCard(_ref) {
+var OptionCard$3 = function OptionCard(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
     description = _ref.description,
@@ -6568,28 +6568,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$2, {
+      children: [/*#__PURE__*/jsx(OptionCard$3, {
         icon: "plus",
         title: "New Dashboard",
         description: "Start from a blank template and customize your layout",
         onClick: function onClick() {
           return onSelect("template");
         }
-      }), /*#__PURE__*/jsx(OptionCard$2, {
+      }), /*#__PURE__*/jsx(OptionCard$3, {
         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$2, {
+      }), /*#__PURE__*/jsx(OptionCard$3, {
         icon: "compass",
         title: "Search Registry",
         description: "Browse and install dashboards from the online registry",
         onClick: function onClick() {
           return onSelect("registry");
         }
-      }), /*#__PURE__*/jsx(OptionCard$2, {
+      }), /*#__PURE__*/jsx(OptionCard$3, {
         icon: "wand-magic-sparkles",
         title: "Dashboard Wizard",
         description: "Guided setup \u2014 pick categories, providers, and widgets step by step",
@@ -41715,6 +41715,94 @@ var DashboardDetail = function DashboardDetail(_ref2) {
   });
 };
 
+var OptionCard$2 = 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"
+      })
+    })]
+  });
+};
+
+/**
+ * NewDashboardChooser — consolidated entry point for the
+ * "New Dashboard" header button in Settings → Dashboards.
+ *
+ * Audit #19 fix: the prior header button was labeled "Marketplace"
+ * which was ambiguous (it set installMode=marketplace, duplicating
+ * the Marketplace tab in the list). Renamed to "New Dashboard"; the
+ * chooser presents the actual creation paths as labeled cards,
+ * matching the ThemeNewChooser pattern.
+ *
+ * Options:
+ *   - "marketplace" → registry browser (existing DiscoverDashboardsDetail)
+ *   - "wizard"      → existing dashboard creation wizard
+ *
+ * The Marketplace TAB in the list view stays — it's the in-place
+ * browse affordance, distinct from this "I want to create a new
+ * dashboard" entry.
+ */
+var NewDashboardChooser = function NewDashboardChooser(_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: "CREATE A DASHBOARD"
+      }), /*#__PURE__*/jsx(OptionCard$2, {
+        icon: "compass",
+        title: "Search Marketplace",
+        description: "Browse and install community dashboards from the online registry",
+        onClick: function onClick() {
+          return onSelect("marketplace");
+        },
+        currentTheme: currentTheme
+      }), /*#__PURE__*/jsx(OptionCard$2, {
+        icon: "wand-magic-sparkles",
+        title: "From Wizard",
+        description: "Build a new dashboard from a layout + theme + widgets",
+        onClick: function onClick() {
+          return onSelect("wizard");
+        },
+        currentTheme: currentTheme
+      })]
+    })
+  });
+};
+
 function ownKeys$x(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$x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$x(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DashboardsSection = function DashboardsSection(_ref) {
@@ -41760,7 +41848,9 @@ var DashboardsSection = function DashboardsSection(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     viewMode = _useState10[0],
     setViewMode = _useState10[1];
-  // null | "marketplace"
+  // null | "picker" | "marketplace"
+  //   picker      — NewDashboardChooser (Phase 19 / audit #19)
+  //   marketplace — DiscoverDashboardsDetail (registry browser)
   var _useState11 = useState(null),
     _useState12 = _slicedToArray(_useState11, 2),
     installMode = _useState12[0],
@@ -41846,12 +41936,16 @@ var DashboardsSection = function DashboardsSection(_ref) {
     });
   }
 
-  // Respond to external create trigger from header button (marketplace)
+  // Respond to external create trigger from the "New Dashboard"
+  // header button. Audit #19: this now opens the consolidated
+  // NewDashboardChooser (Marketplace + Wizard cards), matching the
+  // ThemeNewChooser pattern. Pre-fix this went straight to
+  // installMode="marketplace" which made the button ambiguous.
   var prevCreateRequested = useRef(false);
   useEffect(function () {
     if (createRequested && !prevCreateRequested.current) {
       setSelectedId(null);
-      setInstallMode("marketplace");
+      setInstallMode("picker");
     }
     prevCreateRequested.current = createRequested;
     if (createRequested && onCreateAcknowledged) {
@@ -41859,6 +41953,16 @@ var DashboardsSection = function DashboardsSection(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [createRequested]);
+  function handleChooserSelect(option) {
+    if (option === "marketplace") {
+      setInstallMode("marketplace");
+    } else if (option === "wizard") {
+      // onOpenWizard closes the Settings modal and opens the
+      // dashboard wizard. Provided by AppSettingsModal.
+      setInstallMode(null);
+      if (typeof onOpenWizard === "function") onOpenWizard();
+    }
+  }
   var selectedWorkspace = workspaces.find(function (ws) {
     return ws.id === selectedId;
   });
@@ -41970,7 +42074,11 @@ var DashboardsSection = function DashboardsSection(_ref) {
     })]
   });
   var detailContent = null;
-  if (installMode === "marketplace") {
+  if (installMode === "picker") {
+    detailContent = /*#__PURE__*/jsx(NewDashboardChooser, {
+      onSelect: handleChooserSelect
+    });
+  } else if (installMode === "marketplace") {
     detailContent = /*#__PURE__*/jsx(DiscoverDashboardsDetail, {
       onBack: function onBack() {
         setInstallMode(null);
@@ -48503,12 +48611,15 @@ var OptionCard = function OptionCard(_ref) {
 };
 
 /**
- * InstallWidgetPicker — the 3-option menu shown when "Install Widgets" is clicked.
+ * InstallWidgetPicker — the consolidated chooser shown when the
+ * "New Widget" header button is clicked (audit #19).
  *
  * Options:
- * 1. Search for Widgets (registry browser)
- * 2. Install from File (.zip)
- * 3. Load from Folder
+ * 1. Use Widget Builder (Phase 19 — folds the inline "+ New Widget"
+ *    button's function into the chooser so there's one entry point)
+ * 2. Search for Widgets (registry browser)
+ * 3. Install from File (.zip)
+ * 4. Load from Folder
  */
 var InstallWidgetPicker = function InstallWidgetPicker(_ref2) {
   var onSelect = _ref2.onSelect;
@@ -48523,7 +48634,15 @@ var InstallWidgetPicker = function InstallWidgetPicker(_ref2) {
       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: "HOW TO INSTALL"
+        children: "CREATE A WIDGET"
+      }), /*#__PURE__*/jsx(OptionCard, {
+        icon: "wand-magic-sparkles",
+        title: "Use Widget Builder",
+        description: "Open the AI Widget Builder to create a new widget from scratch",
+        onClick: function onClick() {
+          return onSelect("builder");
+        },
+        currentTheme: currentTheme
       }), /*#__PURE__*/jsx(OptionCard, {
         icon: "compass",
         title: "Search for Widgets",
@@ -49815,7 +49934,14 @@ var WidgetsSection = function WidgetsSection(_ref) {
     setProgressComplete(false);
   }
   function handlePickerSelect(option) {
-    if (option === "discover") {
+    if (option === "builder") {
+      // Audit #19: the inline "+ New Widget" button was removed in
+      // favor of this card so there's a single entry point for new-
+      // widget creation. Closes the picker and fires the same event
+      // the inline button used to dispatch.
+      setInstallMode(null);
+      window.dispatchEvent(new Event("dash:open-widget-builder"));
+    } else if (option === "discover") {
       setInstallMode("discover");
     } else if (option === "zip") {
       handleInstallFromZip();
@@ -49913,23 +50039,7 @@ var WidgetsSection = function WidgetsSection(_ref) {
   }
   var listContent = /*#__PURE__*/jsxs("div", {
     className: "flex flex-col h-full",
-    children: [/*#__PURE__*/jsx("div", {
-      className: "flex-shrink-0 px-3 pt-2 pb-1",
-      children: /*#__PURE__*/jsxs("button", {
-        type: "button",
-        onClick: function onClick() {
-          return window.dispatchEvent(new Event("dash:open-widget-builder"));
-        },
-        className: "w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded bg-indigo-600 hover:bg-indigo-500 text-white",
-        "data-testid": "widgets-section-new-widget-button",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "plus",
-          className: "text-xs"
-        }), /*#__PURE__*/jsx("span", {
-          children: "New Widget"
-        })]
-      })
-    }), isChecking && packagesWithUpdates.length === 0 && /*#__PURE__*/jsxs("div", {
+    children: [isChecking && packagesWithUpdates.length === 0 && /*#__PURE__*/jsxs("div", {
       className: "flex-shrink-0 px-3 py-2 border-b border-white/10 bg-gray-800/60 flex items-center gap-2 text-xs text-gray-400",
       "data-testid": "widgets-section-checking-updates",
       children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
@@ -54565,7 +54675,7 @@ var AppSettingsModal = function AppSettingsModal(_ref) {
         padding: false
       }), (activeSection === "dashboards" || activeSection === "folders" || activeSection === "providers" || activeSection === "themes" || activeSection === "widgets") && /*#__PURE__*/jsx(ButtonIcon3, {
         icon: "plus",
-        text: activeSection === "dashboards" ? "Marketplace" : activeSection === "folders" ? "New Folder" : activeSection === "providers" ? "New Provider" : activeSection === "widgets" ? "Install Widgets" : "New Theme",
+        text: activeSection === "dashboards" ? "New Dashboard" : activeSection === "folders" ? "New Folder" : activeSection === "providers" ? "New Provider" : activeSection === "widgets" ? "New Widget" : "New Theme",
         onClick: function onClick() {
           return setCreateRequested(true);
         },