@trops/dash-core 0.1.94 → 0.1.96

package/dist/index.js

@@ -3080,7 +3080,7 @@ var LayoutManagerPicker = function LayoutManagerPicker(_ref2) {
   });
 };
 
-var FOLDER_ICONS = [
+var FOLDER_ICONS$1 = [
 // General / UI
 "home", "folder", "star", "heart", "bookmark", "tag", "flag", "bell", "circle", "square", "circle-check", "thumbs-up", "clone", "signal",
 // Communication
@@ -3103,7 +3103,7 @@ var FOLDER_ICONS = [
 "file", "file-code", "clipboard", "book", "pen", "pencil",
 // Misc
 "magnifying-glass", "eye", "lock", "key", "shield", "clock", "calendar", "link"];
-var ALL_ICON_NAMES = Object.keys(DashReact__namespace).filter(function (key) {
+var ALL_ICON_NAMES$1 = Object.keys(DashReact__namespace).filter(function (key) {
   return key.startsWith("fa") && key !== "fas";
 }).map(function (key) {
   var _DashReact$key;
@@ -3111,8 +3111,8 @@ var ALL_ICON_NAMES = Object.keys(DashReact__namespace).filter(function (key) {
 }).filter(Boolean).filter(function (name, index, arr) {
   return arr.indexOf(name) === index;
 }).sort();
-var CURATED_SET = new Set(FOLDER_ICONS);
-var IconPicker = function IconPicker(_ref) {
+var CURATED_SET$1 = new Set(FOLDER_ICONS$1);
+var IconPicker$1 = function IconPicker(_ref) {
   var selectedIcon = _ref.selectedIcon,
     onSelectIcon = _ref.onSelectIcon;
   var _useState = React.useState(""),
@@ -3121,13 +3121,13 @@ var IconPicker = function IconPicker(_ref) {
     setSearch = _useState2[1];
   var query = search.trim().toLowerCase();
   var filteredCurated = React.useMemo(function () {
-    return query ? FOLDER_ICONS.filter(function (name) {
+    return query ? FOLDER_ICONS$1.filter(function (name) {
       return name.includes(query);
-    }) : FOLDER_ICONS;
+    }) : FOLDER_ICONS$1;
   }, [query]);
   var remainingIcons = React.useMemo(function () {
-    var all = ALL_ICON_NAMES.filter(function (name) {
-      return !CURATED_SET.has(name);
+    var all = ALL_ICON_NAMES$1.filter(function (name) {
+      return !CURATED_SET$1.has(name);
     });
     return query ? all.filter(function (name) {
       return name.includes(query);
@@ -3228,7 +3228,7 @@ var FolderDetail = function FolderDetail(_ref2) {
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
           className: "flex-shrink-0 text-sm font-medium opacity-70",
           children: "Icon"
-        }), /*#__PURE__*/jsxRuntime.jsx(IconPicker, {
+        }), /*#__PURE__*/jsxRuntime.jsx(IconPicker$1, {
           selectedIcon: formIcon,
           onSelectIcon: setFormIcon
         })]
@@ -3519,7 +3519,7 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
                     placeholder: "Folder name"
                   }), /*#__PURE__*/jsxRuntime.jsx("div", {
                     className: "grid grid-cols-10 gap-2",
-                    children: FOLDER_ICONS.map(function (icon) {
+                    children: FOLDER_ICONS$1.map(function (icon) {
                       var isIconSelected = icon === newFolderIcon;
                       return /*#__PURE__*/jsxRuntime.jsx("div", {
                         className: "flex items-center justify-center p-2 rounded cursor-pointer transition-all ".concat(isIconSelected ? "bg-blue-600 ring-2 ring-blue-400 text-white" : "bg-gray-700 text-gray-400 hover:bg-gray-600 hover:text-gray-200"),
@@ -26480,6 +26480,121 @@ var StarRating = function StarRating(_ref) {
   });
 };
 
+var FOLDER_ICONS = [
+// General / UI
+"home", "folder", "star", "heart", "bookmark", "tag", "flag", "bell", "circle", "square", "circle-check", "thumbs-up", "clone", "signal",
+// Communication
+"phone", "envelope", "comment", "message", "paper-plane",
+// Media
+"image", "camera", "music", "video", "film", "headphones",
+// Tech
+"code", "terminal", "database", "server", "wifi", "plug", "robot", "microchip", "globe",
+// Nature
+"leaf", "seedling", "tree", "sun", "moon", "cloud", "bolt", "fire", "snowflake", "water",
+// Objects
+"hammer", "wrench", "gear", "briefcase", "cart-shopping", "truck", "car", "plane", "rocket",
+// People / Activity
+"user", "users", "trophy", "gamepad", "dumbbell", "graduation-cap", "baby", "baby-carriage",
+// Arrows / Navigation
+"arrow-up", "arrow-down", "arrow-left", "arrow-right", "arrows-up-down", "arrows-left-right", "minus",
+// Data / Charts
+"chart-bar", "chart-line", "chart-pie", "table", "list", "layer-group",
+// Files
+"file", "file-code", "clipboard", "book", "pen", "pencil",
+// Misc
+"magnifying-glass", "eye", "lock", "key", "shield", "clock", "calendar", "link"];
+var ALL_ICON_NAMES = Object.keys(DashReact__namespace).filter(function (key) {
+  return key.startsWith("fa") && key !== "fas";
+}).map(function (key) {
+  var _DashReact$key;
+  return (_DashReact$key = DashReact__namespace[key]) === null || _DashReact$key === void 0 ? void 0 : _DashReact$key.iconName;
+}).filter(Boolean).filter(function (name, index, arr) {
+  return arr.indexOf(name) === index;
+}).sort();
+var CURATED_SET = new Set(FOLDER_ICONS);
+var IconPicker = function IconPicker(_ref) {
+  var selectedIcon = _ref.selectedIcon,
+    onSelectIcon = _ref.onSelectIcon;
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var query = search.trim().toLowerCase();
+  var filteredCurated = React.useMemo(function () {
+    return query ? FOLDER_ICONS.filter(function (name) {
+      return name.includes(query);
+    }) : FOLDER_ICONS;
+  }, [query]);
+  var remainingIcons = React.useMemo(function () {
+    var all = ALL_ICON_NAMES.filter(function (name) {
+      return !CURATED_SET.has(name);
+    });
+    return query ? all.filter(function (name) {
+      return name.includes(query);
+    }) : all;
+  }, [query]);
+  var hasResults = filteredCurated.length > 0 || remainingIcons.length > 0;
+  var renderIcon = function renderIcon(icon) {
+    return /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
+      icon: icon,
+      selected: icon === selectedIcon,
+      onClick: function onClick() {
+        return onSelectIcon(icon);
+      },
+      iconSize: "h-6 w-6",
+      backgroundColor: "transparent",
+      className: icon !== selectedIcon ? "opacity-50 hover:!opacity-80" : ""
+    }, icon);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0 space-y-3",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
+        value: search,
+        onChange: setSearch,
+        placeholder: "Search icons..."
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 min-h-0 overflow-y-auto space-y-3",
+      children: [!hasResults && /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "text-sm opacity-50 py-2",
+        children: ["No icons match \"", search, "\""]
+      }), filteredCurated.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col space-y-1.5",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs font-medium opacity-50",
+          children: "Suggested"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "grid grid-cols-6 gap-2",
+          children: filteredCurated.map(renderIcon)
+        })]
+      }), remainingIcons.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col space-y-1.5",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs font-medium opacity-50",
+          children: "All Icons"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "grid grid-cols-6 gap-2",
+          children: remainingIcons.map(renderIcon)
+        })]
+      })]
+    })]
+  });
+};
+
+var DASHBOARD_TAGS = ["productivity", "monitoring", "analytics", "communication", "developer", "sales", "marketing", "finance", "project-management", "social", "news", "utilities"];
+
+/**
+ * PublishDashboardModal — multi-step stepper for preparing a dashboard
+ * for registry publishing.
+ *
+ * Steps:
+ *   1. Details — Author name (required) + description (textarea)
+ *   2. Tags — Predefined tag selection with toggle-pill styling
+ *   3. Icon — Full icon picker with search
+ *   4. Publish — Review summary, publish action, result display
+ */
 var PublishDashboardModal = function PublishDashboardModal(_ref) {
   var isOpen = _ref.isOpen,
     setIsOpen = _ref.setIsOpen,
@@ -26491,36 +26606,67 @@ var PublishDashboardModal = function PublishDashboardModal(_ref) {
   var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
     grow: false
   });
-  var _useState = React.useState(""),
+  // Stepper state
+  var _useState = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    description = _useState2[0],
-    setDescription = _useState2[1];
+    step = _useState2[0],
+    setStep = _useState2[1];
+
+  // Step 1: Details
   var _useState3 = React.useState(""),
     _useState4 = _slicedToArray(_useState3, 2),
-    tags = _useState4[0],
-    setTags = _useState4[1];
+    authorName = _useState4[0],
+    setAuthorName = _useState4[1];
   var _useState5 = React.useState(""),
     _useState6 = _slicedToArray(_useState5, 2),
-    icon = _useState6[0],
-    setIcon = _useState6[1];
-  var _useState7 = React.useState(false),
+    description = _useState6[0],
+    setDescription = _useState6[1];
+
+  // Step 2: Tags
+  var _useState7 = React.useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    isPublishing = _useState8[0],
-    setIsPublishing = _useState8[1];
-  var _useState9 = React.useState(null),
+    selectedTags = _useState8[0],
+    setSelectedTags = _useState8[1];
+
+  // Step 3: Icon
+  var _useState9 = React.useState("grip"),
     _useState0 = _slicedToArray(_useState9, 2),
-    result = _useState0[0],
-    setResult = _useState0[1];
+    icon = _useState0[0],
+    setIcon = _useState0[1];
+
+  // Step 4: Publish
+  var _useState1 = React.useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isPublishing = _useState10[0],
+    setIsPublishing = _useState10[1];
+  var _useState11 = React.useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    result = _useState12[0],
+    setResult = _useState12[1];
+  function resetState() {
+    setStep(0);
+    setAuthorName("");
+    setDescription("");
+    setSelectedTags([]);
+    setIcon("grip");
+    setIsPublishing(false);
+    setResult(null);
+  }
   function handleClose() {
     setIsOpen(false);
-    // Reset state after a brief delay to avoid flash
-    setTimeout(function () {
-      setDescription("");
-      setTags("");
-      setIcon("");
-      setIsPublishing(false);
-      setResult(null);
-    }, 200);
+    setTimeout(resetState, 200);
+  }
+  function handleStepChange(nextStep) {
+    if (step === 0 && nextStep > 0 && !authorName.trim()) return;
+    if (step === 1 && nextStep > 1 && selectedTags.length === 0) return;
+    setStep(nextStep);
+  }
+  function toggleTag(tag) {
+    setSelectedTags(function (prev) {
+      return prev.includes(tag) ? prev.filter(function (t) {
+        return t !== tag;
+      }) : [].concat(_toConsumableArray(prev), [tag]);
+    });
   }
   function handlePublish() {
     return _handlePublish.apply(this, arguments);
@@ -26541,11 +26687,10 @@ var PublishDashboardModal = function PublishDashboardModal(_ref) {
             setResult(null);
             _context.prev = 2;
             options = {
+              authorName: authorName.trim(),
               description: description.trim() || undefined,
-              tags: tags.split(",").map(function (t) {
-                return t.trim();
-              }).filter(Boolean),
-              icon: icon.trim() || undefined
+              tags: selectedTags,
+              icon: icon || undefined
             };
             _context.next = 3;
             return window.mainApi.dashboardConfig.prepareDashboardForPublish(appId, workspaceId, options);
@@ -26573,64 +26718,226 @@ var PublishDashboardModal = function PublishDashboardModal(_ref) {
     }));
     return _handlePublish.apply(this, arguments);
   }
-  return /*#__PURE__*/jsxRuntime.jsx(DashReact.ConfirmationModal, {
+  var isLastStep = step === 3;
+  var canAdvance = step === 0 ? !!authorName.trim() : step === 1 ? selectedTags.length > 0 : true;
+  return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal, {
     isOpen: isOpen,
     setIsOpen: handleClose,
-    title: "Publish \"".concat(workspaceName || "Dashboard", "\""),
-    confirmLabel: isPublishing ? "Preparing..." : "Prepare for Publish",
-    onConfirm: result ? handleClose : handlePublish,
-    onCancel: handleClose,
-    disabled: isPublishing,
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "space-y-4 ".concat(panelStyles.textColor || "text-gray-200"),
-      children: !result ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "text-sm opacity-70",
-          children: "This will create a publish-ready ZIP file that can be submitted to the dashboard registry."
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "space-y-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-            label: "Description",
-            value: description,
-            onChange: setDescription,
-            placeholder: "A brief description of this dashboard..."
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-            label: "Tags (comma-separated)",
-            value: tags,
-            onChange: setTags,
-            placeholder: "productivity, slack, monitoring"
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-            label: "Icon (FontAwesome name)",
-            value: icon,
-            onChange: setIcon,
-            placeholder: "chart-line"
-          })]
+    width: "w-full max-w-2xl",
+    height: "h-[70vh]",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col h-full rounded-lg overflow-clip border ".concat(panelStyles.backgroundColor || "", " ").concat(panelStyles.borderColor || "", " ").concat(panelStyles.textColor || ""),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-shrink-0 flex flex-row items-center justify-between p-4 border-b border-white/10",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "text-lg font-semibold",
+          children: ["Publish \"", workspaceName || "Dashboard", "\""]
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: handleClose,
+          className: "opacity-50 hover:opacity-100 transition-opacity cursor-pointer",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "xmark",
+            className: "h-5 w-5"
+          })
         })]
-      }) : result.success ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "space-y-3",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "circle-check",
-            className: "h-4 w-4 text-green-400"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-sm",
-            children: "Dashboard prepared for publishing."
-          })]
-        }), result.filePath && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "text-xs opacity-50 break-all",
-          children: ["Saved to: ", result.filePath]
+      }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Stepper, {
+        activeStep: step,
+        onStepChange: handleStepChange,
+        showNavigation: false,
+        className: "flex-1 min-h-0 flex flex-col px-6 pt-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+          label: "Details",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-sm opacity-70",
+              children: "Provide details about your dashboard for the registry listing."
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+              label: "Author Name *",
+              value: authorName,
+              onChange: setAuthorName,
+              placeholder: "Your name"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.TextArea, {
+              label: "Description",
+              value: description,
+              onChange: setDescription,
+              placeholder: "A brief description of this dashboard...",
+              rows: 3
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+          label: "Tags",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-sm opacity-70",
+              children: "Select at least one tag to categorize your dashboard."
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "grid grid-cols-3 gap-2",
+              children: DASHBOARD_TAGS.map(function (tag) {
+                var isSelected = selectedTags.includes(tag);
+                return /*#__PURE__*/jsxRuntime.jsx("button", {
+                  type: "button",
+                  onClick: function onClick() {
+                    return toggleTag(tag);
+                  },
+                  className: "px-3 py-1.5 rounded-full text-sm border transition-colors cursor-pointer ".concat(isSelected ? "bg-white/15 border-white/30 text-white" : "bg-transparent border-white/10 text-white/60 hover:border-white/20 hover:text-white/80"),
+                  children: tag
+                }, tag);
+              })
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+          label: "Icon",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex-1 min-h-0 flex flex-col pb-4",
+            children: /*#__PURE__*/jsxRuntime.jsx(IconPicker, {
+              selectedIcon: icon,
+              onSelectIcon: setIcon
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+          label: "Publish",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-4",
+            children: !result ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+                className: "text-sm opacity-70",
+                children: "Review your dashboard details before publishing."
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "bg-white/5 border border-white/10 rounded-lg p-4 space-y-2 text-sm",
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Author"
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    children: authorName
+                  })]
+                }), description.trim() && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Description"
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    children: description
+                  })]
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Tags"
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    children: selectedTags.length > 0 ? selectedTags.join(", ") : "None"
+                  })]
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex gap-2 items-center",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Icon"
+                  }), /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                    icon: icon || "grip",
+                    className: "h-4 w-4"
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "opacity-70",
+                    children: icon || "grip"
+                  })]
+                })]
+              })]
+            }) : result.success ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "space-y-3",
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                  icon: "circle-check",
+                  className: "h-4 w-4 text-green-400"
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "text-sm",
+                  children: "Dashboard prepared for publishing."
+                })]
+              }), result.filePath && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "text-xs opacity-50 break-all",
+                children: ["Saved to: ", result.filePath]
+              }), result.warnings && result.warnings.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "bg-amber-500/10 border border-amber-500/20 rounded-lg p-3 space-y-2",
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex items-start gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                    icon: "triangle-exclamation",
+                    className: "h-3.5 w-3.5 text-amber-400 mt-0.5 flex-shrink-0"
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "text-xs text-amber-300/90",
+                    children: "The following widgets are not currently on the registry. This may be intentional if they are private. Dashboards referencing these widgets can only be installed by users who already have them."
+                  })]
+                }), /*#__PURE__*/jsxRuntime.jsx("ul", {
+                  className: "text-xs opacity-60 pl-5 list-disc space-y-0.5",
+                  children: result.warnings.map(function (w) {
+                    return /*#__PURE__*/jsxRuntime.jsx("li", {
+                      children: w
+                    }, w);
+                  })
+                })]
+              }), result.registryCheckFailed && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "bg-amber-500/10 border border-amber-500/20 rounded-lg p-3",
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex items-start gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                    icon: "triangle-exclamation",
+                    className: "h-3.5 w-3.5 text-amber-400 mt-0.5 flex-shrink-0"
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "text-xs text-amber-300/90",
+                    children: "Unable to reach the registry to verify widget availability. Your dashboard was still prepared successfully."
+                  })]
+                })
+              })]
+            }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: "circle-xmark",
+                className: "h-4 w-4 text-red-400"
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm text-red-400",
+                children: result.error || "Publish preparation failed."
+              })]
+            })
+          })
         })]
-      }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center gap-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "circle-xmark",
-          className: "h-4 w-4 text-red-400"
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-sm text-red-400",
-          children: result.error || "Publish preparation failed."
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-shrink-0 flex flex-row items-center px-6 py-4 border-t border-white/10",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex flex-row gap-2",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
+            title: step === 0 ? "Cancel" : "Back",
+            onClick: step === 0 ? handleClose : function () {
+              return setStep(step - 1);
+            },
+            disabled: isPublishing
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1 text-center",
+          children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+            className: "text-xs opacity-40",
+            children: ["Step ", step + 1, " of 4"]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex flex-row gap-2",
+          children: result !== null && result !== void 0 && result.success ? /*#__PURE__*/jsxRuntime.jsx(DashReact.Button2, {
+            title: "Done",
+            onClick: handleClose
+          }) : isLastStep ? /*#__PURE__*/jsxRuntime.jsx(DashReact.Button2, {
+            title: isPublishing ? "Preparing..." : "Publish",
+            onClick: handlePublish,
+            disabled: isPublishing
+          }) : /*#__PURE__*/jsxRuntime.jsx(DashReact.Button2, {
+            title: "Next",
+            onClick: function onClick() {
+              return handleStepChange(step + 1);
+            },
+            disabled: !canAdvance
+          })
         })]
-      })
+      })]
     })
   });
 };