@trops/dash-core 0.1.131 → 0.1.133

package/dist/index.esm.js

@@ -3603,6 +3603,36 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
             children: tag
           }, tag);
         })
+      }), pkg.theme && /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "INCLUDES THEME"
+        }), /*#__PURE__*/jsxs("div", {
+          className: "p-3 rounded ".concat(currentTheme["bg-primary-medium"], " flex items-center gap-3"),
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "palette",
+            className: "h-4 w-4 opacity-60"
+          }), /*#__PURE__*/jsxs("div", {
+            className: "flex-1",
+            children: [/*#__PURE__*/jsx("span", {
+              className: "text-sm font-medium",
+              children: pkg.theme.name || pkg.theme.key || "Bundled Theme"
+            }), /*#__PURE__*/jsx("span", {
+              className: "text-xs opacity-40 ml-2",
+              children: "Will be auto-installed"
+            })]
+          }), pkg.theme.colors && /*#__PURE__*/jsx("div", {
+            className: "flex items-center gap-1",
+            children: [pkg.theme.colors.primary, pkg.theme.colors.secondary, pkg.theme.colors.tertiary].filter(Boolean).map(function (color, i) {
+              return /*#__PURE__*/jsx("div", {
+                className: "h-4 w-4 rounded-full border border-white/20",
+                style: {
+                  backgroundColor: color
+                }
+              }, i);
+            })
+          })]
+        })]
       }), /*#__PURE__*/jsxs("div", {
         children: [/*#__PURE__*/jsx("span", {
           className: "text-xs font-semibold opacity-50 mb-1 block",
@@ -36148,368 +36178,1511 @@ var ProvidersSection = function ProvidersSection(_ref) {
   });
 };
 
-var TOKEN_TYPES = ["bg", "text", "border"];
-
-// --- Color Swatch Grid ---
-
-var SwatchCell = function SwatchCell(_ref) {
-  var tokenKey = _ref.tokenKey,
-    resolvedClass = _ref.resolvedClass,
-    type = _ref.type;
-  var tooltip = "".concat(tokenKey, " \u2192 ").concat(resolvedClass || "(none)");
-  if (type === "bg") {
-    return /*#__PURE__*/jsx("div", {
-      className: "h-8 flex-1 rounded ".concat(resolvedClass || ""),
-      title: tooltip
-    });
-  }
-  if (type === "text") {
-    return /*#__PURE__*/jsx("div", {
-      className: "h-8 flex-1 rounded flex items-center justify-center bg-black/10",
-      title: tooltip,
-      children: /*#__PURE__*/jsx("span", {
-        className: "text-xs font-bold ".concat(resolvedClass || ""),
-        children: "Aa"
-      })
-    });
-  }
-
-  // border
-  return /*#__PURE__*/jsx("div", {
-    className: "h-8 flex-1 rounded border-2 ".concat(resolvedClass || ""),
-    title: tooltip
-  });
-};
-var ColorSwatchGrid = function ColorSwatchGrid(_ref2) {
-  var displayTheme = _ref2.displayTheme;
-  return /*#__PURE__*/jsx("div", {
-    className: "flex flex-col space-y-5",
-    children: colorTypes.map(function (family) {
-      return /*#__PURE__*/jsxs("div", {
-        className: "flex flex-col space-y-2",
-        children: [/*#__PURE__*/jsx("span", {
-          className: "text-xs font-semibold opacity-50 capitalize",
-          children: family
-        }), TOKEN_TYPES.map(function (type) {
-          return /*#__PURE__*/jsxs("div", {
-            className: "flex flex-row items-center gap-2",
-            children: [/*#__PURE__*/jsx("span", {
-              className: "text-[10px] opacity-40 w-10 text-right shrink-0",
-              children: type
-            }), /*#__PURE__*/jsx("div", {
-              className: "flex flex-row gap-1.5 flex-1",
-              children: themeVariants.map(function (shade) {
-                var tokenKey = "".concat(type, "-").concat(family, "-").concat(shade);
-                var resolvedClass = displayTheme[tokenKey] || "";
-                return /*#__PURE__*/jsx(SwatchCell, {
-                  tokenKey: tokenKey,
-                  resolvedClass: resolvedClass,
-                  type: type
-                }, shade);
-              })
-            })]
-          }, type);
-        })]
-      }, family);
-    })
-  });
-};
-
-// --- Component Style Accordion ---
-
-var COLOR_KEYS = ["backgroundColor", "textColor", "borderColor", "hoverBackgroundColor", "hoverTextColor", "hoverBorderColor", "activeBackgroundColor", "activeTextColor", "focusRingColor", "focusBorderColor"];
-var NON_COLOR_KEYS = ["shadow", "borderRadius", "spacing", "textSize", "iconSize", "fontWeight", "transition", "cursor", "disabledOpacity", "letterSpacing", "lineHeight"];
-var COMPONENT_GROUPS = [{
-  label: "Buttons",
-  keys: ["BUTTON", "BUTTON_2", "BUTTON_3", "BUTTON_ICON", "BUTTON_ICON_2", "BUTTON_ICON_3"]
-}, {
-  label: "Panels",
-  keys: ["PANEL", "PANEL_2", "PANEL_3", "PANEL_HEADER", "PANEL_HEADER_2", "PANEL_HEADER_3", "PANEL_FOOTER", "PANEL_FOOTER_2", "PANEL_FOOTER_3", "DASH_PANEL", "DASH_PANEL_2", "DASH_PANEL_3", "DASH_PANEL_HEADER", "DASH_PANEL_HEADER_2", "DASH_PANEL_HEADER_3", "DASH_PANEL_FOOTER", "DASH_PANEL_FOOTER_2", "DASH_PANEL_FOOTER_3"]
-}, {
-  label: "Cards",
-  keys: ["CARD", "CARD_2", "CARD_3", "STAT_CARD", "STAT_CARD_LABEL", "STAT_CARD_VALUE", "STAT_CARD_CHANGE"]
-}, {
-  label: "Typography",
-  keys: ["HEADING", "HEADING_2", "HEADING_3", "SUBHEADING", "SUBHEADING_2", "SUBHEADING_3", "PARAGRAPH", "PARAGRAPH_2", "PARAGRAPH_3"]
-}, {
-  label: "Navigation",
-  keys: ["MENU_ITEM", "MENU_ITEM_2", "MENU_ITEM_3", "TABS", "TABS_2", "TABS_3", "TABS_LIST", "TABS_LIST_2", "TABS_LIST_3", "TABS_TRIGGER", "TABS_TRIGGER_2", "TABS_TRIGGER_3", "TABS_CONTENT", "TABS_CONTENT_2", "TABS_CONTENT_3", "SIDEBAR", "SIDEBAR_ITEM", "NAVBAR", "TABBED_NAVBAR", "BREADCRUMBS", "BREADCRUMBS_2", "BREADCRUMBS_3"]
-}, {
-  label: "Forms",
-  keys: ["INPUT_TEXT", "SELECT_MENU", "TEXTAREA", "CHECKBOX", "RADIO", "SWITCH", "SLIDER", "SEARCH_INPUT", "TOGGLE", "TOGGLE_2", "TOGGLE_3", "FORM_LABEL"]
-}, {
-  label: "Feedback",
-  keys: ["ALERT", "ALERT_2", "ALERT_3", "ALERT_BANNER", "TOAST", "TOAST_2", "TOAST_3", "PROGRESS_BAR", "PROGRESS_BAR_2", "PROGRESS_BAR_3", "TAG", "TAG_2", "TAG_3", "TOOLTIP", "EMPTY_STATE"]
-}, {
-  label: "Tables",
-  keys: ["TABLE", "TABLE_2", "TABLE_3", "DATA_LIST", "DATA_LIST_ITEM"]
-}, {
-  label: "Advanced",
-  keys: ["ACCORDION", "ACCORDION_2", "ACCORDION_3", "ACCORDION_ITEM", "ACCORDION_ITEM_2", "ACCORDION_ITEM_3", "ACCORDION_TRIGGER", "ACCORDION_TRIGGER_2", "ACCORDION_TRIGGER_3", "ACCORDION_CONTENT", "ACCORDION_CONTENT_2", "ACCORDION_CONTENT_3", "COMMAND_PALETTE", "COMMAND_PALETTE_INPUT", "COMMAND_PALETTE_ITEM", "DRAWER", "DRAWER_HEADER", "DRAWER_FOOTER", "STEPPER", "STEPPER_STEP", "STEPPER_CONNECTOR", "SKELETON", "CODE_EDITOR"]
-}, {
-  label: "Layout",
-  keys: ["WIDGET_CHROME", "WIDGET", "WORKSPACE", "LAYOUT_CONTAINER", "DASHBOARD_FOOTER", "DASHBOARD_FOOTER_2", "DASHBOARD_FOOTER_3", "SETTINGS_MODAL_SIDEBAR", "SETTINGS_MODAL_FOOTER"]
-}];
-var ComponentStyleRow = function ComponentStyleRow(_ref3) {
-  var objectKey = _ref3.objectKey,
-    styles = _ref3.styles;
-  if (!styles) return null;
-  var colorEntries = COLOR_KEYS.filter(function (k) {
-    return styles[k];
-  }).map(function (k) {
-    return {
-      key: k,
-      value: styles[k]
-    };
-  });
-  var nonColorEntries = NON_COLOR_KEYS.filter(function (k) {
-    return styles[k];
-  }).map(function (k) {
-    return {
-      key: k,
-      value: styles[k]
-    };
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-row items-center gap-3 py-1.5",
-    children: [/*#__PURE__*/jsx("span", {
-      className: "text-[11px] font-mono opacity-70 w-40 shrink-0 truncate",
-      children: objectKey
-    }), /*#__PURE__*/jsx("div", {
-      className: "flex flex-row items-center gap-1",
-      children: colorEntries.map(function (_ref4) {
-        var key = _ref4.key,
-          value = _ref4.value;
-        if (key.toLowerCase().includes("text")) {
-          return /*#__PURE__*/jsx("div", {
-            className: "h-5 w-5 rounded-sm flex items-center justify-center bg-black/10",
-            title: "".concat(key, ": ").concat(value),
-            children: /*#__PURE__*/jsx("span", {
-              className: "text-[8px] font-bold ".concat(value),
-              children: "Aa"
-            })
-          }, key);
-        }
-        if (key.toLowerCase().includes("border")) {
-          return /*#__PURE__*/jsx("div", {
-            className: "h-5 w-5 rounded-sm border-2 ".concat(value),
-            title: "".concat(key, ": ").concat(value)
-          }, key);
-        }
-        return /*#__PURE__*/jsx("div", {
-          className: "h-5 w-5 rounded-sm ".concat(value),
-          title: "".concat(key, ": ").concat(value)
-        }, key);
-      })
-    }), /*#__PURE__*/jsx("div", {
-      className: "flex flex-row items-center gap-2 flex-1 overflow-hidden",
-      children: nonColorEntries.map(function (_ref5) {
-        var key = _ref5.key,
-          value = _ref5.value;
-        return /*#__PURE__*/jsx("span", {
-          className: "text-[10px] opacity-40 whitespace-nowrap",
-          title: key,
-          children: value
-        }, key);
-      })
-    })]
-  });
-};
-
-// --- Main Component ---
-
-var ThemeDetail = function ThemeDetail(_ref6) {
-  var themeKey = _ref6.themeKey,
-    themes = _ref6.themes,
-    currentThemeKey = _ref6.currentThemeKey,
-    themeVariant = _ref6.themeVariant,
-    onActivate = _ref6.onActivate,
-    onOpenThemeEditor = _ref6.onOpenThemeEditor,
-    _ref6$onDelete = _ref6.onDelete,
-    onDelete = _ref6$onDelete === void 0 ? null : _ref6$onDelete;
-  var theme = themeKey && themes ? themes[themeKey] : null;
-  var displayTheme = useMemo(function () {
-    return theme ? theme[themeVariant] || {} : {};
-  }, [theme, themeVariant]);
-  var isActive = themeKey === currentThemeKey;
-
-  // Memoize all component styles
-  var allStyles = useMemo(function () {
-    var result = {};
-    Object.values(themeObjects).forEach(function (key) {
-      result[key] = getStylesForItem(key, displayTheme, {});
-    });
-    return result;
-  }, [displayTheme]);
-  if (!theme) return null;
-  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",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "flex flex-row items-center gap-3",
-        children: [/*#__PURE__*/jsx(SubHeading, {
-          title: theme.name || themeKey,
-          padding: false
-        }), isActive && /*#__PURE__*/jsx("span", {
-          className: "text-xs opacity-40",
-          children: "active"
-        })]
-      }), /*#__PURE__*/jsx(ColorSwatchGrid, {
-        displayTheme: displayTheme
-      }), /*#__PURE__*/jsxs("div", {
-        className: "flex flex-col space-y-2",
-        children: [/*#__PURE__*/jsx("span", {
-          className: "text-xs font-semibold opacity-50",
-          children: "Component Styles"
-        }), /*#__PURE__*/jsx(Accordion2, {
-          type: "multiple",
-          children: COMPONENT_GROUPS.map(function (group) {
-            // Only show groups that have valid theme objects
-            var validKeys = group.keys.filter(function (k) {
-              return themeObjects[k];
-            });
-            if (validKeys.length === 0) return null;
-            return /*#__PURE__*/jsxs(Accordion2.Item, {
-              value: group.label,
-              children: [/*#__PURE__*/jsxs(Accordion2.Trigger, {
-                value: group.label,
-                children: [group.label, " (", validKeys.length, ")"]
-              }), /*#__PURE__*/jsx(Accordion2.Content, {
-                value: group.label,
-                children: /*#__PURE__*/jsx("div", {
-                  className: "flex flex-col",
-                  children: validKeys.map(function (k) {
-                    var objectValue = themeObjects[k];
-                    return /*#__PURE__*/jsx(ComponentStyleRow, {
-                      objectKey: objectValue,
-                      styles: allStyles[objectValue]
-                    }, k);
-                  })
-                })
-              })]
-            }, group.label);
-          })
-        })]
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: "flex-shrink-0 flex flex-row justify-between px-6 py-4 border-t border-white/10",
-      children: [/*#__PURE__*/jsx("div", {
-        children: !isActive && onDelete && /*#__PURE__*/jsx(Button, {
-          title: "Delete",
-          onClick: function onClick() {
-            return onDelete(themeKey);
-          },
-          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"
-        })]
-      })]
-    })]
-  });
-};
+var THEME_TAGS = ["dark", "light", "colorful", "minimal", "professional", "vibrant", "pastel", "high-contrast", "warm", "cool"];
 
-function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ThemesSection = function ThemesSection(_ref) {
-  var _ref$onOpenThemeEdito = _ref.onOpenThemeEditor,
-    onOpenThemeEditor = _ref$onOpenThemeEdito === void 0 ? null : _ref$onOpenThemeEdito,
-    _ref$dashApi = _ref.dashApi,
-    dashApi = _ref$dashApi === void 0 ? null : _ref$dashApi,
-    _ref$credentials = _ref.credentials,
-    credentials = _ref$credentials === void 0 ? null : _ref$credentials,
-    _ref$createRequested = _ref.createRequested,
-    createRequested = _ref$createRequested === void 0 ? false : _ref$createRequested,
-    _ref$onCreateAcknowle = _ref.onCreateAcknowledged,
-    onCreateAcknowledged = _ref$onCreateAcknowle === void 0 ? null : _ref$onCreateAcknowle;
+/**
+ * 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),
-    themes = _useContext.themes,
-    currentThemeKey = _useContext.themeKey,
-    themeVariant = _useContext.themeVariant,
-    changeCurrentTheme = _useContext.changeCurrentTheme,
-    changeThemeVariant = _useContext.changeThemeVariant,
-    changeThemesForApplication = _useContext.changeThemesForApplication,
     currentTheme = _useContext.currentTheme;
-  var _useState = useState(currentThemeKey),
+  var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+
+  // Stepper state
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    selectedThemeKey = _useState2[0],
-    setSelectedThemeKey = _useState2[1];
-  var _useState3 = useState(GENERATE_MODES.NONE),
+    step = _useState2[0],
+    setStep = _useState2[1];
+
+  // Step 0: Account / Auth
+  var _useState3 = useState("loading"),
     _useState4 = _slicedToArray(_useState3, 2),
-    generateMode = _useState4[0],
-    setGenerateMode = _useState4[1];
-  var _useState5 = useState(""),
+    authStatus = _useState4[0],
+    setAuthStatus = _useState4[1];
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    wizardName = _useState6[0],
-    setWizardName = _useState6[1];
+    profile = _useState6[0],
+    setProfile = _useState6[1];
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    wizardMethod = _useState8[0],
-    setWizardMethod = _useState8[1];
-  var _useState9 = useState(null),
+    authFlow = _useState8[0],
+    setAuthFlow = _useState8[1];
+  var _useState9 = useState(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    wizardTheme = _useState0[0],
-    setWizardTheme = _useState0[1];
-  var themeEntries = themes ? Object.entries(themes) : [];
-  var appId = credentials === null || credentials === void 0 ? void 0 : credentials.appId;
+    isPolling = _useState0[0],
+    setIsPolling = _useState0[1];
+  var _useState1 = useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    authError = _useState10[0],
+    setAuthError = _useState10[1];
 
-  // Handle create request from parent — enter wizard mode
+  // 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 (createRequested) {
-      setGenerateMode(GENERATE_MODES.WIZARD);
-      setWizardName("");
-      setWizardMethod(null);
-      setWizardTheme(null);
-      setSelectedThemeKey(null);
-      onCreateAcknowledged && onCreateAcknowledged();
+    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);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [createRequested]);
-  function handleCreateFromPreset(preset) {
-    if (!dashApi || !appId) return;
-    var key = preset.id || "theme-".concat(Date.now());
-    preset.id = key;
-    saveAndSelectTheme(key, preset);
-    setGenerateMode(GENERATE_MODES.NONE);
+    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 handleCreateFromHarmony(theme) {
-    if (!dashApi || !appId) return;
-    var key = theme.id;
-    saveAndSelectTheme(key, theme);
-    setGenerateMode(GENERATE_MODES.NONE);
+  function handleClose() {
+    setIsOpen(false);
+    setTimeout(resetState, 200);
   }
-  function handleWizardComplete() {
-    if (!wizardTheme || !wizardName.trim()) return;
-    if (!dashApi || !appId) return;
-    var key = wizardTheme.id || "theme-".concat(Date.now());
-    var finalTheme = _objectSpread$5(_objectSpread$5({}, wizardTheme), {}, {
-      id: key,
-      name: wizardName.trim()
-    });
-    saveAndSelectTheme(key, finalTheme);
+  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 saveAndSelectTheme(key, rawTheme) {
-    dashApi.saveTheme(appId, key, rawTheme, function (e, message) {
-      if (message && message.themes) {
-        changeThemesForApplication(message.themes);
-      }
-      setSelectedThemeKey(key);
-      setGenerateMode(GENERATE_MODES.NONE);
-    }, function (e, err) {
+  function toggleTag(tag) {
+    setSelectedTags(function (prev) {
+      return prev.includes(tag) ? prev.filter(function (t) {
+        return t !== tag;
+      }) : [].concat(_toConsumableArray(prev), [tag]);
     });
   }
-  function handleDeleteTheme(key) {
+  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 ---
+
+var SwatchCell = function SwatchCell(_ref) {
+  var tokenKey = _ref.tokenKey,
+    resolvedClass = _ref.resolvedClass,
+    type = _ref.type;
+  var tooltip = "".concat(tokenKey, " \u2192 ").concat(resolvedClass || "(none)");
+  if (type === "bg") {
+    return /*#__PURE__*/jsx("div", {
+      className: "h-8 flex-1 rounded ".concat(resolvedClass || ""),
+      title: tooltip
+    });
+  }
+  if (type === "text") {
+    return /*#__PURE__*/jsx("div", {
+      className: "h-8 flex-1 rounded flex items-center justify-center bg-black/10",
+      title: tooltip,
+      children: /*#__PURE__*/jsx("span", {
+        className: "text-xs font-bold ".concat(resolvedClass || ""),
+        children: "Aa"
+      })
+    });
+  }
+
+  // border
+  return /*#__PURE__*/jsx("div", {
+    className: "h-8 flex-1 rounded border-2 ".concat(resolvedClass || ""),
+    title: tooltip
+  });
+};
+var ColorSwatchGrid = function ColorSwatchGrid(_ref2) {
+  var displayTheme = _ref2.displayTheme;
+  return /*#__PURE__*/jsx("div", {
+    className: "flex flex-col space-y-5",
+    children: colorTypes.map(function (family) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col space-y-2",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-semibold opacity-50 capitalize",
+          children: family
+        }), TOKEN_TYPES.map(function (type) {
+          return /*#__PURE__*/jsxs("div", {
+            className: "flex flex-row items-center gap-2",
+            children: [/*#__PURE__*/jsx("span", {
+              className: "text-[10px] opacity-40 w-10 text-right shrink-0",
+              children: type
+            }), /*#__PURE__*/jsx("div", {
+              className: "flex flex-row gap-1.5 flex-1",
+              children: themeVariants.map(function (shade) {
+                var tokenKey = "".concat(type, "-").concat(family, "-").concat(shade);
+                var resolvedClass = displayTheme[tokenKey] || "";
+                return /*#__PURE__*/jsx(SwatchCell, {
+                  tokenKey: tokenKey,
+                  resolvedClass: resolvedClass,
+                  type: type
+                }, shade);
+              })
+            })]
+          }, type);
+        })]
+      }, family);
+    })
+  });
+};
+
+// --- Component Style Accordion ---
+
+var COLOR_KEYS = ["backgroundColor", "textColor", "borderColor", "hoverBackgroundColor", "hoverTextColor", "hoverBorderColor", "activeBackgroundColor", "activeTextColor", "focusRingColor", "focusBorderColor"];
+var NON_COLOR_KEYS = ["shadow", "borderRadius", "spacing", "textSize", "iconSize", "fontWeight", "transition", "cursor", "disabledOpacity", "letterSpacing", "lineHeight"];
+var COMPONENT_GROUPS = [{
+  label: "Buttons",
+  keys: ["BUTTON", "BUTTON_2", "BUTTON_3", "BUTTON_ICON", "BUTTON_ICON_2", "BUTTON_ICON_3"]
+}, {
+  label: "Panels",
+  keys: ["PANEL", "PANEL_2", "PANEL_3", "PANEL_HEADER", "PANEL_HEADER_2", "PANEL_HEADER_3", "PANEL_FOOTER", "PANEL_FOOTER_2", "PANEL_FOOTER_3", "DASH_PANEL", "DASH_PANEL_2", "DASH_PANEL_3", "DASH_PANEL_HEADER", "DASH_PANEL_HEADER_2", "DASH_PANEL_HEADER_3", "DASH_PANEL_FOOTER", "DASH_PANEL_FOOTER_2", "DASH_PANEL_FOOTER_3"]
+}, {
+  label: "Cards",
+  keys: ["CARD", "CARD_2", "CARD_3", "STAT_CARD", "STAT_CARD_LABEL", "STAT_CARD_VALUE", "STAT_CARD_CHANGE"]
+}, {
+  label: "Typography",
+  keys: ["HEADING", "HEADING_2", "HEADING_3", "SUBHEADING", "SUBHEADING_2", "SUBHEADING_3", "PARAGRAPH", "PARAGRAPH_2", "PARAGRAPH_3"]
+}, {
+  label: "Navigation",
+  keys: ["MENU_ITEM", "MENU_ITEM_2", "MENU_ITEM_3", "TABS", "TABS_2", "TABS_3", "TABS_LIST", "TABS_LIST_2", "TABS_LIST_3", "TABS_TRIGGER", "TABS_TRIGGER_2", "TABS_TRIGGER_3", "TABS_CONTENT", "TABS_CONTENT_2", "TABS_CONTENT_3", "SIDEBAR", "SIDEBAR_ITEM", "NAVBAR", "TABBED_NAVBAR", "BREADCRUMBS", "BREADCRUMBS_2", "BREADCRUMBS_3"]
+}, {
+  label: "Forms",
+  keys: ["INPUT_TEXT", "SELECT_MENU", "TEXTAREA", "CHECKBOX", "RADIO", "SWITCH", "SLIDER", "SEARCH_INPUT", "TOGGLE", "TOGGLE_2", "TOGGLE_3", "FORM_LABEL"]
+}, {
+  label: "Feedback",
+  keys: ["ALERT", "ALERT_2", "ALERT_3", "ALERT_BANNER", "TOAST", "TOAST_2", "TOAST_3", "PROGRESS_BAR", "PROGRESS_BAR_2", "PROGRESS_BAR_3", "TAG", "TAG_2", "TAG_3", "TOOLTIP", "EMPTY_STATE"]
+}, {
+  label: "Tables",
+  keys: ["TABLE", "TABLE_2", "TABLE_3", "DATA_LIST", "DATA_LIST_ITEM"]
+}, {
+  label: "Advanced",
+  keys: ["ACCORDION", "ACCORDION_2", "ACCORDION_3", "ACCORDION_ITEM", "ACCORDION_ITEM_2", "ACCORDION_ITEM_3", "ACCORDION_TRIGGER", "ACCORDION_TRIGGER_2", "ACCORDION_TRIGGER_3", "ACCORDION_CONTENT", "ACCORDION_CONTENT_2", "ACCORDION_CONTENT_3", "COMMAND_PALETTE", "COMMAND_PALETTE_INPUT", "COMMAND_PALETTE_ITEM", "DRAWER", "DRAWER_HEADER", "DRAWER_FOOTER", "STEPPER", "STEPPER_STEP", "STEPPER_CONNECTOR", "SKELETON", "CODE_EDITOR"]
+}, {
+  label: "Layout",
+  keys: ["WIDGET_CHROME", "WIDGET", "WORKSPACE", "LAYOUT_CONTAINER", "DASHBOARD_FOOTER", "DASHBOARD_FOOTER_2", "DASHBOARD_FOOTER_3", "SETTINGS_MODAL_SIDEBAR", "SETTINGS_MODAL_FOOTER"]
+}];
+var ComponentStyleRow = function ComponentStyleRow(_ref3) {
+  var objectKey = _ref3.objectKey,
+    styles = _ref3.styles;
+  if (!styles) return null;
+  var colorEntries = COLOR_KEYS.filter(function (k) {
+    return styles[k];
+  }).map(function (k) {
+    return {
+      key: k,
+      value: styles[k]
+    };
+  });
+  var nonColorEntries = NON_COLOR_KEYS.filter(function (k) {
+    return styles[k];
+  }).map(function (k) {
+    return {
+      key: k,
+      value: styles[k]
+    };
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-row items-center gap-3 py-1.5",
+    children: [/*#__PURE__*/jsx("span", {
+      className: "text-[11px] font-mono opacity-70 w-40 shrink-0 truncate",
+      children: objectKey
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex flex-row items-center gap-1",
+      children: colorEntries.map(function (_ref4) {
+        var key = _ref4.key,
+          value = _ref4.value;
+        if (key.toLowerCase().includes("text")) {
+          return /*#__PURE__*/jsx("div", {
+            className: "h-5 w-5 rounded-sm flex items-center justify-center bg-black/10",
+            title: "".concat(key, ": ").concat(value),
+            children: /*#__PURE__*/jsx("span", {
+              className: "text-[8px] font-bold ".concat(value),
+              children: "Aa"
+            })
+          }, key);
+        }
+        if (key.toLowerCase().includes("border")) {
+          return /*#__PURE__*/jsx("div", {
+            className: "h-5 w-5 rounded-sm border-2 ".concat(value),
+            title: "".concat(key, ": ").concat(value)
+          }, key);
+        }
+        return /*#__PURE__*/jsx("div", {
+          className: "h-5 w-5 rounded-sm ".concat(value),
+          title: "".concat(key, ": ").concat(value)
+        }, key);
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex flex-row items-center gap-2 flex-1 overflow-hidden",
+      children: nonColorEntries.map(function (_ref5) {
+        var key = _ref5.key,
+          value = _ref5.value;
+        return /*#__PURE__*/jsx("span", {
+          className: "text-[10px] opacity-40 whitespace-nowrap",
+          title: key,
+          children: value
+        }, key);
+      })
+    })]
+  });
+};
+
+// --- Main Component ---
+
+var ThemeDetail = function ThemeDetail(_ref6) {
+  var themeKey = _ref6.themeKey,
+    themes = _ref6.themes,
+    currentThemeKey = _ref6.currentThemeKey,
+    themeVariant = _ref6.themeVariant,
+    onActivate = _ref6.onActivate,
+    onOpenThemeEditor = _ref6.onOpenThemeEditor,
+    _ref6$onDelete = _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]);
+  var isActive = themeKey === currentThemeKey;
+
+  // Memoize all component styles
+  var allStyles = useMemo(function () {
+    var result = {};
+    Object.values(themeObjects).forEach(function (key) {
+      result[key] = getStylesForItem(key, displayTheme, {});
+    });
+    return result;
+  }, [displayTheme]);
+  if (!theme) return null;
+  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",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex flex-row items-center gap-3",
+        children: [/*#__PURE__*/jsx(SubHeading, {
+          title: theme.name || themeKey,
+          padding: false
+        }), isActive && /*#__PURE__*/jsx("span", {
+          className: "text-xs opacity-40",
+          children: "active"
+        })]
+      }), /*#__PURE__*/jsx(ColorSwatchGrid, {
+        displayTheme: displayTheme
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col space-y-2",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-semibold opacity-50",
+          children: "Component Styles"
+        }), /*#__PURE__*/jsx(Accordion2, {
+          type: "multiple",
+          children: COMPONENT_GROUPS.map(function (group) {
+            // Only show groups that have valid theme objects
+            var validKeys = group.keys.filter(function (k) {
+              return themeObjects[k];
+            });
+            if (validKeys.length === 0) return null;
+            return /*#__PURE__*/jsxs(Accordion2.Item, {
+              value: group.label,
+              children: [/*#__PURE__*/jsxs(Accordion2.Trigger, {
+                value: group.label,
+                children: [group.label, " (", validKeys.length, ")"]
+              }), /*#__PURE__*/jsx(Accordion2.Content, {
+                value: group.label,
+                children: /*#__PURE__*/jsx("div", {
+                  className: "flex flex-col",
+                  children: validKeys.map(function (k) {
+                    var objectValue = themeObjects[k];
+                    return /*#__PURE__*/jsx(ComponentStyleRow, {
+                      objectKey: objectValue,
+                      styles: allStyles[objectValue]
+                    }, k);
+                  })
+                })
+              })]
+            }, group.label);
+          })
+        })]
+      })]
+    }), /*#__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", {
+        className: "flex-shrink-0 px-4 pt-4",
+        children: /*#__PURE__*/jsxs("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setSelectedPackageName(null);
+          },
+          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(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 setSelectedPackageName(pkg.name);
+          },
+          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" : ""]
+    })]
+  });
+};
+
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ThemesSection = function ThemesSection(_ref) {
+  var _ref$onOpenThemeEdito = _ref.onOpenThemeEditor,
+    onOpenThemeEditor = _ref$onOpenThemeEdito === void 0 ? null : _ref$onOpenThemeEdito,
+    _ref$dashApi = _ref.dashApi,
+    dashApi = _ref$dashApi === void 0 ? null : _ref$dashApi,
+    _ref$credentials = _ref.credentials,
+    credentials = _ref$credentials === void 0 ? null : _ref$credentials,
+    _ref$createRequested = _ref.createRequested,
+    createRequested = _ref$createRequested === void 0 ? false : _ref$createRequested,
+    _ref$onCreateAcknowle = _ref.onCreateAcknowledged,
+    onCreateAcknowledged = _ref$onCreateAcknowle === void 0 ? null : _ref$onCreateAcknowle;
+  var _useContext = useContext(ThemeContext),
+    themes = _useContext.themes,
+    currentThemeKey = _useContext.themeKey,
+    themeVariant = _useContext.themeVariant,
+    changeCurrentTheme = _useContext.changeCurrentTheme,
+    changeThemeVariant = _useContext.changeThemeVariant,
+    changeThemesForApplication = _useContext.changeThemesForApplication,
+    currentTheme = _useContext.currentTheme;
+  var _useState = useState(currentThemeKey),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedThemeKey = _useState2[0],
+    setSelectedThemeKey = _useState2[1];
+  var _useState3 = useState(GENERATE_MODES.NONE),
+    _useState4 = _slicedToArray(_useState3, 2),
+    generateMode = _useState4[0],
+    setGenerateMode = _useState4[1];
+  var _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    wizardName = _useState6[0],
+    setWizardName = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    wizardMethod = _useState8[0],
+    setWizardMethod = _useState8[1];
+  var _useState9 = useState(null),
+    _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 && !prevCreateRequested.current) {
+      setGenerateMode(GENERATE_MODES.WIZARD);
+      setWizardName("");
+      setWizardMethod(null);
+      setWizardTheme(null);
+      setSelectedThemeKey(null);
+      setInstallMode(null);
+    }
+    prevCreateRequested.current = createRequested;
+    if (createRequested && onCreateAcknowledged) {
+      onCreateAcknowledged();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [createRequested]);
+  function handleCreateFromPreset(preset) {
+    if (!dashApi || !appId) return;
+    var key = preset.id || "theme-".concat(Date.now());
+    preset.id = key;
+    saveAndSelectTheme(key, preset);
+    setGenerateMode(GENERATE_MODES.NONE);
+  }
+  function handleCreateFromHarmony(theme) {
+    if (!dashApi || !appId) return;
+    var key = theme.id;
+    saveAndSelectTheme(key, theme);
+    setGenerateMode(GENERATE_MODES.NONE);
+  }
+  function handleWizardComplete() {
+    if (!wizardTheme || !wizardName.trim()) return;
+    if (!dashApi || !appId) return;
+    var key = wizardTheme.id || "theme-".concat(Date.now());
+    var finalTheme = _objectSpread$5(_objectSpread$5({}, wizardTheme), {}, {
+      id: key,
+      name: wizardName.trim()
+    });
+    saveAndSelectTheme(key, finalTheme);
+  }
+  function saveAndSelectTheme(key, rawTheme) {
+    dashApi.saveTheme(appId, key, rawTheme, function (e, message) {
+      if (message && message.themes) {
+        changeThemesForApplication(message.themes);
+      }
+      setSelectedThemeKey(key);
+      setGenerateMode(GENERATE_MODES.NONE);
+    }, function (e, err) {
+    });
+  }
+  function handleDeleteTheme(key) {
     if (!dashApi || !appId) return;
     if (key === currentThemeKey) {
       var _themeEntries$find;
@@ -36543,63 +37716,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 +37844,8 @@ var ThemesSection = function ThemesSection(_ref) {
       themeVariant: themeVariant,
       onActivate: handleActivate,
       onOpenThemeEditor: handleEdit,
-      onDelete: handleDeleteTheme
+      onDelete: handleDeleteTheme,
+      appId: appId
     });
   }
   return /*#__PURE__*/jsx(SectionLayout, {