@trops/dash-core 0.1.462 → 0.1.463

package/dist/index.js

@@ -7518,11 +7518,12 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
     };
   }, []);
 
-  // Sub-step state (DASH-188): 0 = Name, 1 = Folder, 2 = Theme
-  var _useState21 = React.useState(0),
-    _useState22 = _slicedToArray(_useState21, 2),
-    subStep = _useState22[0],
-    setSubStep = _useState22[1];
+  // Cycle 2: the inner pages were promoted to top-level wizard steps
+  // (state.step 1=Name, 2=Folder, 3=Theme, 4=Review). The internal
+  // mini-stepper from DASH-188 is gone — the modal footer's
+  // Next/Back drives advancement now, and the wizard's per-step
+  // canProceed gates each transition.
+
   var isPrebuilt = state.path === "prebuilt";
 
   // Initialize customization defaults when stepping into this step
@@ -7827,7 +7828,6 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
     setIsCreatingFolder(false);
     setNewFolderName("");
     setNewFolderIcon(null);
-    setSubStep(2); // Auto-advance to Theme
   }, [dispatch]);
   var handleThemeSelect = React.useCallback(function (key) {
     dispatch({
@@ -7993,16 +7993,6 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
     return item.id === state.customization.menuId;
   });
   var selectedTheme = themes && state.customization.theme ? themes[state.customization.theme] : null;
-  var SUB_STEPS = [{
-    label: "Name",
-    icon: "input-text"
-  }, {
-    label: "Folder",
-    icon: "folder"
-  }, {
-    label: "Theme",
-    icon: "palette"
-  }];
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col gap-4",
     children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
@@ -8056,28 +8046,18 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
           children: isPrebuilt ? ((_state$selectedDashbo = state.selectedDashboard) === null || _state$selectedDashbo === void 0 ? void 0 : _state$selectedDashbo.displayName) || ((_state$selectedDashbo2 = state.selectedDashboard) === null || _state$selectedDashbo2 === void 0 ? void 0 : _state$selectedDashbo2.name) || "Pre-built dashboard" : "".concat(state.selectedWidgets.length, " widget").concat(state.selectedWidgets.length !== 1 ? "s" : "")
         })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex items-center gap-2 mb-2",
-      children: SUB_STEPS.map(function (s, i) {
-        return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
-          children: [i > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex-1 h-px ".concat(i <= subStep ? "bg-blue-500" : "bg-gray-700")
-          }), /*#__PURE__*/jsxRuntime.jsxs("button", {
-            type: "button",
-            className: "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors ".concat(i === subStep ? "bg-blue-600 text-white" : i < subStep ? "bg-blue-900/50 text-blue-300 cursor-pointer" : "bg-gray-800 text-gray-500"),
-            onClick: function onClick() {
-              return setSubStep(i);
-            },
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-              icon: s.icon,
-              fixedWidth: true
-            }), s.label]
-          })]
-        }, s.label);
-      })
+    }), error && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "rounded-lg border border-red-500 bg-red-900 p-3 flex items-start gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "circle-exclamation",
+        className: "text-red-400 mt-0.5 flex-shrink-0"
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm text-red-200",
+        children: error
+      })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col gap-6",
-      children: [subStep === 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [state.step === 1 && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col gap-3",
         children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
           className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
@@ -8090,24 +8070,8 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
           onChange: handleNameChange,
           placeholder: "My Dashboard",
           autoFocus: true
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex justify-end mt-2",
-          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-            onClick: function onClick() {
-              return setSubStep(1);
-            },
-            title: "Next",
-            textSize: "text-sm",
-            padding: "py-1.5 px-4",
-            backgroundColor: state.customization.name.trim() ? "bg-blue-600" : "bg-gray-700",
-            textColor: state.customization.name.trim() ? "text-white" : "text-gray-500",
-            hoverTextColor: state.customization.name.trim() ? "hover:text-white" : "hover:text-gray-500",
-            hoverBackgroundColor: state.customization.name.trim() ? "hover:bg-blue-500" : "hover:bg-gray-700",
-            disabled: !state.customization.name.trim(),
-            icon: "arrow-right"
-          })
         })]
-      }), subStep === 1 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), state.step === 2 && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col gap-3",
         children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
           className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
@@ -8199,23 +8163,8 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
               })
             }, item.id);
           })]
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex justify-end mt-2",
-          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-            onClick: function onClick() {
-              return setSubStep(2);
-            },
-            title: "Next",
-            textSize: "text-sm",
-            padding: "py-1.5 px-4",
-            backgroundColor: "bg-blue-600",
-            textColor: "text-white",
-            hoverTextColor: "hover:text-white",
-            hoverBackgroundColor: "hover:bg-blue-500",
-            icon: "arrow-right"
-          })
         })]
-      }), subStep === 2 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), state.step === 3 && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col gap-3",
         children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
           className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
@@ -8306,6 +8255,21 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
             })]
           })]
         })]
+      }), state.step === 4 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col gap-3",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
+          className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "circle-check",
+            fixedWidth: true
+          }), "Review"]
+        }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+          className: "text-sm text-gray-400",
+          children: ["Confirm the dashboard details above. Click", " ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+            className: "text-gray-200",
+            children: "Create Dashboard"
+          }), " when you're ready \u2014 the modal footer holds the action."]
+        })]
       }), authNeeded && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col gap-3",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -8369,7 +8333,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
 
 function ownKeys$U(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$U(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$U(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$U(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var TOTAL_STEPS = 2; // Steps 0-1: Discover, Customize
+var TOTAL_STEPS = 5; // Steps 0-4: Discover, Name, Folder, Theme, Review
 
 var initialState = {
   step: 0,
@@ -8500,16 +8464,26 @@ function widgetCountToTemplate(count) {
   return "three-by-three";
 }
 function getCanProceed(state) {
+  // Step semantics (Cycle 2 restructure):
+  //   0 = Discover (browse + select)
+  //   1 = Name
+  //   2 = Folder
+  //   3 = Theme
+  //   4 = Review (final — Create button replaces Next)
   switch (state.step) {
     case 0:
       return state.selectedDashboard !== null || state.selectedWidgets.length > 0;
     case 1:
-      // Create can fire only when the user has both a name and a theme.
-      // The wizard auto-defaults theme to the user's active app theme,
-      // so this gate is mostly belt-and-suspenders — but it locks the
-      // contract so a future refactor that drops the auto-default
-      // can't quietly let the Create button enable on name alone.
-      return state.customization.name.trim().length > 0 && !!state.customization.theme;
+      return state.customization.name.trim().length > 0;
+    case 2:
+      return state.customization.menuId !== null;
+    case 3:
+      return !!state.customization.theme;
+    case 4:
+      // Review is the final step — there's no "next" beyond it. The
+      // modal's footer swaps Next for Create on this step; the actual
+      // gate for *firing* Create is composed there (`canCreate`).
+      return true;
     default:
       return false;
   }
@@ -8566,11 +8540,17 @@ var useWizardState = function useWizardState() {
 };
 
 var STEP_LABELS = [{
-  label: "Discover",
-  description: "Search & select"
+  label: "Name",
+  description: "Pick a name"
+}, {
+  label: "Folder",
+  description: "Where it lives"
+}, {
+  label: "Theme",
+  description: "How it looks"
 }, {
-  label: "Customize",
-  description: "Name, folder & theme"
+  label: "Review",
+  description: "Confirm & create"
 }];
 
 /**
@@ -8626,10 +8606,17 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
     if (!canProceed) return;
     nextStep();
   }, [canProceed, nextStep]);
-  var isLastStep = state.step === 1;
+  var isDiscover = state.step === 0;
+  var isLastStep = state.step === 4;
   var isCreating = (_createHandlerRef$cur = (_createHandlerRef$cur2 = createHandlerRef.current) === null || _createHandlerRef$cur2 === void 0 ? void 0 : _createHandlerRef$cur2.creating) !== null && _createHandlerRef$cur !== void 0 ? _createHandlerRef$cur : false;
   var isCreated = !!((_createHandlerRef$cur3 = createHandlerRef.current) !== null && _createHandlerRef$cur3 !== void 0 && _createHandlerRef$cur3.createdDashboard);
-  var canCreate = canProceed && !isCreating;
+  // Create only fires when every prior step has been validated. The
+  // Review step (canProceed=true by design) doesn't tell us whether
+  // Name/Folder/Theme were filled, so we re-check the underlying
+  // customization here — belt-and-suspenders for clicks that race
+  // the stepper.
+  var customizationComplete = state.customization.name.trim().length > 0 && state.customization.menuId !== null && !!state.customization.theme;
+  var canCreate = customizationComplete && !isCreating;
   return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal, {
     isOpen: open,
     setIsOpen: setIsOpen,
@@ -8661,43 +8648,43 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col flex-1 min-h-0 px-6 py-4",
-        children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.Stepper, {
-          activeStep: state.step,
-          onStepChange: handleStepChange,
+        children: [isDiscover ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1 min-h-0 overflow-y-auto",
+          children: /*#__PURE__*/jsxRuntime.jsx(WizardDiscoverStep, {
+            state: state,
+            dispatch: dispatch
+          })
+        }) : /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper, {
+          activeStep: state.step - 1,
+          onStepChange: function onStepChange(s) {
+            return handleStepChange(s + 1);
+          },
           showNavigation: false,
           className: "flex-1 min-h-0",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
-            label: STEP_LABELS[0].label,
-            description: STEP_LABELS[0].description,
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex-1 min-h-0 overflow-y-auto",
-              children: /*#__PURE__*/jsxRuntime.jsx(WizardDiscoverStep, {
-                state: state,
-                dispatch: dispatch
-              })
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
-            label: STEP_LABELS[1].label,
-            description: STEP_LABELS[1].description,
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex-1 min-h-0 overflow-y-auto",
-              children: /*#__PURE__*/jsxRuntime.jsx(WizardCustomizeStep, {
-                state: state,
-                dispatch: dispatch,
-                menuItems: menuItems,
-                onSaveMenuItem: onSaveMenuItem,
-                onCreateWorkspace: onCreateWorkspace,
-                onInstallDashboard: onInstallDashboard,
-                onOpenDashboard: function onOpenDashboard(ws) {
-                  handleClose();
-                  if (_onOpenDashboard) _onOpenDashboard(ws);
-                  if (onReloadWorkspaces) onReloadWorkspaces();
-                },
-                appId: appId,
-                createHandlerRef: createHandlerRef
+          children: STEP_LABELS.map(function (label) {
+            return /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+              label: label.label,
+              description: label.description,
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "flex-1 min-h-0 overflow-y-auto",
+                children: /*#__PURE__*/jsxRuntime.jsx(WizardCustomizeStep, {
+                  state: state,
+                  dispatch: dispatch,
+                  menuItems: menuItems,
+                  onSaveMenuItem: onSaveMenuItem,
+                  onCreateWorkspace: onCreateWorkspace,
+                  onInstallDashboard: onInstallDashboard,
+                  onOpenDashboard: function onOpenDashboard(ws) {
+                    handleClose();
+                    if (_onOpenDashboard) _onOpenDashboard(ws);
+                    if (onReloadWorkspaces) onReloadWorkspaces();
+                  },
+                  appId: appId,
+                  createHandlerRef: createHandlerRef
+                })
               })
-            })
-          })]
+            }, label.label);
+          })
         }), !isCreated && /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex flex-row justify-between items-center pt-4 mt-4 border-t border-gray-700/50",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
@@ -8709,9 +8696,9 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
             textColor: "text-gray-300",
             hoverTextColor: "hover:text-white",
             hoverBackgroundColor: "hover:bg-gray-600"
-          }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
             className: "text-xs text-gray-500",
-            children: ["Step ", state.step + 1, " of ", STEP_LABELS.length]
+            children: isDiscover ? "Browse" : "Step ".concat(state.step, " of ").concat(STEP_LABELS.length)
           }), isLastStep ? /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
             onClick: function onClick() {
               var _createHandlerRef$cur4, _createHandlerRef$cur5;