@trops/dash-core 0.1.225 → 0.1.226

package/dist/index.js

@@ -5897,6 +5897,29 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
       payload: prov
     });
   }, [dispatch]);
+
+  // Tab state (DASH-185)
+  var _useState = React.useState("dashboards"),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+
+  // Clear selection handler (DASH-186)
+  var hasSelection = state.selectedDashboard !== null || state.selectedWidgets.length > 0;
+  var handleClearSelection = React.useCallback(function () {
+    dispatch({
+      type: "SET_SELECTED_DASHBOARD",
+      payload: null
+    });
+    dispatch({
+      type: "SET_SELECTED_WIDGETS",
+      payload: []
+    });
+    dispatch({
+      type: "SET_PATH",
+      payload: null
+    });
+  }, [dispatch]);
   var hasResults = filteredDashboards.length > 0 || filteredWidgets.length > 0;
   var hasActiveFilters = filters.categories.length > 0 || filters.providers.length > 0;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -5942,8 +5965,43 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
           })
         })]
       })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-between",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-1",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
+          type: "button",
+          className: "px-4 py-2 text-sm font-medium rounded-t transition-colors ".concat(activeTab === "dashboards" ? "bg-gray-800 text-blue-400 border-b-2 border-blue-400" : "text-gray-400 hover:text-gray-200"),
+          onClick: function onClick() {
+            return setActiveTab("dashboards");
+          },
+          children: ["Dashboards (", filteredDashboards.length, ")"]
+        }), /*#__PURE__*/jsxRuntime.jsxs("button", {
+          type: "button",
+          className: "px-4 py-2 text-sm font-medium rounded-t transition-colors ".concat(activeTab === "widgets" ? "bg-gray-800 text-blue-400 border-b-2 border-blue-400" : "text-gray-400 hover:text-gray-200"),
+          onClick: function onClick() {
+            return setActiveTab("widgets");
+          },
+          children: ["Widgets (", filteredWidgets.length, ")", state.selectedWidgets.length > 0 && /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "ml-1.5",
+            children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag3, {
+              text: "".concat(state.selectedWidgets.length, " selected")
+            })
+          })]
+        })]
+      }), hasSelection && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        onClick: handleClearSelection,
+        title: "Clear Selection",
+        textSize: "text-xs",
+        padding: "py-1 px-3",
+        backgroundColor: "bg-gray-700",
+        textColor: "text-gray-400",
+        hoverTextColor: "hover:text-white",
+        hoverBackgroundColor: "hover:bg-gray-600",
+        icon: "xmark"
+      })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex flex-col gap-6 mt-2",
+      className: "flex flex-col gap-6",
       children: isLoading ? /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-400",
         children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
@@ -5973,12 +6031,9 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
           children: "Try removing some filters to see more results."
         })]
       }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [filteredDashboards.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [activeTab === "dashboards" && filteredDashboards.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-col gap-3",
-          children: [/*#__PURE__*/jsxRuntime.jsxs("h4", {
-            className: "text-sm font-semibold text-gray-300 flex items-center gap-2",
-            children: ["Dashboards (", filteredDashboards.length, " result", filteredDashboards.length !== 1 ? "s" : "", ")"]
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
             className: "grid grid-cols-3 gap-3",
             children: filteredDashboards.map(function (dash) {
               var isSelected = state.selectedDashboard && state.selectedDashboard.name === dash.name;
@@ -6034,15 +6089,18 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
                 })]
               }, dash.name);
             })
+          })
+        }), activeTab === "dashboards" && filteredDashboards.length === 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "grid-2",
+            fixedWidth: true
+          }), /*#__PURE__*/jsxRuntime.jsx("p", {
+            children: "No dashboards match your search."
           })]
-        }), filteredWidgets.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        }), activeTab === "widgets" && filteredWidgets.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-col gap-3",
-          children: [/*#__PURE__*/jsxRuntime.jsxs("h4", {
-            className: "text-sm font-semibold text-gray-300 flex items-center gap-2",
-            children: ["Widgets (", filteredWidgets.length, " result", filteredWidgets.length !== 1 ? "s" : "", ")", state.selectedWidgets.length > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag3, {
-              text: "".concat(state.selectedWidgets.length, " selected")
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
             className: "grid grid-cols-3 gap-3",
             children: filteredWidgets.map(function (widget) {
               var checked = isWidgetSelected(widget);
@@ -6081,6 +6139,14 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
                 })]
               }, widget.key);
             })
+          })
+        }), activeTab === "widgets" && filteredWidgets.length === 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "puzzle-piece",
+            fixedWidth: true
+          }), /*#__PURE__*/jsxRuntime.jsx("p", {
+            children: "No widgets match your search."
           })]
         })]
       })
@@ -6118,442 +6184,6 @@ function applyFilters(items, filters, mode) {
 
 function ownKeys$B(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$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var TOTAL_STEPS = 3; // Steps 0-2: Discover, Layout, Customize
-
-var initialState = {
-  step: 0,
-  filters: {
-    categories: [],
-    providers: [],
-    query: ""
-  },
-  selectedWidgets: [],
-  selectedDashboard: null,
-  layout: {
-    templateKey: null,
-    widgetOrder: []
-  },
-  customization: {
-    name: "",
-    menuId: null,
-    theme: null
-  },
-  path: null
-};
-function wizardReducer(state, action) {
-  switch (action.type) {
-    case "SET_STEP":
-      return _objectSpread$B(_objectSpread$B({}, state), {}, {
-        step: action.payload
-      });
-    case "SET_FILTERS":
-      return _objectSpread$B(_objectSpread$B({}, state), {}, {
-        filters: _objectSpread$B(_objectSpread$B({}, state.filters), action.payload)
-      });
-    case "TOGGLE_FILTER_CATEGORY":
-      {
-        var categories = state.filters.categories.includes(action.payload) ? state.filters.categories.filter(function (c) {
-          return c !== action.payload;
-        }) : [].concat(_toConsumableArray(state.filters.categories), [action.payload]);
-        return _objectSpread$B(_objectSpread$B({}, state), {}, {
-          filters: _objectSpread$B(_objectSpread$B({}, state.filters), {}, {
-            categories: categories
-          })
-        });
-      }
-    case "TOGGLE_FILTER_PROVIDER":
-      {
-        var providers = state.filters.providers.includes(action.payload) ? state.filters.providers.filter(function (p) {
-          return p !== action.payload;
-        }) : [].concat(_toConsumableArray(state.filters.providers), [action.payload]);
-        return _objectSpread$B(_objectSpread$B({}, state), {}, {
-          filters: _objectSpread$B(_objectSpread$B({}, state.filters), {}, {
-            providers: providers
-          })
-        });
-      }
-    case "SET_SEARCH_QUERY":
-      return _objectSpread$B(_objectSpread$B({}, state), {}, {
-        filters: _objectSpread$B(_objectSpread$B({}, state.filters), {}, {
-          query: action.payload
-        })
-      });
-    case "SET_SELECTED_WIDGETS":
-      return _objectSpread$B(_objectSpread$B({}, state), {}, {
-        selectedWidgets: action.payload
-      });
-    case "TOGGLE_WIDGET":
-      {
-        var exists = state.selectedWidgets.some(function (w) {
-          return w.name === action.payload.name;
-        });
-        var selectedWidgets = exists ? state.selectedWidgets.filter(function (w) {
-          return w.name !== action.payload.name;
-        }) : [].concat(_toConsumableArray(state.selectedWidgets), [action.payload]);
-        return _objectSpread$B(_objectSpread$B({}, state), {}, {
-          selectedWidgets: selectedWidgets
-        });
-      }
-    case "SET_SELECTED_DASHBOARD":
-      return _objectSpread$B(_objectSpread$B({}, state), {}, {
-        selectedDashboard: action.payload
-      });
-    case "SET_PATH":
-      return _objectSpread$B(_objectSpread$B({}, state), {}, {
-        path: action.payload
-      });
-    case "SET_LAYOUT":
-      return _objectSpread$B(_objectSpread$B({}, state), {}, {
-        layout: action.payload
-      });
-    case "REORDER_WIDGETS":
-      return _objectSpread$B(_objectSpread$B({}, state), {}, {
-        layout: _objectSpread$B(_objectSpread$B({}, state.layout), {}, {
-          widgetOrder: action.payload
-        })
-      });
-    case "SET_CUSTOMIZATION":
-      return _objectSpread$B(_objectSpread$B({}, state), {}, {
-        customization: _objectSpread$B(_objectSpread$B({}, state.customization), action.payload)
-      });
-    case "RESET":
-      return _objectSpread$B({}, initialState);
-    default:
-      return state;
-  }
-}
-function widgetCountToTemplate(count) {
-  if (count <= 1) return "single";
-  if (count === 2) return "two-columns";
-  if (count === 3) return "three-columns";
-  if (count === 4) return "two-by-two";
-  if (count <= 6) return "two-by-three";
-  return "three-by-three";
-}
-function getCanProceed(state) {
-  switch (state.step) {
-    case 0:
-      return state.selectedDashboard !== null || state.selectedWidgets.length > 0;
-    case 1:
-      return state.layout.templateKey !== null;
-    case 2:
-      return state.customization.name.trim().length > 0;
-    default:
-      return false;
-  }
-}
-var useWizardState = function useWizardState() {
-  var _useReducer = React.useReducer(wizardReducer, initialState),
-    _useReducer2 = _slicedToArray(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
-  var canProceed = React.useMemo(function () {
-    return getCanProceed(state);
-  }, [state]);
-  var selectedCount = React.useMemo(function () {
-    return state.selectedWidgets.length;
-  }, [state.selectedWidgets]);
-  var isPrebuiltPath = state.path === "prebuilt";
-  var isCustomPath = state.path === "custom";
-  var nextStep = React.useCallback(function () {
-    if (getCanProceed(state) && state.step < TOTAL_STEPS - 1) {
-      dispatch({
-        type: "SET_STEP",
-        payload: state.step + 1
-      });
-    }
-  }, [state]);
-  var prevStep = React.useCallback(function () {
-    if (state.step > 0) {
-      dispatch({
-        type: "SET_STEP",
-        payload: state.step - 1
-      });
-    }
-  }, [state.step]);
-  var goToStep = React.useCallback(function (n) {
-    if (n >= 0 && n < TOTAL_STEPS) {
-      dispatch({
-        type: "SET_STEP",
-        payload: n
-      });
-    }
-  }, []);
-  return {
-    state: state,
-    dispatch: dispatch,
-    nextStep: nextStep,
-    prevStep: prevStep,
-    goToStep: goToStep,
-    canProceed: canProceed,
-    selectedCount: selectedCount,
-    isPrebuiltPath: isPrebuiltPath,
-    isCustomPath: isCustomPath,
-    widgetCountToTemplate: widgetCountToTemplate
-  };
-};
-
-var WizardLayoutPreviewStep = function WizardLayoutPreviewStep(_ref) {
-  var state = _ref.state,
-    dispatch = _ref.dispatch;
-  var isPrebuilt = state.path === "prebuilt";
-
-  // Auto-select template and populate widget order on mount / widget change
-  React.useEffect(function () {
-    if (isPrebuilt) return;
-    var templateKey = widgetCountToTemplate(state.selectedWidgets.length);
-    var template = layoutTemplates.find(function (t) {
-      return t.id === templateKey;
-    });
-    if (!template) return;
-
-    // Only update if template changed or widget order is empty
-    if (state.layout.templateKey !== templateKey || state.layout.widgetOrder.length === 0) {
-      var widgetOrder = state.selectedWidgets.map(function (w) {
-        return w.name || w.key;
-      });
-      dispatch({
-        type: "SET_LAYOUT",
-        payload: {
-          templateKey: templateKey,
-          widgetOrder: widgetOrder
-        }
-      });
-    }
-  }, [isPrebuilt, state.selectedWidgets, state.layout.templateKey, state.layout.widgetOrder.length, dispatch]);
-  if (isPrebuilt) {
-    return /*#__PURE__*/jsxRuntime.jsx(PrebuiltPreview, {
-      dashboard: state.selectedDashboard
-    });
-  }
-  var template = layoutTemplates.find(function (t) {
-    return t.id === state.layout.templateKey;
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-4",
-    children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
-      className: "text-lg font-semibold text-gray-200",
-      children: "Preview your layout"
-    }), /*#__PURE__*/jsxRuntime.jsx("p", {
-      className: "text-sm text-gray-400",
-      children: "Drag widgets to rearrange their placement in the grid."
-    }), template ? /*#__PURE__*/jsxRuntime.jsx(LayoutGrid, {
-      template: template,
-      widgetOrder: state.layout.widgetOrder,
-      widgets: state.selectedWidgets,
-      dispatch: dispatch
-    }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-        icon: "grid-2",
-        fixedWidth: true
-      }), /*#__PURE__*/jsxRuntime.jsx("p", {
-        children: "No layout template available."
-      })]
-    })]
-  });
-};
-
-// --- Pre-built dashboard preview ---
-
-var PrebuiltPreview = function PrebuiltPreview(_ref2) {
-  var dashboard = _ref2.dashboard;
-  if (!dashboard) {
-    return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col gap-4",
-      children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
-        className: "text-lg font-semibold text-gray-200",
-        children: "Dashboard preview"
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "box-open",
-          fixedWidth: true
-        }), /*#__PURE__*/jsxRuntime.jsx("p", {
-          children: "No dashboard selected."
-        })]
-      })]
-    });
-  }
-  var widgets = dashboard.widgets || [];
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-4",
-    children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
-      className: "text-lg font-semibold text-gray-200",
-      children: "Dashboard preview"
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "rounded-lg border border-gray-700/50 bg-gray-800/50 p-4 flex flex-col gap-3",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center gap-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: resolveIcon(dashboard.icon || "grid-2"),
-          fixedWidth: true,
-          className: "text-blue-400"
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-base font-semibold text-gray-200",
-          children: dashboard.displayName || dashboard.name
-        })]
-      }), dashboard.description && /*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "text-sm text-gray-400",
-        children: dashboard.description
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col gap-1.5",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-          className: "text-xs font-semibold text-gray-400 uppercase tracking-wide",
-          children: ["Includes ", widgets.length, " widget", widgets.length !== 1 ? "s" : "", ":"]
-        }), /*#__PURE__*/jsxRuntime.jsx("ul", {
-          className: "flex flex-col gap-1",
-          children: widgets.map(function (w, i) {
-            return /*#__PURE__*/jsxRuntime.jsxs("li", {
-              className: "flex items-center gap-2 text-sm text-gray-300",
-              children: [w.icon && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: resolveIcon(w.icon),
-                fixedWidth: true,
-                className: "text-gray-500 text-xs"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                children: w.displayName || w.name
-              })]
-            }, w.name || i);
-          })
-        })]
-      })]
-    })]
-  });
-};
-
-// --- Drag-reorder grid ---
-
-var LayoutGrid = function LayoutGrid(_ref3) {
-  var template = _ref3.template,
-    widgetOrder = _ref3.widgetOrder,
-    widgets = _ref3.widgets,
-    dispatch = _ref3.dispatch;
-  var _useState = React.useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    dragIndex = _useState2[0],
-    setDragIndex = _useState2[1];
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dragOverIndex = _useState4[0],
-    setDragOverIndex = _useState4[1];
-  var dragRef = React.useRef(null);
-  var totalCells = template.previewCells.length;
-
-  // Build cell contents: widget names for filled cells, null for empty
-  var cellContents = template.previewCells.map(function (_, i) {
-    var widgetId = widgetOrder[i] || null;
-    if (!widgetId) return null;
-    var widget = widgets.find(function (w) {
-      return (w.name || w.key) === widgetId;
-    });
-    return widget || {
-      name: widgetId
-    };
-  });
-  var handleDragStart = React.useCallback(function (e, index) {
-    setDragIndex(index);
-    dragRef.current = index;
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/plain", String(index));
-  }, []);
-  var handleDragOver = React.useCallback(function (e, index) {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    setDragOverIndex(index);
-  }, []);
-  var handleDragLeave = React.useCallback(function () {
-    setDragOverIndex(null);
-  }, []);
-  var handleDrop = React.useCallback(function (e, dropIndex) {
-    e.preventDefault();
-    var fromIndex = dragRef.current;
-    setDragIndex(null);
-    setDragOverIndex(null);
-    dragRef.current = null;
-    if (fromIndex === null || fromIndex === dropIndex) return;
-
-    // Swap the two positions in widgetOrder
-    var newOrder = _toConsumableArray(widgetOrder);
-    // Pad array to cover all cells
-    while (newOrder.length < totalCells) {
-      newOrder.push(null);
-    }
-    var temp = newOrder[fromIndex];
-    newOrder[fromIndex] = newOrder[dropIndex];
-    newOrder[dropIndex] = temp;
-
-    // Trim trailing nulls
-    while (newOrder.length > 0 && newOrder[newOrder.length - 1] === null) {
-      newOrder.pop();
-    }
-    dispatch({
-      type: "REORDER_WIDGETS",
-      payload: newOrder
-    });
-  }, [widgetOrder, totalCells, dispatch]);
-  var handleDragEnd = React.useCallback(function () {
-    setDragIndex(null);
-    setDragOverIndex(null);
-    dragRef.current = null;
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "gap-3 p-4",
-    style: {
-      display: "grid",
-      gridTemplateRows: "repeat(".concat(template.rows, ", 1fr)"),
-      gridTemplateColumns: "repeat(".concat(template.cols, ", 1fr)")
-    },
-    children: template.previewCells.map(function (cell, i) {
-      var content = cellContents[i];
-      var isDragging = dragIndex === i;
-      var isDragOver = dragOverIndex === i;
-      var hasWidget = content !== null;
-      var cellStyle = {};
-      if (cell.rowSpan) cellStyle.gridRow = "span ".concat(cell.rowSpan);
-      if (cell.colSpan) cellStyle.gridColumn = "span ".concat(cell.colSpan);
-      var cellClasses = ["rounded-lg border transition-all flex items-center justify-center min-h-[60px]", hasWidget ? "border-gray-600 bg-gray-800/80 cursor-grab" : "border-dashed border-gray-700 bg-gray-800/30", isDragging ? "opacity-50 scale-95" : "", isDragOver ? "ring-2 ring-blue-400 border-blue-400" : ""].filter(Boolean).join(" ");
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: cellClasses,
-        style: cellStyle,
-        draggable: hasWidget,
-        onDragStart: hasWidget ? function (e) {
-          return handleDragStart(e, i);
-        } : undefined,
-        onDragOver: function onDragOver(e) {
-          return handleDragOver(e, i);
-        },
-        onDragLeave: handleDragLeave,
-        onDrop: function onDrop(e) {
-          return handleDrop(e, i);
-        },
-        onDragEnd: handleDragEnd,
-        children: hasWidget ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-300",
-          children: [content.icon && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: resolveIcon(content.icon),
-            fixedWidth: true,
-            className: "text-gray-400 text-xs"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "truncate",
-            children: content.displayName || content.name || content.key
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "grip-vertical",
-            className: "text-gray-600 ml-auto"
-          })]
-        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-gray-600",
-          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "plus",
-            fixedWidth: true
-          })
-        })
-      }, "".concat(cell.row, "-").concat(cell.col));
-    })
-  });
-};
-
-function ownKeys$A(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$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
   var _state$selectedDashbo, _state$selectedDashbo2;
   var state = _ref.state,
@@ -6568,7 +6198,9 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
     onInstallDashboard = _ref$onInstallDashboa === void 0 ? null : _ref$onInstallDashboa,
     _ref$onOpenDashboard = _ref.onOpenDashboard,
     onOpenDashboard = _ref$onOpenDashboard === void 0 ? null : _ref$onOpenDashboard,
-    appId = _ref.appId;
+    appId = _ref.appId,
+    _ref$createHandlerRef = _ref.createHandlerRef,
+    createHandlerRef = _ref$createHandlerRef === void 0 ? null : _ref$createHandlerRef;
   var _useContext = React.useContext(DashReact.ThemeContext),
     themes = _useContext.themes,
     appThemeKey = _useContext.themeKey;
@@ -6593,9 +6225,9 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
 
   // Creation state
   var _useState9 = React.useState(false),
-    _useState0 = _slicedToArray(_useState9, 2);
-    _useState0[0];
-    var setCreating = _useState0[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    creating = _useState0[0],
+    setCreating = _useState0[1];
   var _useState1 = React.useState(null),
     _useState10 = _slicedToArray(_useState1, 2),
     error = _useState10[0],
@@ -6604,9 +6236,15 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     createdDashboard = _useState12[0],
     setCreatedDashboard = _useState12[1];
+
+  // Sub-step state (DASH-188): 0 = Name, 1 = Folder, 2 = Theme
+  var _useState13 = React.useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    subStep = _useState14[0],
+    setSubStep = _useState14[1];
   var isPrebuilt = state.path === "prebuilt";
 
-  // Initialize customization defaults on mount
+  // Initialize customization defaults when stepping into this step
   React.useEffect(function () {
     setLocalMenuItems(menuItems);
     var updates = {};
@@ -6624,6 +6262,10 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
       })[0]) === null || _Object$entries$sort$ === void 0 ? void 0 : _Object$entries$sort$[0];
       updates.theme = appThemeKey || fallback || null;
     }
+    // Auto-populate name from selected dashboard (DASH-184)
+    if (!state.customization.name && state.selectedDashboard) {
+      updates.name = state.selectedDashboard.displayName || state.selectedDashboard.name || "";
+    }
     if (Object.keys(updates).length > 0) {
       dispatch({
         type: "SET_CUSTOMIZATION",
@@ -6631,7 +6273,17 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [state.step, state.selectedDashboard]);
+
+  // Expose handleCreate and creating state to parent via ref (DASH-183)
+  React.useEffect(function () {
+    if (createHandlerRef) {
+      createHandlerRef.current = {
+        handleCreate: handleCreate,
+        creating: creating
+      };
+    }
+  }, [createHandlerRef, handleCreate, creating]);
   var handleNameChange = React.useCallback(function (val) {
     dispatch({
       type: "SET_CUSTOMIZATION",
@@ -6650,6 +6302,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
     setIsCreatingFolder(false);
     setNewFolderName("");
     setNewFolderIcon(null);
+    setSubStep(2); // Auto-advance to Theme
   }, [dispatch]);
   var handleThemeSelect = React.useCallback(function (key) {
     dispatch({
@@ -6689,7 +6342,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
   }
 
   // --- Create logic ---
-  React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var handleCreate = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _state$customization, name, menuId, theme, result, _window$mainApi, installResult, updatedWorkspace, _window$mainApi2, template, layoutObj, widgetOrder, cells, _loop, i, workspace, _t;
     return _regeneratorRuntime.wrap(function (_context2) {
       while (1) switch (_context2.prev = _context2.next) {
@@ -6731,7 +6384,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
             _context2.next = 6;
             break;
           }
-          updatedWorkspace = _objectSpread$A(_objectSpread$A({}, installResult.workspace), {}, {
+          updatedWorkspace = _objectSpread$B(_objectSpread$B({}, installResult.workspace), {}, {
             name: name.trim(),
             menuId: menuId || 1,
             themeKey: theme
@@ -6894,18 +6547,44 @@ 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", {
       className: "text-lg font-semibold text-gray-200",
       children: "Customize your dashboard"
-    }), /*#__PURE__*/jsxRuntime.jsx("p", {
-      className: "text-sm text-gray-400",
-      children: "Name your dashboard, choose a folder, and pick a theme."
+    }), /*#__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);
+      })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col gap-6",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col gap-2",
+      children: [subStep === 0 && /*#__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, {
@@ -6917,9 +6596,25 @@ 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"
+          })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col gap-2",
+      }), subStep === 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",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
@@ -7011,8 +6706,8 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
             }, item.id);
           })]
         })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col gap-2",
+      }), subStep === 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",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
@@ -7159,12 +6854,202 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
   });
 };
 
+function ownKeys$A(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$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(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 initialState = {
+  step: 0,
+  filters: {
+    categories: [],
+    providers: [],
+    query: ""
+  },
+  selectedWidgets: [],
+  selectedDashboard: null,
+  layout: {
+    templateKey: null,
+    widgetOrder: []
+  },
+  customization: {
+    name: "",
+    menuId: null,
+    theme: null
+  },
+  path: null
+};
+function wizardReducer(state, action) {
+  switch (action.type) {
+    case "SET_STEP":
+      return _objectSpread$A(_objectSpread$A({}, state), {}, {
+        step: action.payload
+      });
+    case "SET_FILTERS":
+      return _objectSpread$A(_objectSpread$A({}, state), {}, {
+        filters: _objectSpread$A(_objectSpread$A({}, state.filters), action.payload)
+      });
+    case "TOGGLE_FILTER_CATEGORY":
+      {
+        var categories = state.filters.categories.includes(action.payload) ? state.filters.categories.filter(function (c) {
+          return c !== action.payload;
+        }) : [].concat(_toConsumableArray(state.filters.categories), [action.payload]);
+        return _objectSpread$A(_objectSpread$A({}, state), {}, {
+          filters: _objectSpread$A(_objectSpread$A({}, state.filters), {}, {
+            categories: categories
+          })
+        });
+      }
+    case "TOGGLE_FILTER_PROVIDER":
+      {
+        var providers = state.filters.providers.includes(action.payload) ? state.filters.providers.filter(function (p) {
+          return p !== action.payload;
+        }) : [].concat(_toConsumableArray(state.filters.providers), [action.payload]);
+        return _objectSpread$A(_objectSpread$A({}, state), {}, {
+          filters: _objectSpread$A(_objectSpread$A({}, state.filters), {}, {
+            providers: providers
+          })
+        });
+      }
+    case "SET_SEARCH_QUERY":
+      return _objectSpread$A(_objectSpread$A({}, state), {}, {
+        filters: _objectSpread$A(_objectSpread$A({}, state.filters), {}, {
+          query: action.payload
+        })
+      });
+    case "SET_SELECTED_WIDGETS":
+      {
+        var templateKey = widgetCountToTemplate(action.payload.length);
+        var widgetOrder = action.payload.map(function (w) {
+          return w.name || w.key;
+        });
+        return _objectSpread$A(_objectSpread$A({}, state), {}, {
+          selectedWidgets: action.payload,
+          layout: {
+            templateKey: templateKey,
+            widgetOrder: widgetOrder
+          }
+        });
+      }
+    case "TOGGLE_WIDGET":
+      {
+        var exists = state.selectedWidgets.some(function (w) {
+          return w.name === action.payload.name;
+        });
+        var selectedWidgets = exists ? state.selectedWidgets.filter(function (w) {
+          return w.name !== action.payload.name;
+        }) : [].concat(_toConsumableArray(state.selectedWidgets), [action.payload]);
+        var toggleTemplateKey = widgetCountToTemplate(selectedWidgets.length);
+        var toggleWidgetOrder = selectedWidgets.map(function (w) {
+          return w.name || w.key;
+        });
+        return _objectSpread$A(_objectSpread$A({}, state), {}, {
+          selectedWidgets: selectedWidgets,
+          layout: {
+            templateKey: toggleTemplateKey,
+            widgetOrder: toggleWidgetOrder
+          }
+        });
+      }
+    case "SET_SELECTED_DASHBOARD":
+      return _objectSpread$A(_objectSpread$A({}, state), {}, {
+        selectedDashboard: action.payload
+      });
+    case "SET_PATH":
+      return _objectSpread$A(_objectSpread$A({}, state), {}, {
+        path: action.payload
+      });
+    case "SET_LAYOUT":
+      return _objectSpread$A(_objectSpread$A({}, state), {}, {
+        layout: action.payload
+      });
+    case "REORDER_WIDGETS":
+      return _objectSpread$A(_objectSpread$A({}, state), {}, {
+        layout: _objectSpread$A(_objectSpread$A({}, state.layout), {}, {
+          widgetOrder: action.payload
+        })
+      });
+    case "SET_CUSTOMIZATION":
+      return _objectSpread$A(_objectSpread$A({}, state), {}, {
+        customization: _objectSpread$A(_objectSpread$A({}, state.customization), action.payload)
+      });
+    case "RESET":
+      return _objectSpread$A({}, initialState);
+    default:
+      return state;
+  }
+}
+function widgetCountToTemplate(count) {
+  if (count <= 1) return "single";
+  if (count === 2) return "two-columns";
+  if (count === 3) return "three-columns";
+  if (count === 4) return "two-by-two";
+  if (count <= 6) return "two-by-three";
+  return "three-by-three";
+}
+function getCanProceed(state) {
+  switch (state.step) {
+    case 0:
+      return state.selectedDashboard !== null || state.selectedWidgets.length > 0;
+    case 1:
+      return state.customization.name.trim().length > 0;
+    default:
+      return false;
+  }
+}
+var useWizardState = function useWizardState() {
+  var _useReducer = React.useReducer(wizardReducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var canProceed = React.useMemo(function () {
+    return getCanProceed(state);
+  }, [state]);
+  var selectedCount = React.useMemo(function () {
+    return state.selectedWidgets.length;
+  }, [state.selectedWidgets]);
+  var isPrebuiltPath = state.path === "prebuilt";
+  var isCustomPath = state.path === "custom";
+  var nextStep = React.useCallback(function () {
+    if (getCanProceed(state) && state.step < TOTAL_STEPS - 1) {
+      dispatch({
+        type: "SET_STEP",
+        payload: state.step + 1
+      });
+    }
+  }, [state]);
+  var prevStep = React.useCallback(function () {
+    if (state.step > 0) {
+      dispatch({
+        type: "SET_STEP",
+        payload: state.step - 1
+      });
+    }
+  }, [state.step]);
+  var goToStep = React.useCallback(function (n) {
+    if (n >= 0 && n < TOTAL_STEPS) {
+      dispatch({
+        type: "SET_STEP",
+        payload: n
+      });
+    }
+  }, []);
+  return {
+    state: state,
+    dispatch: dispatch,
+    nextStep: nextStep,
+    prevStep: prevStep,
+    goToStep: goToStep,
+    canProceed: canProceed,
+    selectedCount: selectedCount,
+    isPrebuiltPath: isPrebuiltPath,
+    isCustomPath: isCustomPath,
+    widgetCountToTemplate: widgetCountToTemplate
+  };
+};
+
 var STEP_LABELS = [{
   label: "Discover",
   description: "Search & select"
-}, {
-  label: "Layout",
-  description: "Arrange your widgets"
 }, {
   label: "Customize",
   description: "Name, folder & theme"
@@ -7178,6 +7063,7 @@ var STEP_LABELS = [{
  * Resets wizard state cleanly on close.
  */
 var DashboardWizardModal = function DashboardWizardModal(_ref) {
+  var _createHandlerRef$cur, _createHandlerRef$cur2;
   var open = _ref.open,
     setIsOpen = _ref.setIsOpen,
     _ref$menuItems = _ref.menuItems,
@@ -7193,14 +7079,13 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
     _ref$onReloadWorkspac = _ref.onReloadWorkspaces,
     onReloadWorkspaces = _ref$onReloadWorkspac === void 0 ? null : _ref$onReloadWorkspac,
     appId = _ref.appId;
+  var createHandlerRef = React.useRef(null);
   var _useWizardState = useWizardState(),
     state = _useWizardState.state,
     dispatch = _useWizardState.dispatch,
     nextStep = _useWizardState.nextStep,
     prevStep = _useWizardState.prevStep,
-    goToStep = _useWizardState.goToStep,
-    canProceed = _useWizardState.canProceed,
-    isPrebuiltPath = _useWizardState.isPrebuiltPath;
+    canProceed = _useWizardState.canProceed;
 
   // Reset wizard state when modal opens
   React.useEffect(function () {
@@ -7216,30 +7101,16 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
   var handleStepChange = React.useCallback(function (newStep) {
     // Stepper only allows going backwards; forward is via Next button
     if (newStep < state.step) {
-      goToStep(newStep);
+      prevStep();
     }
-  }, [state.step, goToStep]);
-
-  // Skip layout step for prebuilt path
+  }, [state.step, prevStep]);
   var handleNext = React.useCallback(function () {
     if (!canProceed) return;
-    if (state.step === 0 && isPrebuiltPath) {
-      // Skip layout step (1), go straight to customize (2)
-      goToStep(2);
-    } else {
-      nextStep();
-    }
-  }, [canProceed, state.step, isPrebuiltPath, goToStep, nextStep]);
-  var handleBack = React.useCallback(function () {
-    if (state.step === 2 && isPrebuiltPath) {
-      // Skip back over layout step (1), go to discover (0)
-      goToStep(0);
-    } else {
-      prevStep();
-    }
-  }, [state.step, isPrebuiltPath, goToStep, prevStep]);
-  var isLastStep = state.step === 2;
-  state.step === 2 && state._created;
+    nextStep();
+  }, [canProceed, nextStep]);
+  var isLastStep = state.step === 1;
+  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 canCreate = canProceed && !isCreating;
   return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal, {
     isOpen: open,
     setIsOpen: setIsOpen,
@@ -7289,16 +7160,6 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
           }), /*#__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(WizardLayoutPreviewStep, {
-                state: state,
-                dispatch: dispatch
-              })
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
-            label: STEP_LABELS[2].label,
-            description: STEP_LABELS[2].description,
             children: /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "flex-1 min-h-0 overflow-y-auto",
               children: /*#__PURE__*/jsxRuntime.jsx(WizardCustomizeStep, {
@@ -7313,14 +7174,15 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
                   if (_onOpenDashboard) _onOpenDashboard(ws);
                   if (onReloadWorkspaces) onReloadWorkspaces();
                 },
-                appId: appId
+                appId: appId,
+                createHandlerRef: createHandlerRef
               })
             })
           })]
         }), /*#__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, {
-            onClick: state.step === 0 ? handleClose : handleBack,
+            onClick: state.step === 0 ? handleClose : prevStep,
             title: state.step === 0 ? "Cancel" : "Back",
             textSize: "text-sm",
             padding: "py-2 px-4",
@@ -7331,7 +7193,21 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
           }), /*#__PURE__*/jsxRuntime.jsxs("span", {
             className: "text-xs text-gray-500",
             children: ["Step ", state.step + 1, " of ", STEP_LABELS.length]
-          }), !isLastStep ? /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          }), isLastStep ? /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+            onClick: function onClick() {
+              var _createHandlerRef$cur3, _createHandlerRef$cur4;
+              return (_createHandlerRef$cur3 = createHandlerRef.current) === null || _createHandlerRef$cur3 === void 0 || (_createHandlerRef$cur4 = _createHandlerRef$cur3.handleCreate) === null || _createHandlerRef$cur4 === void 0 ? void 0 : _createHandlerRef$cur4.call(_createHandlerRef$cur3);
+            },
+            title: isCreating ? "Creating..." : "Create Dashboard",
+            textSize: "text-sm",
+            padding: "py-2 px-4",
+            backgroundColor: canCreate ? "bg-green-600" : "bg-gray-700",
+            textColor: canCreate ? "text-white" : "text-gray-500",
+            hoverTextColor: canCreate ? "hover:text-white" : "hover:text-gray-500",
+            hoverBackgroundColor: canCreate ? "hover:bg-green-500" : "hover:bg-gray-700",
+            disabled: !canCreate,
+            icon: isCreating ? "spinner" : "plus"
+          }) : /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
             onClick: handleNext,
             title: "Next",
             textSize: "text-sm",
@@ -7342,7 +7218,7 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
             hoverBackgroundColor: canProceed ? "hover:bg-blue-500" : "hover:bg-gray-700",
             disabled: !canProceed,
             icon: "arrow-right"
-          }) : /*#__PURE__*/jsxRuntime.jsx("div", {})]
+          })]
         })]
       })]
     })
@@ -50441,7 +50317,6 @@ exports.WidgetProviderWrapper = WidgetProviderWrapper;
 exports.WidgetSidebar = WidgetSidebar;
 exports.WizardCustomizeStep = WizardCustomizeStep;
 exports.WizardDiscoverStep = WizardDiscoverStep;
-exports.WizardLayoutPreviewStep = WizardLayoutPreviewStep;
 exports.Workspace = Workspace;
 exports.WorkspaceContext = WorkspaceContext;
 exports.WorkspaceFooter = WorkspaceFooter;