@trops/dash-core 0.1.131 → 0.1.132

package/dist/index.esm.js

@@ -36148,6 +36148,717 @@ var ProvidersSection = function ProvidersSection(_ref) {
   });
 };
 
+var THEME_TAGS = ["dark", "light", "colorful", "minimal", "professional", "vibrant", "pastel", "high-contrast", "warm", "cool"];
+
+/**
+ * PublishThemeModal — multi-step stepper for publishing a theme
+ * to the Dash Registry.
+ *
+ * Steps:
+ *   0. Account — Auth check, sign-in prompt, profile display
+ *   1. Details — Author name (pre-filled from profile) + description
+ *   2. Tags — Predefined theme tag selection
+ *   3. Publish — Review summary with color swatches, publish action
+ */
+var PublishThemeModal = function PublishThemeModal(_ref) {
+  var _result$registryResul, _result$registryResul2;
+  var isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    appId = _ref.appId,
+    themeKey = _ref.themeKey,
+    themeName = _ref.themeName;
+  var _useContext = useContext(ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+
+  // Stepper state
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    step = _useState2[0],
+    setStep = _useState2[1];
+
+  // Step 0: Account / Auth
+  var _useState3 = useState("loading"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    authStatus = _useState4[0],
+    setAuthStatus = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    profile = _useState6[0],
+    setProfile = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    authFlow = _useState8[0],
+    setAuthFlow = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isPolling = _useState0[0],
+    setIsPolling = _useState0[1];
+  var _useState1 = useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    authError = _useState10[0],
+    setAuthError = _useState10[1];
+
+  // Step 1: Details
+  var _useState11 = useState(""),
+    _useState12 = _slicedToArray(_useState11, 2),
+    authorName = _useState12[0],
+    setAuthorName = _useState12[1];
+  var _useState13 = useState(""),
+    _useState14 = _slicedToArray(_useState13, 2),
+    description = _useState14[0],
+    setDescription = _useState14[1];
+
+  // Step 2: Tags
+  var _useState15 = useState([]),
+    _useState16 = _slicedToArray(_useState15, 2),
+    selectedTags = _useState16[0],
+    setSelectedTags = _useState16[1];
+
+  // Publish preview (colors)
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    preview = _useState18[0],
+    setPreview = _useState18[1];
+
+  // Step 3: Publish
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    isPublishing = _useState20[0],
+    setIsPublishing = _useState20[1];
+  var _useState21 = useState(null),
+    _useState22 = _slicedToArray(_useState21, 2),
+    result = _useState22[0],
+    setResult = _useState22[1];
+
+  // Fetch publish preview on open
+  useEffect(function () {
+    if (!isOpen || !appId || !themeKey) return;
+    window.mainApi.themes.getThemePublishPreview(appId, themeKey).then(function (res) {
+      if (res.success) setPreview(res);
+    })["catch"](console.error);
+  }, [isOpen, appId, themeKey]);
+
+  // Check auth status on mount
+  useEffect(function () {
+    if (!isOpen) return;
+    var cancelled = false;
+    function checkAuth() {
+      return _checkAuth.apply(this, arguments);
+    }
+    function _checkAuth() {
+      _checkAuth = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var status, userProfile;
+        return _regeneratorRuntime.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 1;
+              return window.mainApi.registryAuth.getStatus();
+            case 1:
+              status = _context.sent;
+              if (!cancelled) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              if (!status.authenticated) {
+                _context.next = 5;
+                break;
+              }
+              _context.next = 3;
+              return window.mainApi.registryAuth.getProfile();
+            case 3:
+              userProfile = _context.sent;
+              if (!cancelled) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return");
+            case 4:
+              if (userProfile) {
+                setProfile(userProfile);
+                setAuthStatus("authenticated");
+                setAuthorName(userProfile.displayName || userProfile.username || "");
+              } else {
+                setAuthStatus("unauthenticated");
+              }
+              _context.next = 6;
+              break;
+            case 5:
+              setAuthStatus("unauthenticated");
+            case 6:
+              _context.next = 8;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context["catch"](0);
+              if (!cancelled) setAuthStatus("unauthenticated");
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+      return _checkAuth.apply(this, arguments);
+    }
+    checkAuth();
+    return function () {
+      cancelled = true;
+    };
+  }, [isOpen]);
+  function resetState() {
+    setStep(0);
+    setAuthStatus("loading");
+    setProfile(null);
+    setAuthFlow(null);
+    setIsPolling(false);
+    setAuthError(null);
+    setAuthorName("");
+    setDescription("");
+    setSelectedTags([]);
+    setPreview(null);
+    setIsPublishing(false);
+    setResult(null);
+  }
+  function handleClose() {
+    setIsOpen(false);
+    setTimeout(resetState, 200);
+  }
+  function handleStepChange(nextStep) {
+    if (step === 0 && nextStep > 0 && authStatus !== "authenticated") return;
+    if (step === 1 && nextStep > 1 && !authorName.trim()) return;
+    if (step === 2 && nextStep > 2 && 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);
+  }
+  function _handlePublish() {
+    _handlePublish = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var options, res, _t2;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(!appId || !themeKey)) {
+              _context2.next = 1;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 1:
+            setIsPublishing(true);
+            setResult(null);
+            _context2.prev = 2;
+            options = {
+              authorName: authorName.trim(),
+              description: description.trim() || undefined,
+              tags: selectedTags
+            };
+            _context2.next = 3;
+            return window.mainApi.themes.publishTheme(appId, themeKey, options);
+          case 3:
+            res = _context2.sent;
+            setResult(res);
+            _context2.next = 5;
+            break;
+          case 4:
+            _context2.prev = 4;
+            _t2 = _context2["catch"](2);
+            setResult({
+              success: false,
+              error: _t2.message || "Failed to prepare theme for publish."
+            });
+          case 5:
+            _context2.prev = 5;
+            setIsPublishing(false);
+            return _context2.finish(5);
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 4, 5, 6]]);
+    }));
+    return _handlePublish.apply(this, arguments);
+  }
+  function handleSignIn() {
+    return _handleSignIn.apply(this, arguments);
+  }
+  function _handleSignIn() {
+    _handleSignIn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      var flow, interval, poll;
+      return _regeneratorRuntime.wrap(function (_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            setAuthError(null);
+            _context4.prev = 1;
+            _context4.next = 2;
+            return window.mainApi.registryAuth.initiateLogin();
+          case 2:
+            flow = _context4.sent;
+            setAuthFlow(flow);
+            if (flow.verificationUrlComplete) {
+              window.mainApi.shell.openExternal(flow.verificationUrlComplete);
+            }
+            setIsPolling(true);
+            interval = (flow.interval || 5) * 1000;
+            poll = setInterval(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+              var pollResult, userProfile;
+              return _regeneratorRuntime.wrap(function (_context3) {
+                while (1) switch (_context3.prev = _context3.next) {
+                  case 0:
+                    _context3.prev = 0;
+                    _context3.next = 1;
+                    return window.mainApi.registryAuth.pollToken(flow.deviceCode);
+                  case 1:
+                    pollResult = _context3.sent;
+                    if (!(pollResult.status === "authorized")) {
+                      _context3.next = 3;
+                      break;
+                    }
+                    clearInterval(poll);
+                    setIsPolling(false);
+                    setAuthFlow(null);
+                    _context3.next = 2;
+                    return window.mainApi.registryAuth.getProfile();
+                  case 2:
+                    userProfile = _context3.sent;
+                    setProfile(userProfile);
+                    setAuthStatus("authenticated");
+                    if (userProfile !== null && userProfile !== void 0 && userProfile.displayName && !authorName) {
+                      setAuthorName(userProfile.displayName);
+                    }
+                    _context3.next = 4;
+                    break;
+                  case 3:
+                    if (pollResult.status === "expired") {
+                      clearInterval(poll);
+                      setIsPolling(false);
+                      setAuthFlow(null);
+                    }
+                  case 4:
+                    _context3.next = 6;
+                    break;
+                  case 5:
+                    _context3.prev = 5;
+                    _context3["catch"](0);
+                    clearInterval(poll);
+                    setIsPolling(false);
+                  case 6:
+                  case "end":
+                    return _context3.stop();
+                }
+              }, _callee3, null, [[0, 5]]);
+            })), interval);
+            _context4.next = 4;
+            break;
+          case 3:
+            _context4.prev = 3;
+            _context4["catch"](1);
+            setAuthError("Could not reach the registry. Check your connection and try again.");
+          case 4:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[1, 3]]);
+    }));
+    return _handleSignIn.apply(this, arguments);
+  }
+  function handleSignOut() {
+    return _handleSignOut.apply(this, arguments);
+  }
+  function _handleSignOut() {
+    _handleSignOut = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+      return _regeneratorRuntime.wrap(function (_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            _context5.prev = 0;
+            _context5.next = 1;
+            return window.mainApi.registryAuth.logout();
+          case 1:
+            setAuthStatus("unauthenticated");
+            setProfile(null);
+            _context5.next = 3;
+            break;
+          case 2:
+            _context5.prev = 2;
+            _context5["catch"](0);
+          case 3:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5, null, [[0, 2]]);
+    }));
+    return _handleSignOut.apply(this, arguments);
+  }
+  var isLastStep = step === 3;
+  var canAdvance = step === 0 ? authStatus === "authenticated" : step === 1 ? !!authorName.trim() : step === 2 ? selectedTags.length > 0 : true;
+  var previewColors = (preview === null || preview === void 0 ? void 0 : preview.colors) || {};
+  var colorEntries = [{
+    label: "Primary",
+    value: previewColors.primary
+  }, {
+    label: "Secondary",
+    value: previewColors.secondary
+  }, {
+    label: "Tertiary",
+    value: previewColors.tertiary
+  }, {
+    label: "Neutral",
+    value: previewColors.neutral
+  }].filter(function (c) {
+    return c.value;
+  });
+  return /*#__PURE__*/jsx(Modal, {
+    isOpen: isOpen,
+    setIsOpen: handleClose,
+    width: "w-full max-w-2xl",
+    height: "h-[70vh]",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col h-full rounded-lg overflow-clip border ".concat(panelStyles.backgroundColor || "", " ").concat(panelStyles.borderColor || "", " ").concat(panelStyles.textColor || ""),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex-shrink-0 flex flex-row items-center justify-between p-4 border-b border-white/10",
+        children: [/*#__PURE__*/jsxs("span", {
+          className: "text-lg font-semibold",
+          children: ["Publish \"", themeName || themeKey || "Theme", "\""]
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          onClick: handleClose,
+          className: "opacity-50 hover:opacity-100 transition-opacity cursor-pointer",
+          children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "xmark",
+            className: "h-5 w-5"
+          })
+        })]
+      }), /*#__PURE__*/jsxs(Stepper, {
+        activeStep: step,
+        onStepChange: handleStepChange,
+        showNavigation: false,
+        className: "flex-1 min-h-0 flex flex-col px-6 pt-2",
+        children: [/*#__PURE__*/jsx(Stepper.Step, {
+          label: "Account",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: [authStatus === "loading" && /*#__PURE__*/jsx("div", {
+              className: "flex items-center justify-center py-12",
+              children: /*#__PURE__*/jsxs("div", {
+                className: "flex items-center gap-3 text-sm opacity-60",
+                children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                  icon: "spinner",
+                  className: "h-4 w-4 animate-spin"
+                }), /*#__PURE__*/jsx("span", {
+                  children: "Checking account status..."
+                })]
+              })
+            }), authStatus === "authenticated" && profile && /*#__PURE__*/jsxs("div", {
+              className: "space-y-4",
+              children: [/*#__PURE__*/jsx("p", {
+                className: "text-sm opacity-70",
+                children: "You're signed in and ready to publish."
+              }), /*#__PURE__*/jsxs("div", {
+                className: "bg-white/5 border border-white/10 rounded-lg p-4 flex items-center gap-4",
+                children: [/*#__PURE__*/jsx("div", {
+                  className: "flex items-center justify-center h-10 w-10 rounded-full bg-green-500/20 border border-green-500/30",
+                  children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+                    icon: "circle-check",
+                    className: "h-5 w-5 text-green-400"
+                  })
+                }), /*#__PURE__*/jsxs("div", {
+                  className: "flex-1 min-w-0",
+                  children: [/*#__PURE__*/jsx("div", {
+                    className: "text-sm font-medium truncate",
+                    children: profile.displayName || profile.username
+                  }), /*#__PURE__*/jsxs("div", {
+                    className: "text-xs opacity-50 truncate",
+                    children: ["@", profile.username]
+                  })]
+                })]
+              }), /*#__PURE__*/jsx("button", {
+                type: "button",
+                onClick: handleSignOut,
+                className: "text-xs opacity-40 hover:opacity-70 transition-opacity cursor-pointer",
+                children: "Sign out"
+              })]
+            }), authStatus === "unauthenticated" && /*#__PURE__*/jsxs("div", {
+              className: "space-y-4",
+              children: [/*#__PURE__*/jsx("p", {
+                className: "text-sm opacity-70",
+                children: "Sign in to the Dash Registry to publish your theme."
+              }), !authFlow && !isPolling && /*#__PURE__*/jsxs(Fragment, {
+                children: [/*#__PURE__*/jsx("button", {
+                  type: "button",
+                  onClick: handleSignIn,
+                  className: "px-4 py-2 rounded-lg text-sm bg-blue-500/20 border border-blue-500/30 text-blue-300 hover:bg-blue-500/30 transition-colors cursor-pointer",
+                  children: "Sign in to Registry"
+                }), authError && /*#__PURE__*/jsx("div", {
+                  className: "bg-red-500/10 border border-red-500/20 rounded-lg p-3",
+                  children: /*#__PURE__*/jsxs("div", {
+                    className: "flex items-start gap-2",
+                    children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                      icon: "circle-xmark",
+                      className: "h-3.5 w-3.5 text-red-400 mt-0.5 flex-shrink-0"
+                    }), /*#__PURE__*/jsx("span", {
+                      className: "text-xs text-red-300/90",
+                      children: authError
+                    })]
+                  })
+                })]
+              }), authFlow && isPolling && /*#__PURE__*/jsxs("div", {
+                className: "bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 space-y-3",
+                children: [/*#__PURE__*/jsx("p", {
+                  className: "text-xs text-blue-300/90",
+                  children: "Enter this code in your browser:"
+                }), /*#__PURE__*/jsx("div", {
+                  className: "text-center",
+                  children: /*#__PURE__*/jsx("span", {
+                    className: "text-2xl font-mono font-bold tracking-widest text-white",
+                    children: authFlow.userCode
+                  })
+                }), /*#__PURE__*/jsx("p", {
+                  className: "text-xs text-blue-300/70 text-center",
+                  children: "Waiting for authorization..."
+                })]
+              })]
+            })]
+          })
+        }), /*#__PURE__*/jsx(Stepper.Step, {
+          label: "Details",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: [/*#__PURE__*/jsx("p", {
+              className: "text-sm opacity-70",
+              children: "Provide details about your theme for the registry listing."
+            }), /*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsx("label", {
+                className: "block text-sm font-medium opacity-70 mb-1",
+                children: "Author Name"
+              }), /*#__PURE__*/jsx("div", {
+                className: "px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm opacity-80",
+                children: authorName || "\u2014"
+              })]
+            }), colorEntries.length > 0 && /*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsx("label", {
+                className: "block text-sm font-medium opacity-70 mb-2",
+                children: "Theme Colors"
+              }), /*#__PURE__*/jsx("div", {
+                className: "flex flex-row gap-3",
+                children: colorEntries.map(function (_ref2) {
+                  var label = _ref2.label,
+                    value = _ref2.value;
+                  return /*#__PURE__*/jsxs("div", {
+                    className: "flex flex-col items-center gap-1",
+                    children: [/*#__PURE__*/jsx("div", {
+                      className: "h-8 w-8 rounded-full border-2 border-white/20",
+                      style: {
+                        backgroundColor: value
+                      }
+                    }), /*#__PURE__*/jsx("span", {
+                      className: "text-[10px] opacity-50",
+                      children: label
+                    })]
+                  }, label);
+                })
+              })]
+            }), /*#__PURE__*/jsx(TextArea, {
+              label: "Description",
+              value: description,
+              onChange: setDescription,
+              placeholder: "A brief description of this theme...",
+              rows: 3
+            })]
+          })
+        }), /*#__PURE__*/jsx(Stepper.Step, {
+          label: "Tags",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: [/*#__PURE__*/jsx("p", {
+              className: "text-sm opacity-70",
+              children: "Select at least one tag to categorize your theme."
+            }), /*#__PURE__*/jsx("div", {
+              className: "grid grid-cols-3 gap-2",
+              children: THEME_TAGS.map(function (tag) {
+                var isSelected = selectedTags.includes(tag);
+                return /*#__PURE__*/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__*/jsx(Stepper.Step, {
+          label: "Publish",
+          children: /*#__PURE__*/jsx("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-4",
+            children: !result ? /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx("p", {
+                className: "text-sm opacity-70",
+                children: "Review your theme details before publishing."
+              }), /*#__PURE__*/jsxs("div", {
+                className: "bg-white/5 border border-white/10 rounded-lg p-4 space-y-2 text-sm",
+                children: [/*#__PURE__*/jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Author"
+                  }), /*#__PURE__*/jsx("span", {
+                    children: authorName
+                  })]
+                }), description.trim() && /*#__PURE__*/jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Description"
+                  }), /*#__PURE__*/jsx("span", {
+                    children: description
+                  })]
+                }), /*#__PURE__*/jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Tags"
+                  }), /*#__PURE__*/jsx("span", {
+                    children: selectedTags.length > 0 ? selectedTags.join(", ") : "None"
+                  })]
+                }), colorEntries.length > 0 && /*#__PURE__*/jsxs("div", {
+                  className: "flex gap-2 items-center",
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Colors"
+                  }), /*#__PURE__*/jsx("div", {
+                    className: "flex gap-1.5",
+                    children: colorEntries.map(function (_ref3) {
+                      var label = _ref3.label,
+                        value = _ref3.value;
+                      return /*#__PURE__*/jsx("div", {
+                        className: "h-5 w-5 rounded-full border border-white/20",
+                        style: {
+                          backgroundColor: value
+                        },
+                        title: "".concat(label, ": ").concat(value)
+                      }, label);
+                    })
+                  })]
+                })]
+              })]
+            }) : result.success ? /*#__PURE__*/jsxs("div", {
+              className: "space-y-3",
+              children: [(_result$registryResul = result.registryResult) !== null && _result$registryResul !== void 0 && _result$registryResul.success ? /*#__PURE__*/jsxs("div", {
+                className: "space-y-3",
+                children: [/*#__PURE__*/jsxs("div", {
+                  className: "flex items-center gap-2",
+                  children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                    icon: "circle-check",
+                    className: "h-4 w-4 text-green-400"
+                  }), /*#__PURE__*/jsx("span", {
+                    className: "text-sm",
+                    children: "Published to Dash Registry"
+                  })]
+                }), result.registryResult.registryUrl && /*#__PURE__*/jsxs("div", {
+                  className: "bg-white/5 border border-white/10 rounded-lg p-3",
+                  children: [/*#__PURE__*/jsx("div", {
+                    className: "text-xs opacity-50 mb-1",
+                    children: "Shareable Link"
+                  }), /*#__PURE__*/jsx("button", {
+                    type: "button",
+                    onClick: function onClick() {
+                      return window.mainApi.shell.openExternal(result.registryResult.registryUrl);
+                    },
+                    className: "text-sm text-blue-400 hover:underline cursor-pointer break-all text-left",
+                    children: result.registryResult.registryUrl
+                  })]
+                })]
+              }) : /*#__PURE__*/jsxs("div", {
+                className: "space-y-3",
+                children: [/*#__PURE__*/jsxs("div", {
+                  className: "flex items-center gap-2",
+                  children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                    icon: "circle-check",
+                    className: "h-4 w-4 text-green-400"
+                  }), /*#__PURE__*/jsx("span", {
+                    className: "text-sm",
+                    children: "Theme prepared for publishing."
+                  })]
+                }), ((_result$registryResul2 = result.registryResult) === null || _result$registryResul2 === void 0 ? void 0 : _result$registryResul2.error) && /*#__PURE__*/jsx("div", {
+                  className: "bg-amber-500/10 border border-amber-500/20 rounded-lg p-3",
+                  children: /*#__PURE__*/jsxs("div", {
+                    className: "flex items-start gap-2",
+                    children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                      icon: "triangle-exclamation",
+                      className: "h-3.5 w-3.5 text-amber-400 mt-0.5 flex-shrink-0"
+                    }), /*#__PURE__*/jsxs("span", {
+                      className: "text-xs text-amber-300/90",
+                      children: ["Registry upload failed:", " ", result.registryResult.error, ". Your theme was saved locally."]
+                    })]
+                  })
+                })]
+              }), result.filePath && /*#__PURE__*/jsxs("div", {
+                className: "text-xs opacity-50 break-all",
+                children: ["Saved to: ", result.filePath]
+              })]
+            }) : /*#__PURE__*/jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                icon: "circle-xmark",
+                className: "h-4 w-4 text-red-400"
+              }), /*#__PURE__*/jsx("span", {
+                className: "text-sm text-red-400",
+                children: result.error || "Publish preparation failed."
+              })]
+            })
+          })
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex-shrink-0 flex flex-row items-center px-6 py-4 border-t border-white/10",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "flex flex-row gap-2",
+          children: /*#__PURE__*/jsx(Button3, {
+            title: step === 0 ? "Cancel" : "Back",
+            onClick: step === 0 ? handleClose : function () {
+              return setStep(step - 1);
+            },
+            disabled: isPublishing
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex-1 text-center",
+          children: /*#__PURE__*/jsxs("span", {
+            className: "text-xs opacity-40",
+            children: ["Step ", step + 1, " of 4"]
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex flex-row gap-2",
+          children: result !== null && result !== void 0 && result.success ? /*#__PURE__*/jsx(Button2, {
+            title: "Done",
+            onClick: handleClose
+          }) : isLastStep ? /*#__PURE__*/jsx(Button2, {
+            title: isPublishing ? "Publishing..." : "Publish",
+            onClick: handlePublish,
+            disabled: isPublishing
+          }) : /*#__PURE__*/jsx(Button2, {
+            title: "Next",
+            onClick: function onClick() {
+              return handleStepChange(step + 1);
+            },
+            disabled: !canAdvance
+          })
+        })]
+      })]
+    })
+  });
+};
+
 var TOKEN_TYPES = ["bg", "text", "border"];
 
 // --- Color Swatch Grid ---
@@ -36326,8 +37037,15 @@ var ThemeDetail = function ThemeDetail(_ref6) {
     onActivate = _ref6.onActivate,
     onOpenThemeEditor = _ref6.onOpenThemeEditor,
     _ref6$onDelete = _ref6.onDelete,
-    onDelete = _ref6$onDelete === void 0 ? null : _ref6$onDelete;
+    onDelete = _ref6$onDelete === void 0 ? null : _ref6$onDelete,
+    _ref6$appId = _ref6.appId,
+    appId = _ref6$appId === void 0 ? null : _ref6$appId;
   var theme = themeKey && themes ? themes[themeKey] : null;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    publishOpen = _useState2[0],
+    setPublishOpen = _useState2[1];
+  var canPublish = theme && !theme._registryMeta;
   var displayTheme = useMemo(function () {
     return theme ? theme[themeVariant] || {} : {};
   }, [theme, themeVariant]);
@@ -36394,28 +37112,440 @@ var ThemeDetail = function ThemeDetail(_ref6) {
       })]
     }), /*#__PURE__*/jsxs("div", {
       className: "flex-shrink-0 flex flex-row justify-between px-6 py-4 border-t border-white/10",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex flex-row gap-2",
+        children: [!isActive && onDelete && /*#__PURE__*/jsx(Button, {
+          title: "Delete",
+          onClick: function onClick() {
+            return onDelete(themeKey);
+          },
+          size: "sm"
+        }), canPublish && /*#__PURE__*/jsx(Button, {
+          title: "Publish",
+          onClick: function onClick() {
+            return setPublishOpen(true);
+          },
+          size: "sm"
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex flex-row gap-2",
+        children: [!isActive && /*#__PURE__*/jsx(Button, {
+          title: "Activate",
+          onClick: function onClick() {
+            return onActivate(themeKey);
+          },
+          size: "sm"
+        }), /*#__PURE__*/jsx(Button, {
+          title: "Edit",
+          onClick: onOpenThemeEditor,
+          size: "sm"
+        })]
+      })]
+    }), canPublish && /*#__PURE__*/jsx(PublishThemeModal, {
+      isOpen: publishOpen,
+      setIsOpen: setPublishOpen,
+      appId: appId,
+      themeKey: themeKey,
+      themeName: theme.name || themeKey
+    })]
+  });
+};
+
+var RegistryThemeDetail = function RegistryThemeDetail(_ref) {
+  var themePackage = _ref.themePackage,
+    appId = _ref.appId,
+    onInstallComplete = _ref.onInstallComplete;
+  var _useContext = useContext(ThemeContext),
+    currentTheme = _useContext.currentTheme,
+    changeThemesForApplication = _useContext.changeThemesForApplication;
+  var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInstalling = _useState2[0],
+    setIsInstalling = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    installResult = _useState4[0],
+    setInstallResult = _useState4[1];
+  var pkg = themePackage;
+  if (!pkg) return null;
+  var colors = pkg.colors || {};
+  function handleInstall() {
+    return _handleInstall.apply(this, arguments);
+  }
+  function _handleInstall() {
+    _handleInstall = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var result, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!appId || !pkg.name)) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            setIsInstalling(true);
+            setInstallResult(null);
+            _context.prev = 2;
+            _context.next = 3;
+            return window.mainApi.themes.installThemeFromRegistry(appId, pkg.name);
+          case 3:
+            result = _context.sent;
+            setInstallResult({
+              status: result !== null && result !== void 0 && result.success ? "success" : "error",
+              message: result !== null && result !== void 0 && result.success ? "Theme \"".concat(result.themeKey || pkg.displayName || pkg.name, "\" installed successfully.") : (result === null || result === void 0 ? void 0 : result.error) || "Installation failed."
+            });
+            if (result !== null && result !== void 0 && result.success) {
+              // Refresh ThemeContext with updated themes
+              if (result.themes) {
+                changeThemesForApplication(result.themes);
+              }
+              if (onInstallComplete) {
+                onInstallComplete(result);
+              }
+            }
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _t = _context["catch"](2);
+            setInstallResult({
+              status: "error",
+              message: _t.message || "Failed to install theme."
+            });
+          case 5:
+            _context.prev = 5;
+            setIsInstalling(false);
+            return _context.finish(5);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4, 5, 6]]);
+    }));
+    return _handleInstall.apply(this, arguments);
+  }
+  var colorEntries = [{
+    label: "Primary",
+    value: colors.primary
+  }, {
+    label: "Secondary",
+    value: colors.secondary
+  }, {
+    label: "Tertiary",
+    value: colors.tertiary
+  }, {
+    label: "Neutral",
+    value: colors.neutral
+  }].filter(function (c) {
+    return c.value;
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex flex-row items-center gap-3",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "h-5 w-5 flex-shrink-0 flex items-center justify-center",
+          children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "palette",
+            className: "h-5 w-5"
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx(SubHeading3, {
+            title: pkg.displayName || pkg.name,
+            padding: false
+          }), /*#__PURE__*/jsxs("div", {
+            className: "flex items-center gap-2 mt-0.5",
+            children: [/*#__PURE__*/jsxs("span", {
+              className: "text-sm opacity-60",
+              children: ["by ", pkg.author || "Unknown"]
+            }), pkg.version && /*#__PURE__*/jsxs("span", {
+              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: ["v", pkg.version]
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsx("hr", {
+        className: currentTheme["border-primary-medium"]
+      }), colorEntries.length > 0 && /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-2 block",
+          children: "COLORS"
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex flex-row gap-3",
+          children: colorEntries.map(function (_ref2) {
+            var label = _ref2.label,
+              value = _ref2.value;
+            return /*#__PURE__*/jsxs("div", {
+              className: "flex flex-col items-center gap-1",
+              children: [/*#__PURE__*/jsx("div", {
+                className: "h-10 w-10 rounded-full border-2 border-white/20",
+                style: {
+                  backgroundColor: value
+                }
+              }), /*#__PURE__*/jsx("span", {
+                className: "text-[10px] opacity-50",
+                children: label
+              }), /*#__PURE__*/jsx("span", {
+                className: "text-[10px] opacity-30 font-mono",
+                children: value
+              })]
+            }, label);
+          })
+        })]
+      }), pkg.description && /*#__PURE__*/jsx("p", {
+        className: "text-sm",
+        children: pkg.description
+      }), pkg.tags && pkg.tags.length > 0 && /*#__PURE__*/jsx("div", {
+        className: "flex flex-wrap gap-1",
+        children: pkg.tags.map(function (tag) {
+          return /*#__PURE__*/jsx("span", {
+            className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-60"),
+            children: tag
+          }, tag);
+        })
+      }), installResult && /*#__PURE__*/jsx("div", {
+        className: "p-2 rounded border ".concat(installResult.status === "success" ? "bg-green-900/20 border-green-700" : "bg-red-900/30 border-red-700"),
+        children: /*#__PURE__*/jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: installResult.status === "success" ? "circle-check" : "circle-xmark",
+            className: "h-4 w-4 ".concat(installResult.status === "success" ? "text-green-400" : "text-red-400")
+          }), /*#__PURE__*/jsx("span", {
+            className: "text-sm ".concat(installResult.status === "error" ? "text-red-400" : ""),
+            children: installResult.message
+          })]
+        })
+      })]
+    }), (installResult === null || installResult === void 0 ? void 0 : installResult.status) !== "success" && /*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
+      children: /*#__PURE__*/jsx(Button, {
+        title: isInstalling ? "Installing..." : "Install Theme",
+        bgColor: "bg-blue-600",
+        hoverBackgroundColor: isInstalling ? "" : "hover:bg-blue-700",
+        textSize: "text-sm",
+        padding: "py-1.5 px-4",
+        onClick: handleInstall,
+        disabled: isInstalling
+      })
+    })]
+  });
+};
+
+var DiscoverThemesDetail = function DiscoverThemesDetail(_ref) {
+  var onBack = _ref.onBack,
+    appId = _ref.appId,
+    onInstallComplete = _ref.onInstallComplete;
+  var _useContext = useContext(ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    packages = _useState2[0],
+    setPackages = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchQuery = _useState8[0],
+    setSearchQuery = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    selectedPackageName = _useState0[0],
+    setSelectedPackageName = _useState0[1];
+  var search = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
+      var _window$mainApi;
+      var result, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if ((_window$mainApi = window.mainApi) !== null && _window$mainApi !== void 0 && (_window$mainApi = _window$mainApi.registry) !== null && _window$mainApi !== void 0 && _window$mainApi.searchThemes) {
+              _context.next = 1;
+              break;
+            }
+            setPackages([]);
+            return _context.abrupt("return");
+          case 1:
+            setIsLoading(true);
+            setError(null);
+            _context.prev = 2;
+            _context.next = 3;
+            return window.mainApi.registry.searchThemes(query || "", {});
+          case 3:
+            result = _context.sent;
+            setPackages((result === null || result === void 0 ? void 0 : result.packages) || []);
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _t = _context["catch"](2);
+            setError(_t.message || "Failed to search theme registry");
+            setPackages([]);
+          case 5:
+            _context.prev = 5;
+            setIsLoading(false);
+            return _context.finish(5);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4, 5, 6]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), []);
+
+  // Debounce search on query changes
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      search(searchQuery);
+    }, 300);
+    return function () {
+      return clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+  var retry = function retry() {
+    return search(searchQuery);
+  };
+  var selectedPackage = selectedPackageName ? packages.find(function (p) {
+    return p.name === selectedPackageName;
+  }) : null;
+
+  // If a package is selected, show its detail inline
+  if (selectedPackage) {
+    return /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col flex-1 min-h-0",
       children: [/*#__PURE__*/jsx("div", {
-        children: !isActive && onDelete && /*#__PURE__*/jsx(Button, {
-          title: "Delete",
+        className: "flex-shrink-0 px-4 pt-4",
+        children: /*#__PURE__*/jsxs("button", {
+          type: "button",
           onClick: function onClick() {
-            return onDelete(themeKey);
+            return setSelectedPackageName(null);
           },
-          size: "sm"
+          className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "arrow-left",
+            className: "h-3 w-3"
+          }), /*#__PURE__*/jsx("span", {
+            children: "Back"
+          })]
         })
-      }), /*#__PURE__*/jsxs("div", {
-        className: "flex flex-row gap-2",
-        children: [!isActive && /*#__PURE__*/jsx(Button, {
-          title: "Activate",
+      }), /*#__PURE__*/jsx(RegistryThemeDetail, {
+        themePackage: selectedPackage,
+        appId: appId,
+        onInstallComplete: onInstallComplete
+      })]
+    });
+  }
+
+  // Package list view
+  var listBody;
+  if (isLoading) {
+    listBody = /*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-center py-12",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "text-center",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-3"
+        }), /*#__PURE__*/jsx(Paragraph, {
+          className: "text-sm opacity-50",
+          children: "Loading themes..."
+        })]
+      })
+    });
+  } else if (error) {
+    listBody = /*#__PURE__*/jsxs("div", {
+      className: "px-4 py-8 text-center",
+      children: [/*#__PURE__*/jsx(Paragraph, {
+        className: "text-sm text-red-400 mb-3",
+        children: error
+      }), /*#__PURE__*/jsx(Button, {
+        title: "Retry",
+        bgColor: "bg-gray-700",
+        hoverBackgroundColor: "hover:bg-gray-600",
+        textSize: "text-sm",
+        padding: "py-1 px-3",
+        onClick: retry
+      })]
+    });
+  } else if (packages.length === 0) {
+    listBody = /*#__PURE__*/jsx("div", {
+      className: "px-4 py-8 text-center",
+      children: /*#__PURE__*/jsx(Paragraph, {
+        className: "text-sm opacity-50",
+        children: searchQuery ? "No themes match your search." : "No theme packages available."
+      })
+    });
+  } else {
+    listBody = /*#__PURE__*/jsx("div", {
+      className: "space-y-1",
+      children: packages.map(function (pkg) {
+        var colors = pkg.colors || {};
+        return /*#__PURE__*/jsx(Sidebar.Item, {
+          icon: /*#__PURE__*/jsx("div", {
+            className: "flex items-center gap-0.5",
+            children: [colors.primary, colors.secondary, colors.tertiary].filter(Boolean).map(function (color, i) {
+              return /*#__PURE__*/jsx("div", {
+                className: "h-3 w-3 rounded-full border border-white/20",
+                style: {
+                  backgroundColor: color
+                }
+              }, i);
+            })
+          }),
           onClick: function onClick() {
-            return onActivate(themeKey);
+            return setSelectedPackageName(pkg.name);
           },
-          size: "sm"
-        }), /*#__PURE__*/jsx(Button, {
-          title: "Edit",
-          onClick: onOpenThemeEditor,
-          size: "sm"
+          children: pkg.displayName || pkg.name
+        }, pkg.name);
+      })
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0 ".concat(panelStyles.textColor || "text-gray-200"),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex-shrink-0 px-4 pt-4",
+      children: /*#__PURE__*/jsxs("button", {
+        type: "button",
+        onClick: onBack,
+        className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "arrow-left",
+          className: "h-3 w-3"
+        }), /*#__PURE__*/jsx("span", {
+          children: "Back"
         })]
-      })]
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex-shrink-0 px-4 py-3",
+      children: /*#__PURE__*/jsx(SearchInput, {
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: "Search themes...",
+        inputClassName: "py-1.5 text-xs"
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex-1 min-h-0 overflow-y-auto px-2",
+      children: listBody
+    }), !isLoading && !error && packages.length > 0 && /*#__PURE__*/jsxs("div", {
+      className: "flex-shrink-0 px-4 py-2 text-[10px] opacity-40 border-t border-white/10",
+      children: [packages.length, " theme", packages.length !== 1 ? "s" : ""]
     })]
   });
 };
@@ -36461,18 +37591,31 @@ var ThemesSection = function ThemesSection(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     wizardTheme = _useState0[0],
     setWizardTheme = _useState0[1];
+  // null | "marketplace"
+  var _useState1 = useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    installMode = _useState10[0],
+    setInstallMode = _useState10[1];
   var themeEntries = themes ? Object.entries(themes) : [];
   var appId = credentials === null || credentials === void 0 ? void 0 : credentials.appId;
+  var rowStyles = getStylesForItem(themeObjects.PANEL_HEADER, currentTheme, {
+    grow: false
+  });
 
   // Handle create request from parent — enter wizard mode
+  var prevCreateRequested = useRef(false);
   useEffect(function () {
-    if (createRequested) {
+    if (createRequested && !prevCreateRequested.current) {
       setGenerateMode(GENERATE_MODES.WIZARD);
       setWizardName("");
       setWizardMethod(null);
       setWizardTheme(null);
       setSelectedThemeKey(null);
-      onCreateAcknowledged && onCreateAcknowledged();
+      setInstallMode(null);
+    }
+    prevCreateRequested.current = createRequested;
+    if (createRequested && onCreateAcknowledged) {
+      onCreateAcknowledged();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [createRequested]);
@@ -36543,63 +37686,109 @@ var ThemesSection = function ThemesSection(_ref) {
   function handleEdit() {
     if (onOpenThemeEditor) onOpenThemeEditor();
   }
-  var rowStyles = getStylesForItem(themeObjects.PANEL_HEADER, currentTheme, {
-    grow: false
-  });
   var listContent = /*#__PURE__*/jsxs("div", {
-    className: "flex flex-col",
+    className: "flex flex-col h-full",
     children: [/*#__PURE__*/jsxs("div", {
-      className: "flex flex-row items-center justify-between px-3 py-3 border-b ".concat(rowStyles.borderColor || ""),
+      className: "flex-shrink-0 flex flex-col gap-2 px-3 py-2 ".concat(rowStyles.backgroundColor || ""),
       children: [/*#__PURE__*/jsxs("div", {
-        className: "flex flex-row items-center gap-2",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "sun",
-          className: "h-3 w-3 opacity-50"
-        }), /*#__PURE__*/jsx(Switch, {
-          checked: themeVariant === "dark",
-          onChange: handleToggleVariant
-        }), /*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "moon",
-          className: "h-3 w-3 opacity-50"
+        className: "flex flex-row items-center justify-between",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex flex-row items-center gap-2",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "sun",
+            className: "h-3 w-3 opacity-50"
+          }), /*#__PURE__*/jsx(Switch, {
+            checked: themeVariant === "dark",
+            onChange: handleToggleVariant
+          }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "moon",
+            className: "h-3 w-3 opacity-50"
+          })]
+        }), /*#__PURE__*/jsx("span", {
+          className: "text-xs opacity-50",
+          children: themeVariant === "dark" ? "Dark" : "Light"
         })]
-      }), /*#__PURE__*/jsx("span", {
-        className: "text-xs opacity-50",
-        children: themeVariant === "dark" ? "Dark" : "Light"
-      })]
-    }), /*#__PURE__*/jsxs(Sidebar.Content, {
-      children: [themeEntries.map(function (_ref4) {
-        var _ref5 = _slicedToArray(_ref4, 2),
-          key = _ref5[0],
-          theme = _ref5[1];
-        var isActive = key === currentThemeKey;
-        var isSelected = selectedThemeKey === key && generateMode === GENERATE_MODES.NONE;
-        return /*#__PURE__*/jsx(Sidebar.Item, {
-          icon: isActive ? /*#__PURE__*/jsx(FontAwesomeIcon, {
-            icon: "check",
-            className: "h-3 w-3 text-green-500"
-          }) : /*#__PURE__*/jsx(FontAwesomeIcon, {
-            icon: "palette",
-            className: "h-3.5 w-3.5"
-          }),
-          active: isSelected,
-          onClick: function onClick() {
-            setSelectedThemeKey(key);
-            setGenerateMode(GENERATE_MODES.NONE);
-          },
-          badge: isActive ? "active" : null,
-          className: isSelected ? "bg-white/10 opacity-100" : "",
-          children: theme.name || key
-        }, key);
-      }), themeEntries.length === 0 && /*#__PURE__*/jsx("span", {
-        className: "text-sm opacity-40 py-8 text-center",
-        children: "No themes available"
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex bg-white/5 rounded-md p-0.5",
+        children: [{
+          key: "themes",
+          label: "My Themes"
+        }, {
+          key: "marketplace",
+          label: "Marketplace"
+        }].map(function (tab) {
+          var currentTab = installMode === "marketplace" ? "marketplace" : "themes";
+          return /*#__PURE__*/jsx("button", {
+            type: "button",
+            onClick: function onClick() {
+              if (tab.key === "marketplace") {
+                setInstallMode("marketplace");
+                setSelectedThemeKey(null);
+                setGenerateMode(GENERATE_MODES.NONE);
+              } else {
+                setInstallMode(null);
+              }
+            },
+            className: "flex-1 px-2 py-0.5 rounded text-[11px] transition-colors ".concat(currentTab === tab.key ? "bg-white/10 font-medium opacity-90" : "opacity-50 hover:opacity-70"),
+            children: tab.label
+          }, tab.key);
+        })
       })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex-1 overflow-y-auto min-h-0",
+      children: /*#__PURE__*/jsxs(Sidebar.Content, {
+        children: [themeEntries.map(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2),
+            key = _ref5[0],
+            theme = _ref5[1];
+          var isActive = key === currentThemeKey;
+          var isSelected = selectedThemeKey === key && generateMode === GENERATE_MODES.NONE && installMode !== "marketplace";
+          return /*#__PURE__*/jsx(Sidebar.Item, {
+            icon: isActive ? /*#__PURE__*/jsx(FontAwesomeIcon, {
+              icon: "check",
+              className: "h-3 w-3 text-green-500"
+            }) : /*#__PURE__*/jsx(FontAwesomeIcon, {
+              icon: "palette",
+              className: "h-3.5 w-3.5"
+            }),
+            active: isSelected,
+            onClick: function onClick() {
+              setSelectedThemeKey(key);
+              setGenerateMode(GENERATE_MODES.NONE);
+              setInstallMode(null);
+            },
+            badge: isActive ? "active" : null,
+            className: isSelected ? "bg-white/10 opacity-100" : "",
+            children: theme.name || key
+          }, key);
+        }), themeEntries.length === 0 && /*#__PURE__*/jsx("span", {
+          className: "text-sm opacity-40 py-8 text-center",
+          children: "No themes available"
+        })]
+      })
     })]
   });
 
   // Determine detail content based on mode
   var detailContent = null;
-  if (generateMode === GENERATE_MODES.WIZARD) {
+  if (installMode === "marketplace") {
+    detailContent = /*#__PURE__*/jsx(DiscoverThemesDetail, {
+      onBack: function onBack() {
+        setInstallMode(null);
+      },
+      appId: appId,
+      onInstallComplete: function onInstallComplete() {
+        // Refresh themes after install
+        if (dashApi && appId) {
+          dashApi.listThemes(appId, function (e, message) {
+            if (message && message.themes) {
+              changeThemesForApplication(message.themes);
+            }
+          });
+        }
+      }
+    });
+  } else if (generateMode === GENERATE_MODES.WIZARD) {
     detailContent = /*#__PURE__*/jsx(ThemeQuickCreate, {
       wizardName: wizardName,
       setWizardName: setWizardName,
@@ -36625,7 +37814,8 @@ var ThemesSection = function ThemesSection(_ref) {
       themeVariant: themeVariant,
       onActivate: handleActivate,
       onOpenThemeEditor: handleEdit,
-      onDelete: handleDeleteTheme
+      onDelete: handleDeleteTheme,
+      appId: appId
     });
   }
   return /*#__PURE__*/jsx(SectionLayout, {