@trops/dash-core 0.1.139 → 0.1.141

package/dist/index.js

@@ -31258,7 +31258,8 @@ var GENERATE_MODES = {
   NONE: null,
   PRESETS: "presets",
   COLOR: "color",
-  WIZARD: "wizard"
+  WIZARD: "wizard",
+  CHOOSER: "chooser"
 };
 
 // ─── Preset Gallery ──────────────────────────────────────────────────────
@@ -31552,7 +31553,7 @@ var ThemeQuickCreate = function ThemeQuickCreate(_ref8) {
         className: "text-sm font-semibold opacity-50",
         children: "Generation Method"
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "grid grid-cols-2 gap-2",
+        className: "flex flex-col gap-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(MethodCard, {
           icon: "swatchbook",
           title: "Presets",
@@ -31569,15 +31570,15 @@ var ThemeQuickCreate = function ThemeQuickCreate(_ref8) {
           onClick: function onClick() {
             return handleMethodSelect("random");
           }
+        }), /*#__PURE__*/jsxRuntime.jsx(MethodCard, {
+          icon: "droplet",
+          title: "From Color",
+          subtitle: "Build from a base color with harmony rules",
+          selected: wizardMethod === "color",
+          onClick: function onClick() {
+            return handleMethodSelect("color");
+          }
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(MethodCard, {
-        icon: "droplet",
-        title: "From Color",
-        subtitle: "Build from a base color with harmony rules",
-        selected: wizardMethod === "color",
-        onClick: function onClick() {
-          return handleMethodSelect("color");
-        }
       })]
     }), wizardMethod === "presets" && /*#__PURE__*/jsxRuntime.jsx(PresetGallery, {
       onSelect: function onSelect(preset) {
@@ -31604,126 +31605,836 @@ var ThemeQuickCreate = function ThemeQuickCreate(_ref8) {
   });
 };
 
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ThemeManagerModal = function ThemeManagerModal(_ref) {
-  var open = _ref.open,
-    setIsOpen = _ref.setIsOpen;
+var ChooserCard = function ChooserCard(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-1.5 p-4 rounded-lg cursor-pointer transition-all bg-white/5 hover:bg-white/10 hover:ring-1 hover:ring-white/20",
+    onClick: onClick,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row items-center gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: icon,
+        className: "h-3.5 w-3.5 opacity-50"
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm font-medium",
+        children: title
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-xs opacity-40",
+      children: subtitle
+    })]
+  });
+};
+var ThemeNewChooser = function ThemeNewChooser(_ref2) {
+  var onSearchThemes = _ref2.onSearchThemes,
+    onCreateNew = _ref2.onCreateNew;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-6 p-6 overflow-y-auto flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-sm font-semibold opacity-50",
+      children: "Add a Theme"
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "grid grid-cols-2 gap-3",
+      children: [/*#__PURE__*/jsxRuntime.jsx(ChooserCard, {
+        icon: "magnifying-glass",
+        title: "Search for Themes",
+        subtitle: "Browse the theme marketplace",
+        onClick: onSearchThemes
+      }), /*#__PURE__*/jsxRuntime.jsx(ChooserCard, {
+        icon: "wand-magic-sparkles",
+        title: "Create New",
+        subtitle: "Build from presets, random palettes, or color harmony rules",
+        onClick: onCreateNew
+      })]
+    })]
+  });
+};
+
+/**
+ * Shared Tailwind color utilities.
+ *
+ * Single source of truth for mapping Tailwind color family names to hex values.
+ * Used by both renderer components (theme detail/discovery) and electron
+ * controllers (theme publish/install).
+ */
+
+// Tailwind color family name → representative hex (500 shade)
+var TAILWIND_COLORS = {
+  slate: "#64748b",
+  gray: "#6b7280",
+  zinc: "#71717a",
+  neutral: "#737373",
+  stone: "#78716c",
+  red: "#ef4444",
+  orange: "#f97316",
+  amber: "#f59e0b",
+  yellow: "#eab308",
+  lime: "#84cc16",
+  green: "#22c55e",
+  emerald: "#10b981",
+  teal: "#14b8a6",
+  cyan: "#06b6d4",
+  sky: "#0ea5e9",
+  blue: "#3b82f6",
+  indigo: "#6366f1",
+  violet: "#8b5cf6",
+  purple: "#a855f7",
+  fuchsia: "#d946ef",
+  pink: "#ec4899",
+  rose: "#f43f5e"
+};
+
+/**
+ * Convert a color value to a CSS-usable color.
+ * If it's a Tailwind family name, map to its hex 500 shade.
+ * If it already looks like a hex/rgb/hsl value, return as-is.
+ */
+function toDisplayColor(value) {
+  if (!value) return "";
+  var lower = value.toLowerCase().trim();
+  return TAILWIND_COLORS[lower] || value;
+}
+
+function adjustColor(hex, amount) {
+  if (!hex || !hex.startsWith("#")) return hex;
+  var num = parseInt(hex.slice(1), 16);
+  var r = Math.min(255, Math.max(0, (num >> 16 & 0xff) + Math.round(255 * amount)));
+  var g = Math.min(255, Math.max(0, (num >> 8 & 0xff) + Math.round(255 * amount)));
+  var b = Math.min(255, Math.max(0, (num & 0xff) + Math.round(255 * amount)));
+  return "#".concat((r << 16 | g << 8 | b).toString(16).padStart(6, "0"));
+}
+
+/**
+ * ThemePreviewMockup — renders a mini dashboard mockup using theme colors.
+ */
+var ThemePreviewMockup = function ThemePreviewMockup(_ref) {
+  var colors = _ref.colors;
+  var primary = colors.primary,
+    secondary = colors.secondary,
+    tertiary = colors.tertiary,
+    neutral = colors.neutral;
+  var bg = neutral || adjustColor(primary, -0.6);
+  var sidebar = adjustColor(primary, -0.5);
+  var header = adjustColor(primary, -0.4);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-xs font-semibold opacity-50",
+      children: "PREVIEW"
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "rounded-lg overflow-hidden border border-white/10",
+      style: {
+        backgroundColor: bg,
+        minHeight: 160
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row h-full",
+        style: {
+          minHeight: 160
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1.5 p-2 w-24 flex-shrink-0",
+          style: {
+            backgroundColor: sidebar
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "h-2 w-12 rounded-sm opacity-60",
+            style: {
+              backgroundColor: primary
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "h-2 w-16 rounded-sm opacity-30",
+            style: {
+              backgroundColor: secondary
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "h-2 w-10 rounded-sm opacity-30",
+            style: {
+              backgroundColor: secondary
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "h-2 w-14 rounded-sm opacity-30",
+            style: {
+              backgroundColor: secondary
+            }
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col flex-1 min-w-0",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2 px-3 py-2",
+            style: {
+              backgroundColor: header
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "h-2 w-20 rounded-sm opacity-70",
+              style: {
+                backgroundColor: primary
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex-1"
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "h-2 w-8 rounded-sm opacity-40",
+              style: {
+                backgroundColor: tertiary || secondary
+              }
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "grid grid-cols-3 gap-2 p-3 flex-1",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "rounded p-2 flex flex-col gap-1.5",
+              style: {
+                backgroundColor: adjustColor(primary, -0.35)
+              },
+              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "h-1.5 w-10 rounded-sm",
+                style: {
+                  backgroundColor: primary,
+                  opacity: 0.7
+                }
+              }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "h-8 w-full rounded-sm",
+                style: {
+                  backgroundColor: secondary,
+                  opacity: 0.3
+                }
+              }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "h-1.5 w-12 rounded-sm",
+                style: {
+                  backgroundColor: tertiary || secondary,
+                  opacity: 0.4
+                }
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "rounded p-2 flex flex-col gap-1.5",
+              style: {
+                backgroundColor: adjustColor(primary, -0.35)
+              },
+              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "h-1.5 w-8 rounded-sm",
+                style: {
+                  backgroundColor: secondary,
+                  opacity: 0.7
+                }
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex flex-row gap-1 flex-1",
+                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "flex-1 rounded-sm",
+                  style: {
+                    backgroundColor: primary,
+                    opacity: 0.25
+                  }
+                }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "flex-1 rounded-sm",
+                  style: {
+                    backgroundColor: tertiary || secondary,
+                    opacity: 0.25
+                  }
+                })]
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "rounded p-2 flex flex-col gap-1.5",
+              style: {
+                backgroundColor: adjustColor(primary, -0.35)
+              },
+              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "h-1.5 w-12 rounded-sm",
+                style: {
+                  backgroundColor: tertiary || primary,
+                  opacity: 0.7
+                }
+              }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "h-4 w-full rounded-sm",
+                style: {
+                  backgroundColor: primary,
+                  opacity: 0.2
+                }
+              }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "h-4 w-full rounded-sm",
+                style: {
+                  backgroundColor: secondary,
+                  opacity: 0.2
+                }
+              })]
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+};
+
+/**
+ * RegistryThemeDetail — detail panel for a registry theme package.
+ *
+ * Shows package header, color preview swatches, description, tags, and install button.
+ */
+var RegistryThemeDetail = function RegistryThemeDetail(_ref2) {
+  var themePackage = _ref2.themePackage,
+    appId = _ref2.appId,
+    onInstallComplete = _ref2.onInstallComplete;
   var _useContext = React.useContext(DashReact.ThemeContext),
-    changeThemesForApplication = _useContext.changeThemesForApplication,
-    rawThemes = _useContext.rawThemes,
-    themes = _useContext.themes,
-    changeCurrentTheme = _useContext.changeCurrentTheme,
-    changeThemeVariant = _useContext.changeThemeVariant,
-    currentTheme = _useContext.currentTheme;
-  var _useContext2 = React.useContext(AppContext),
-    dashApi = _useContext2.dashApi,
-    credentials = _useContext2.credentials,
-    settings = _useContext2.settings;
-  var _useState = React.useState(null),
+    currentTheme = _useContext.currentTheme,
+    changeThemesForApplication = _useContext.changeThemesForApplication;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    themeSelected = _useState2[0],
-    setThemeSelected = _useState2[1];
+    isInstalling = _useState2[0],
+    setIsInstalling = _useState2[1];
   var _useState3 = React.useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    rawThemeSelected = _useState4[0],
-    setRawThemeSelected = _useState4[1];
-  var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    themeKeySelected = _useState6[0],
-    setThemeKeySelected = _useState6[1];
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isEditing = _useState8[0],
-    setIsEditing = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    isCreating = _useState0[0],
-    setIsCreating = _useState0[1];
-  var _useState1 = React.useState(""),
-    _useState10 = _slicedToArray(_useState1, 2),
-    wizardName = _useState10[0],
-    setWizardName = _useState10[1];
-  var _useState11 = React.useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    wizardMethod = _useState12[0],
-    setWizardMethod = _useState12[1];
-  var _useState13 = React.useState(null),
-    _useState14 = _slicedToArray(_useState13, 2),
-    wizardTheme = _useState14[0],
-    setWizardTheme = _useState14[1];
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    updateState = _React$useState2[1];
-  var forceUpdate = React.useCallback(function () {
-    return updateState({});
-  }, []);
-  var footerStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL_FOOTER, currentTheme, {});
-  React.useEffect(function () {
-    if (open === false) {
-      setThemeSelected(null);
-      setRawThemeSelected(null);
-      setThemeKeySelected(null);
-      setIsCreating(false);
-    } else {
-      if (themeKeySelected === null && themes) {
-        var themeKeyTemp = settings && "theme" in settings ? settings["theme"] in themes ? settings["theme"] : Object.keys(themes)[0] : Object.keys(themes)[0];
-        var themeModel = ThemeModel(rawThemes[themeKeyTemp]);
-        setThemeKeySelected(function () {
-          return themeKeyTemp;
-        });
-        setThemeSelected(function () {
-          return themeModel;
-        });
-        setRawThemeSelected(function () {
-          return rawThemes[themeKeyTemp];
-        });
-      }
-    }
-  }, [open, themes, rawThemes, settings, themeKeySelected]);
-  function handleThemeSelected(themeUpdated, themeKey) {
-    var newRawThemeSelected = DashReact.deepCopy(rawThemeSelected);
-    if (newRawThemeSelected !== null) {
-      Object.keys(themeUpdated).forEach(function (k) {
-        newRawThemeSelected[k] = themeUpdated[k];
-      });
-    } else {
-      newRawThemeSelected = DashReact.deepCopy(themeUpdated);
-    }
-    setRawThemeSelected(function () {
-      return newRawThemeSelected;
-    });
-    var newTheme = ThemeModel(DashReact.deepCopy(newRawThemeSelected));
-    setThemeKeySelected(function () {
-      return themeKey;
-    });
-    setThemeSelected(function () {
-      return newTheme;
-    });
-    forceUpdate();
-  }
-  function handleStartCreateTheme() {
-    setIsCreating(true);
-    setIsEditing(false);
-    setWizardName("");
-    setWizardMethod(null);
-    setWizardTheme(null);
+    installResult = _useState4[0],
+    setInstallResult = _useState4[1];
+  var pkg = themePackage;
+  if (!pkg) return null;
+  var rawColors = pkg.colors || {};
+  // Also check top-level fields for themes that store colors directly
+  var colors = {
+    primary: toDisplayColor(rawColors.primary || pkg.primary || ""),
+    secondary: toDisplayColor(rawColors.secondary || pkg.secondary || ""),
+    tertiary: toDisplayColor(rawColors.tertiary || pkg.tertiary || ""),
+    neutral: toDisplayColor(rawColors.neutral || pkg.neutral || "")
+  };
+  function handleInstall() {
+    return _handleInstall.apply(this, arguments);
   }
-  function handleWizardComplete() {
-    if (!wizardTheme || !wizardName.trim()) return;
-    var key = wizardTheme.id || "theme-".concat(Date.now());
-    var finalTheme = _objectSpread$b(_objectSpread$b({}, wizardTheme), {}, {
-      id: key,
-      name: wizardName.trim()
-    });
-    if (dashApi) {
-      dashApi.saveTheme(credentials.appId, key, finalTheme, function (e, message) {
-        changeThemesForApplication(message["themes"]);
-        setIsCreating(false);
-        setIsEditing(false);
-        var newThemes = message["themes"];
-        if (newThemes && newThemes[key]) {
-          setThemeKeySelected(key);
+  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__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row items-center gap-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "h-5 w-5 flex-shrink-0 flex items-center justify-center",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "palette",
+            className: "h-5 w-5"
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
+            title: pkg.displayName || pkg.name,
+            padding: false
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2 mt-0.5",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-sm opacity-60",
+              children: ["by ", pkg.author || "Unknown"]
+            }), pkg.version && /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: ["v", pkg.version]
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("hr", {
+        className: currentTheme["border-primary-medium"]
+      }), colorEntries.length > 0 && /*#__PURE__*/jsxRuntime.jsx(ThemePreviewMockup, {
+        colors: colors
+      }), colorEntries.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-row gap-3",
+        children: colorEntries.map(function (_ref3) {
+          var label = _ref3.label,
+            value = _ref3.value;
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-col items-center gap-1 flex-1",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "h-8 w-8 rounded border-2 border-white/20",
+              style: {
+                backgroundColor: value
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-[10px] opacity-50",
+              children: label
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-[10px] opacity-30 font-mono",
+              children: value
+            })]
+          }, label);
+        })
+      }), pkg.description && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "text-sm",
+        children: pkg.description
+      }), pkg.tags && pkg.tags.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-wrap gap-1",
+        children: pkg.tags.map(function (tag) {
+          return /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-60"),
+            children: tag
+          }, tag);
+        })
+      }), installResult && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.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 ThemeColorDots = function ThemeColorDots(_ref) {
+  var theme = _ref.theme,
+    colors = _ref.colors,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "h-2.5 w-2.5" : _ref$size;
+  var c = colors || {};
+  var values = [toDisplayColor(c.primary || (theme === null || theme === void 0 ? void 0 : theme.primary) || ""), toDisplayColor(c.secondary || (theme === null || theme === void 0 ? void 0 : theme.secondary) || ""), toDisplayColor(c.tertiary || (theme === null || theme === void 0 ? void 0 : theme.tertiary) || "")].filter(Boolean);
+  if (values.length === 0) return null;
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: "flex items-center gap-0.5",
+    children: values.map(function (color, i) {
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "".concat(size, " rounded-sm border border-white/20 flex-shrink-0"),
+        style: {
+          backgroundColor: color
+        }
+      }, i);
+    })
+  });
+};
+
+var DiscoverThemesDetail = function DiscoverThemesDetail(_ref) {
+  var onBack = _ref.onBack,
+    appId = _ref.appId,
+    onInstallComplete = _ref.onInstallComplete;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    packages = _useState2[0],
+    setPackages = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = React.useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchQuery = _useState8[0],
+    setSearchQuery = _useState8[1];
+  var _useState9 = React.useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    selectedPackageName = _useState0[0],
+    setSelectedPackageName = _useState0[1];
+  var search = React.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
+  React.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__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col flex-1 min-h-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-shrink-0 px-4 pt-4",
+        children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "arrow-left",
+            className: "h-3 w-3"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: "Back"
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(RegistryThemeDetail, {
+        themePackage: selectedPackage,
+        appId: appId,
+        onInstallComplete: onInstallComplete
+      })]
+    });
+  }
+
+  // Package list view
+  var listBody;
+  if (isLoading) {
+    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-center py-12",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "text-center",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-3"
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+          className: "text-sm opacity-50",
+          children: "Loading themes..."
+        })]
+      })
+    });
+  } else if (error) {
+    listBody = /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "px-4 py-8 text-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+        className: "text-sm text-red-400 mb-3",
+        children: error
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.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__*/jsxRuntime.jsx("div", {
+      className: "px-4 py-8 text-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+        className: "text-sm opacity-50",
+        children: searchQuery ? "No themes match your search." : "No theme packages available."
+      })
+    });
+  } else {
+    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "space-y-1",
+      children: packages.map(function (pkg) {
+        return /*#__PURE__*/jsxRuntime.jsx(DashReact.Sidebar.Item, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "palette",
+            className: "h-3.5 w-3.5"
+          }),
+          badge: /*#__PURE__*/jsxRuntime.jsx(ThemeColorDots, {
+            colors: pkg.colors,
+            theme: pkg
+          }),
+          onClick: function onClick() {
+            return setSelectedPackageName(pkg.name);
+          },
+          children: pkg.displayName || pkg.name
+        }, pkg.name);
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0 ".concat(panelStyles.textColor || "text-gray-200"),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 px-4 pt-4",
+      children: /*#__PURE__*/jsxRuntime.jsxs("button", {
+        type: "button",
+        onClick: onBack,
+        className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "arrow-left",
+          className: "h-3 w-3"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: "Back"
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 px-4 py-3",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: "Search themes...",
+        inputClassName: "py-1.5 text-xs"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-1 min-h-0 overflow-y-auto px-2",
+      children: listBody
+    }), !isLoading && !error && packages.length > 0 && /*#__PURE__*/jsxRuntime.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$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ThemeManagerModal = function ThemeManagerModal(_ref) {
+  var open = _ref.open,
+    setIsOpen = _ref.setIsOpen;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    changeThemesForApplication = _useContext.changeThemesForApplication,
+    rawThemes = _useContext.rawThemes,
+    themes = _useContext.themes,
+    changeCurrentTheme = _useContext.changeCurrentTheme,
+    changeThemeVariant = _useContext.changeThemeVariant,
+    currentTheme = _useContext.currentTheme;
+  var _useContext2 = React.useContext(AppContext),
+    dashApi = _useContext2.dashApi,
+    credentials = _useContext2.credentials,
+    settings = _useContext2.settings;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    themeSelected = _useState2[0],
+    setThemeSelected = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rawThemeSelected = _useState4[0],
+    setRawThemeSelected = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    themeKeySelected = _useState6[0],
+    setThemeKeySelected = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isEditing = _useState8[0],
+    setIsEditing = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isCreating = _useState0[0],
+    setIsCreating = _useState0[1];
+  var _useState1 = React.useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isChoosingMode = _useState10[0],
+    setIsChoosingMode = _useState10[1];
+  var _useState11 = React.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isSearching = _useState12[0],
+    setIsSearching = _useState12[1];
+  var _useState13 = React.useState(""),
+    _useState14 = _slicedToArray(_useState13, 2),
+    wizardName = _useState14[0],
+    setWizardName = _useState14[1];
+  var _useState15 = React.useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    wizardMethod = _useState16[0],
+    setWizardMethod = _useState16[1];
+  var _useState17 = React.useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    wizardTheme = _useState18[0],
+    setWizardTheme = _useState18[1];
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    updateState = _React$useState2[1];
+  var forceUpdate = React.useCallback(function () {
+    return updateState({});
+  }, []);
+  var footerStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL_FOOTER, currentTheme, {});
+  React.useEffect(function () {
+    if (open === false) {
+      setThemeSelected(null);
+      setRawThemeSelected(null);
+      setThemeKeySelected(null);
+      setIsCreating(false);
+      setIsChoosingMode(false);
+      setIsSearching(false);
+    } else {
+      if (themeKeySelected === null && themes) {
+        var themeKeyTemp = settings && "theme" in settings ? settings["theme"] in themes ? settings["theme"] : Object.keys(themes)[0] : Object.keys(themes)[0];
+        var themeModel = ThemeModel(rawThemes[themeKeyTemp]);
+        setThemeKeySelected(function () {
+          return themeKeyTemp;
+        });
+        setThemeSelected(function () {
+          return themeModel;
+        });
+        setRawThemeSelected(function () {
+          return rawThemes[themeKeyTemp];
+        });
+      }
+    }
+  }, [open, themes, rawThemes, settings, themeKeySelected]);
+  function handleThemeSelected(themeUpdated, themeKey) {
+    var newRawThemeSelected = DashReact.deepCopy(rawThemeSelected);
+    if (newRawThemeSelected !== null) {
+      Object.keys(themeUpdated).forEach(function (k) {
+        newRawThemeSelected[k] = themeUpdated[k];
+      });
+    } else {
+      newRawThemeSelected = DashReact.deepCopy(themeUpdated);
+    }
+    setRawThemeSelected(function () {
+      return newRawThemeSelected;
+    });
+    var newTheme = ThemeModel(DashReact.deepCopy(newRawThemeSelected));
+    setThemeKeySelected(function () {
+      return themeKey;
+    });
+    setThemeSelected(function () {
+      return newTheme;
+    });
+    forceUpdate();
+  }
+  function handleStartCreateTheme() {
+    setIsChoosingMode(true);
+    setIsCreating(false);
+    setIsSearching(false);
+    setIsEditing(false);
+  }
+  function handleChooseCreate() {
+    setIsChoosingMode(false);
+    setIsCreating(true);
+    setWizardName("");
+    setWizardMethod(null);
+    setWizardTheme(null);
+  }
+  function handleChooseSearch() {
+    setIsChoosingMode(false);
+    setIsSearching(true);
+  }
+  function handleBackFromSearch() {
+    setIsSearching(false);
+    setIsChoosingMode(true);
+  }
+  function handleWizardComplete() {
+    if (!wizardTheme || !wizardName.trim()) return;
+    var key = wizardTheme.id || "theme-".concat(Date.now());
+    var finalTheme = _objectSpread$b(_objectSpread$b({}, wizardTheme), {}, {
+      id: key,
+      name: wizardName.trim()
+    });
+    if (dashApi) {
+      dashApi.saveTheme(credentials.appId, key, finalTheme, function (e, message) {
+        changeThemesForApplication(message["themes"]);
+        setIsCreating(false);
+        setIsEditing(false);
+        var newThemes = message["themes"];
+        if (newThemes && newThemes[key]) {
+          setThemeKeySelected(key);
           setThemeSelected(newThemes[key]);
           setRawThemeSelected(finalTheme);
         }
@@ -31732,6 +32443,8 @@ var ThemeManagerModal = function ThemeManagerModal(_ref) {
   }
   function handleCancelCreate() {
     setIsCreating(false);
+    setIsChoosingMode(false);
+    setIsSearching(false);
   }
   function handleSaveTheme() {
     if (themeKeySelected !== null && rawThemeSelected !== null) {
@@ -31808,7 +32521,22 @@ var ThemeManagerModal = function ThemeManagerModal(_ref) {
               onChooseTheme: handleChooseTheme,
               onChangeVariant: changeThemeVariant,
               rawTheme: rawThemeSelected,
-              wizardContent: isCreating ? /*#__PURE__*/jsxRuntime.jsx(ThemeQuickCreate, {
+              wizardContent: isChoosingMode ? /*#__PURE__*/jsxRuntime.jsx(ThemeNewChooser, {
+                onSearchThemes: handleChooseSearch,
+                onCreateNew: handleChooseCreate
+              }) : isSearching ? /*#__PURE__*/jsxRuntime.jsx(DiscoverThemesDetail, {
+                onBack: handleBackFromSearch,
+                appId: credentials === null || credentials === void 0 ? void 0 : credentials.appId,
+                onInstallComplete: function onInstallComplete() {
+                  if (dashApi && credentials !== null && credentials !== void 0 && credentials.appId) {
+                    dashApi.listThemes(credentials.appId, function (e, message) {
+                      if (message && message.themes) {
+                        changeThemesForApplication(message.themes);
+                      }
+                    });
+                  }
+                }
+              }) : isCreating ? /*#__PURE__*/jsxRuntime.jsx(ThemeQuickCreate, {
                 wizardName: wizardName,
                 setWizardName: setWizardName,
                 wizardMethod: wizardMethod,
@@ -31836,13 +32564,13 @@ var ThemeManagerModal = function ThemeManagerModal(_ref) {
                 children: themeKeySelected
               })]
             })
-          }), isCreating && /*#__PURE__*/jsxRuntime.jsx("div", {
+          }), (isCreating || isChoosingMode || isSearching) && /*#__PURE__*/jsxRuntime.jsx("div", {
             className: "flex flex-row space-x-2",
             children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
               onClick: handleCancelCreate,
               title: "Cancel"
             })
-          }), !isCreating && isEditing === false && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          }), !isCreating && !isChoosingMode && !isSearching && isEditing === false && /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex flex-row space-x-2",
             children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
               onClick: function onClick() {
@@ -31861,7 +32589,7 @@ var ThemeManagerModal = function ThemeManagerModal(_ref) {
               onClick: handleActivateTheme,
               title: "Activate"
             })]
-          }), !isCreating && isEditing === true && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          }), !isCreating && !isChoosingMode && !isSearching && isEditing === true && /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex flex-row space-x-2",
             children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
               onClick: function onClick() {
@@ -32808,7 +33536,11 @@ var DashboardDetail = function DashboardDetail(_ref2) {
       t = _ref8[1];
     return {
       label: t.name || key,
-      value: key
+      value: key,
+      icon: "palette",
+      badge: /*#__PURE__*/jsxRuntime.jsx(ThemeColorDots, {
+        theme: t
+      })
     };
   }));
   function handleChangeFolder(val) {
@@ -37055,545 +37787,146 @@ var ComponentStyleRow = function ComponentStyleRow(_ref3) {
             title: "".concat(key, ": ").concat(value)
           }, key);
         }
-        return /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "h-5 w-5 rounded-sm ".concat(value),
-          title: "".concat(key, ": ").concat(value)
-        }, key);
-      })
-    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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 = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    publishOpen = _useState2[0],
-    setPublishOpen = _useState2[1];
-  var canPublish = theme && !theme._registryMeta;
-  var displayTheme = React.useMemo(function () {
-    return theme ? theme[themeVariant] || {} : {};
-  }, [theme, themeVariant]);
-  var isActive = themeKey === currentThemeKey;
-
-  // Memoize all component styles
-  var allStyles = React.useMemo(function () {
-    var result = {};
-    Object.values(DashReact.themeObjects).forEach(function (key) {
-      result[key] = DashReact.getStylesForItem(key, displayTheme, {});
-    });
-    return result;
-  }, [displayTheme]);
-  if (!theme) return null;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col flex-1 min-h-0",
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-row items-center gap-3",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading, {
-          title: theme.name || themeKey,
-          padding: false
-        }), isActive && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs opacity-40",
-          children: "active"
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(ColorSwatchGrid, {
-        displayTheme: displayTheme
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col space-y-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs font-semibold opacity-50",
-          children: "Component Styles"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.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 DashReact.themeObjects[k];
-            });
-            if (validKeys.length === 0) return null;
-            return /*#__PURE__*/jsxRuntime.jsxs(DashReact.Accordion2.Item, {
-              value: group.label,
-              children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.Accordion2.Trigger, {
-                value: group.label,
-                children: [group.label, " (", validKeys.length, ")"]
-              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Accordion2.Content, {
-                value: group.label,
-                children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "flex flex-col",
-                  children: validKeys.map(function (k) {
-                    var objectValue = DashReact.themeObjects[k];
-                    return /*#__PURE__*/jsxRuntime.jsx(ComponentStyleRow, {
-                      objectKey: objectValue,
-                      styles: allStyles[objectValue]
-                    }, k);
-                  })
-                })
-              })]
-            }, group.label);
-          })
-        })]
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-shrink-0 flex flex-row justify-between px-6 py-4 border-t border-white/10",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-row gap-2",
-        children: [!isActive && onDelete && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-          title: "Delete",
-          onClick: function onClick() {
-            return onDelete(themeKey);
-          },
-          size: "sm"
-        }), canPublish && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-          title: "Publish",
-          onClick: function onClick() {
-            return setPublishOpen(true);
-          },
-          size: "sm"
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-row gap-2",
-        children: [!isActive && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-          title: "Activate",
-          onClick: function onClick() {
-            return onActivate(themeKey);
-          },
-          size: "sm"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-          title: "Edit",
-          onClick: onOpenThemeEditor,
-          size: "sm"
-        })]
-      })]
-    }), canPublish && /*#__PURE__*/jsxRuntime.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 = React.useContext(DashReact.ThemeContext),
-    currentTheme = _useContext.currentTheme,
-    changeThemesForApplication = _useContext.changeThemesForApplication;
-  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
-    grow: false
-  });
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isInstalling = _useState2[0],
-    setIsInstalling = _useState2[1];
-  var _useState3 = React.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__*/jsxRuntime.jsx("div", {
+          className: "h-5 w-5 rounded-sm ".concat(value),
+          title: "".concat(key, ": ").concat(value)
+        }, key);
+      })
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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 = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    publishOpen = _useState2[0],
+    setPublishOpen = _useState2[1];
+  var canPublish = theme && !theme._registryMeta;
+  var displayTheme = React.useMemo(function () {
+    return theme ? theme[themeVariant] || {} : {};
+  }, [theme, themeVariant]);
+  var isActive = themeKey === currentThemeKey;
+
+  // Memoize all component styles
+  var allStyles = React.useMemo(function () {
+    var result = {};
+    Object.values(DashReact.themeObjects).forEach(function (key) {
+      result[key] = DashReact.getStylesForItem(key, displayTheme, {});
+    });
+    return result;
+  }, [displayTheme]);
+  if (!theme) return null;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col flex-1 min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6 ".concat(panelStyles.textColor || "text-gray-200"),
+      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-row items-center gap-3",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "h-5 w-5 flex-shrink-0 flex items-center justify-center",
-          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "palette",
-            className: "h-5 w-5"
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
-            title: pkg.displayName || pkg.name,
-            padding: false
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center gap-2 mt-0.5",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "text-sm opacity-60",
-              children: ["by ", pkg.author || "Unknown"]
-            }), pkg.version && /*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
-              children: ["v", pkg.version]
-            })]
-          })]
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading, {
+          title: theme.name || themeKey,
+          padding: false
+        }), isActive && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs opacity-40",
+          children: "active"
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx("hr", {
-        className: currentTheme["border-primary-medium"]
-      }), colorEntries.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), /*#__PURE__*/jsxRuntime.jsx(ColorSwatchGrid, {
+        displayTheme: displayTheme
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col space-y-2",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs font-semibold opacity-50 mb-2 block",
-          children: "COLORS"
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex flex-row gap-3",
-          children: colorEntries.map(function (_ref2) {
-            var label = _ref2.label,
-              value = _ref2.value;
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex flex-col items-center gap-1",
-              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "h-10 w-10 rounded-full border-2 border-white/20",
-                style: {
-                  backgroundColor: value
-                }
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-[10px] opacity-50",
-                children: label
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-[10px] opacity-30 font-mono",
-                children: value
-              })]
-            }, label);
-          })
-        })]
-      }), pkg.description && /*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "text-sm",
-        children: pkg.description
-      }), pkg.tags && pkg.tags.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex flex-wrap gap-1",
-        children: pkg.tags.map(function (tag) {
-          return /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-60"),
-            children: tag
-          }, tag);
-        })
-      }), installResult && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
-      className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
-      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.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 = React.useContext(DashReact.ThemeContext),
-    currentTheme = _useContext.currentTheme;
-  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
-    grow: false
-  });
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    packages = _useState2[0],
-    setPackages = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isLoading = _useState4[0],
-    setIsLoading = _useState4[1];
-  var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    error = _useState6[0],
-    setError = _useState6[1];
-  var _useState7 = React.useState(""),
-    _useState8 = _slicedToArray(_useState7, 2),
-    searchQuery = _useState8[0],
-    setSearchQuery = _useState8[1];
-  var _useState9 = React.useState(null),
-    _useState0 = _slicedToArray(_useState9, 2),
-    selectedPackageName = _useState0[0],
-    setSelectedPackageName = _useState0[1];
-  var search = React.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
-  React.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__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col flex-1 min-h-0",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-shrink-0 px-4 pt-4",
-        children: /*#__PURE__*/jsxRuntime.jsxs("button", {
-          type: "button",
+          className: "text-xs font-semibold opacity-50",
+          children: "Component Styles"
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.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 DashReact.themeObjects[k];
+            });
+            if (validKeys.length === 0) return null;
+            return /*#__PURE__*/jsxRuntime.jsxs(DashReact.Accordion2.Item, {
+              value: group.label,
+              children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.Accordion2.Trigger, {
+                value: group.label,
+                children: [group.label, " (", validKeys.length, ")"]
+              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Accordion2.Content, {
+                value: group.label,
+                children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "flex flex-col",
+                  children: validKeys.map(function (k) {
+                    var objectValue = DashReact.themeObjects[k];
+                    return /*#__PURE__*/jsxRuntime.jsx(ComponentStyleRow, {
+                      objectKey: objectValue,
+                      styles: allStyles[objectValue]
+                    }, k);
+                  })
+                })
+              })]
+            }, group.label);
+          })
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-shrink-0 flex flex-row justify-between px-6 py-4 border-t border-white/10",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row gap-2",
+        children: [!isActive && onDelete && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Delete",
           onClick: function onClick() {
-            return setSelectedPackageName(null);
+            return onDelete(themeKey);
           },
-          className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "arrow-left",
-            className: "h-3 w-3"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: "Back"
-          })]
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(RegistryThemeDetail, {
-        themePackage: selectedPackage,
-        appId: appId,
-        onInstallComplete: onInstallComplete
-      })]
-    });
-  }
-
-  // Package list view
-  var listBody;
-  if (isLoading) {
-    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex items-center justify-center py-12",
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "text-center",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-3"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
-          className: "text-sm opacity-50",
-          children: "Loading themes..."
+          size: "sm"
+        }), canPublish && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Publish",
+          onClick: function onClick() {
+            return setPublishOpen(true);
+          },
+          size: "sm"
         })]
-      })
-    });
-  } else if (error) {
-    listBody = /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "px-4 py-8 text-center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
-        className: "text-sm text-red-400 mb-3",
-        children: error
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.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__*/jsxRuntime.jsx("div", {
-      className: "px-4 py-8 text-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
-        className: "text-sm opacity-50",
-        children: searchQuery ? "No themes match your search." : "No theme packages available."
-      })
-    });
-  } else {
-    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "space-y-1",
-      children: packages.map(function (pkg) {
-        var colors = pkg.colors || {};
-        return /*#__PURE__*/jsxRuntime.jsx(DashReact.Sidebar.Item, {
-          icon: /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex items-center gap-0.5",
-            children: [colors.primary, colors.secondary, colors.tertiary].filter(Boolean).map(function (color, i) {
-              return /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "h-3 w-3 rounded-full border border-white/20",
-                style: {
-                  backgroundColor: color
-                }
-              }, i);
-            })
-          }),
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row gap-2",
+        children: [!isActive && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Activate",
           onClick: function onClick() {
-            return setSelectedPackageName(pkg.name);
+            return onActivate(themeKey);
           },
-          children: pkg.displayName || pkg.name
-        }, pkg.name);
-      })
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col flex-1 min-h-0 ".concat(panelStyles.textColor || "text-gray-200"),
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-shrink-0 px-4 pt-4",
-      children: /*#__PURE__*/jsxRuntime.jsxs("button", {
-        type: "button",
-        onClick: onBack,
-        className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "arrow-left",
-          className: "h-3 w-3"
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          children: "Back"
+          size: "sm"
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Edit",
+          onClick: onOpenThemeEditor,
+          size: "sm"
         })]
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-shrink-0 px-4 py-3",
-      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
-        value: searchQuery,
-        onChange: setSearchQuery,
-        placeholder: "Search themes...",
-        inputClassName: "py-1.5 text-xs"
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-1 min-h-0 overflow-y-auto px-2",
-      children: listBody
-    }), !isLoading && !error && packages.length > 0 && /*#__PURE__*/jsxRuntime.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" : ""]
+      })]
+    }), canPublish && /*#__PURE__*/jsxRuntime.jsx(PublishThemeModal, {
+      isOpen: publishOpen,
+      setIsOpen: setPublishOpen,
+      appId: appId,
+      themeKey: themeKey,
+      themeName: theme.name || themeKey
     })]
   });
 };
@@ -37644,6 +37977,10 @@ var ThemesSection = function ThemesSection(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     installMode = _useState10[0],
     setInstallMode = _useState10[1];
+  var _useState11 = React.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    enteredViaChooser = _useState12[0],
+    setEnteredViaChooser = _useState12[1];
   var themeEntries = themes ? Object.entries(themes) : [];
   var appId = credentials === null || credentials === void 0 ? void 0 : credentials.appId;
   var rowStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL_HEADER, currentTheme, {
@@ -37654,7 +37991,7 @@ var ThemesSection = function ThemesSection(_ref) {
   var prevCreateRequested = React.useRef(false);
   React.useEffect(function () {
     if (createRequested && !prevCreateRequested.current) {
-      setGenerateMode(GENERATE_MODES.WIZARD);
+      setGenerateMode(GENERATE_MODES.CHOOSER);
       setWizardName("");
       setWizardMethod(null);
       setWizardTheme(null);
@@ -37736,9 +38073,9 @@ var ThemesSection = function ThemesSection(_ref) {
   }
   var listContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col h-full",
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-shrink-0 flex flex-col gap-2 px-3 py-2 ".concat(rowStyles.backgroundColor || ""),
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-row items-center justify-between",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex flex-row items-center gap-2",
@@ -37756,32 +38093,7 @@ var ThemesSection = function ThemesSection(_ref) {
           className: "text-xs opacity-50",
           children: themeVariant === "dark" ? "Dark" : "Light"
         })]
-      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
       className: "flex-1 overflow-y-auto min-h-0",
       children: /*#__PURE__*/jsxRuntime.jsxs(DashReact.Sidebar.Content, {
@@ -37805,7 +38117,9 @@ var ThemesSection = function ThemesSection(_ref) {
               setGenerateMode(GENERATE_MODES.NONE);
               setInstallMode(null);
             },
-            badge: isActive ? "active" : null,
+            badge: /*#__PURE__*/jsxRuntime.jsx(ThemeColorDots, {
+              theme: theme
+            }),
             className: isSelected ? "bg-white/10 opacity-100" : "",
             children: theme.name || key
           }, key);
@@ -37823,6 +38137,10 @@ var ThemesSection = function ThemesSection(_ref) {
     detailContent = /*#__PURE__*/jsxRuntime.jsx(DiscoverThemesDetail, {
       onBack: function onBack() {
         setInstallMode(null);
+        if (enteredViaChooser) {
+          setGenerateMode(GENERATE_MODES.CHOOSER);
+          setEnteredViaChooser(false);
+        }
       },
       appId: appId,
       onInstallComplete: function onInstallComplete() {
@@ -37836,6 +38154,17 @@ var ThemesSection = function ThemesSection(_ref) {
         }
       }
     });
+  } else if (generateMode === GENERATE_MODES.CHOOSER) {
+    detailContent = /*#__PURE__*/jsxRuntime.jsx(ThemeNewChooser, {
+      onSearchThemes: function onSearchThemes() {
+        setGenerateMode(GENERATE_MODES.NONE);
+        setInstallMode("marketplace");
+        setEnteredViaChooser(true);
+      },
+      onCreateNew: function onCreateNew() {
+        setGenerateMode(GENERATE_MODES.WIZARD);
+      }
+    });
   } else if (generateMode === GENERATE_MODES.WIZARD) {
     detailContent = /*#__PURE__*/jsxRuntime.jsx(ThemeQuickCreate, {
       wizardName: wizardName,
@@ -38186,7 +38515,9 @@ var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
     _ref$isInstalling = _ref.isInstalling,
     isInstalling = _ref$isInstalling === void 0 ? false : _ref$isInstalling,
     _ref$installError = _ref.installError,
-    installError = _ref$installError === void 0 ? null : _ref$installError;
+    installError = _ref$installError === void 0 ? null : _ref$installError,
+    _ref$isInstalled = _ref.isInstalled,
+    isInstalled = _ref$isInstalled === void 0 ? false : _ref$isInstalled;
   var _useContext = React.useContext(DashReact.ThemeContext),
     currentTheme = _useContext.currentTheme;
   var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
@@ -38206,9 +38537,15 @@ var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
             className: "h-5 w-5"
           })
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
-            title: widget.packageDisplayName,
-            padding: false
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
+              title: widget.packageDisplayName,
+              padding: false
+            }), isInstalled && /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 flex-shrink-0",
+              children: "Installed"
+            })]
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex items-center gap-2 mt-0.5",
             children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
@@ -38319,13 +38656,13 @@ var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
       children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: isInstalling ? "Installing..." : "Install Package",
-        bgColor: "bg-blue-600",
-        hoverBackgroundColor: isInstalling ? "" : "hover:bg-blue-700",
+        title: isInstalled ? "Installed" : isInstalling ? "Installing..." : "Install Package",
+        bgColor: isInstalled ? "bg-emerald-600/50" : "bg-blue-600",
+        hoverBackgroundColor: isInstalled || isInstalling ? "" : "hover:bg-blue-700",
         textSize: "text-sm",
         padding: "py-1.5 px-4",
         onClick: onInstall,
-        disabled: isInstalling
+        disabled: isInstalling || isInstalled
       })
     })]
   });
@@ -38428,7 +38765,11 @@ var useRegistrySearch = function useRegistrySearch() {
             return window.mainApi.registry.search(query !== null && query !== void 0 ? query : searchQuery, filters);
           case 3:
             result = _context.sent;
-            pkgs = result.packages || [];
+            // Only include packages that contain at least one widget
+            // (filters out theme-only packages, etc.)
+            pkgs = (result.packages || []).filter(function (pkg) {
+              return pkg.widgets && pkg.widgets.length > 0;
+            });
             setPackages(pkgs);
 
             // Flatten packages into widget entries
@@ -38647,6 +38988,83 @@ var DiscoverWidgetsDetail = function DiscoverWidgetsDetail(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     toolConflictWarning = _useState4[0],
     setToolConflictWarning = _useState4[1];
+
+  // Track installed package names (same pattern as WidgetSidebar)
+  var _useState5 = React.useState(new Set()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    installedPackageNames = _useState6[0],
+    setInstalledPackageNames = _useState6[1];
+  var loadInstalledPackages = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var widgets, names, _iterator, _step, w, folderName, _folderName;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 1;
+          return window.mainApi.widgets.list();
+        case 1:
+          widgets = _context.sent;
+          names = new Set();
+          _iterator = _createForOfIteratorHelper$2(widgets);
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              w = _step.value;
+              if (w.name) names.add(w.name);
+              if (w.path) {
+                folderName = w.path.split("/").pop();
+                if (folderName) names.add(folderName);
+              }
+              if (w.author && w.name) {
+                names.add("".concat(w.author, "/").concat(w.name));
+              }
+              if (w.author && w.path) {
+                _folderName = w.path.split("/").pop();
+                if (_folderName) names.add("".concat(w.author, "/").concat(_folderName));
+              }
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          setInstalledPackageNames(names);
+          _context.next = 3;
+          break;
+        case 2:
+          _context.prev = 2;
+          _context["catch"](0);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 2]]);
+  })), []);
+  React.useEffect(function () {
+    loadInstalledPackages();
+    var handleWidgetsUpdated = function handleWidgetsUpdated() {
+      return loadInstalledPackages();
+    };
+    window.addEventListener("dash:widgets-updated", handleWidgetsUpdated);
+    return function () {
+      return window.removeEventListener("dash:widgets-updated", handleWidgetsUpdated);
+    };
+  }, [loadInstalledPackages]);
+  var isPackageInstalled = React.useCallback(function (pkg) {
+    if (installedPackageNames.has(pkg.name) || pkg.scope && installedPackageNames.has("".concat(pkg.scope, "/").concat(pkg.name))) {
+      return true;
+    }
+    var packageWidgets = pkg.widgets || [];
+    if (packageWidgets.length > 0) {
+      var cMap = ComponentManager.componentMap();
+      var cMapKeys = Object.keys(cMap);
+      return packageWidgets.some(function (w) {
+        return w.name in cMap || cMapKeys.some(function (k) {
+          return k === w.name || k.endsWith("_".concat(w.name));
+        });
+      });
+    }
+    return false;
+  }, [installedPackageNames]);
   var selectedWidget = selectedPackageName ? flatWidgets.find(function (w) {
     return w.packageName === selectedPackageName;
   }) : null;
@@ -38655,31 +39073,31 @@ var DiscoverWidgetsDetail = function DiscoverWidgetsDetail(_ref) {
   var checkToolConflicts = function checkToolConflicts(widget) {
     var conflicts = [];
     var packageWidgets = widget.packageWidgets || [];
-    var _iterator = _createForOfIteratorHelper$2(packageWidgets),
-      _step;
+    var _iterator2 = _createForOfIteratorHelper$2(packageWidgets),
+      _step2;
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var w = _step.value;
-        var _iterator2 = _createForOfIteratorHelper$2(w.providers || []),
-          _step2;
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var w = _step2.value;
+        var _iterator3 = _createForOfIteratorHelper$2(w.providers || []),
+          _step3;
         try {
           var _loop = function _loop() {
             var _p$requiredTools;
-            var p = _step2.value;
+            var p = _step3.value;
             if (!((_p$requiredTools = p.requiredTools) !== null && _p$requiredTools !== void 0 && _p$requiredTools.length) || p.providerClass !== "mcp") return 1; // continue
             // Find matching user provider
-            var matchingProviders = Object.entries(providers).filter(function (_ref2) {
-              var _ref3 = _slicedToArray(_ref2, 2),
-                prov = _ref3[1];
+            var matchingProviders = Object.entries(providers).filter(function (_ref3) {
+              var _ref4 = _slicedToArray(_ref3, 2),
+                prov = _ref4[1];
               return prov.type === p.type && prov.providerClass === "mcp" && prov.allowedTools;
             });
-            var _iterator3 = _createForOfIteratorHelper$2(matchingProviders),
-              _step3;
+            var _iterator4 = _createForOfIteratorHelper$2(matchingProviders),
+              _step4;
             try {
               var _loop2 = function _loop2() {
-                var _step3$value = _slicedToArray(_step3.value, 2),
-                  provName = _step3$value[0],
-                  prov = _step3$value[1];
+                var _step4$value = _slicedToArray(_step4.value, 2),
+                  provName = _step4$value[0],
+                  prov = _step4$value[1];
                 var blocked = p.requiredTools.filter(function (t) {
                   return !prov.allowedTools.includes(t);
                 });
@@ -38691,28 +39109,28 @@ var DiscoverWidgetsDetail = function DiscoverWidgetsDetail(_ref) {
                   });
                 }
               };
-              for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
                 _loop2();
               }
             } catch (err) {
-              _iterator3.e(err);
+              _iterator4.e(err);
             } finally {
-              _iterator3.f();
+              _iterator4.f();
             }
           };
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
             if (_loop()) continue;
           }
         } catch (err) {
-          _iterator2.e(err);
+          _iterator3.e(err);
         } finally {
-          _iterator2.f();
+          _iterator3.f();
         }
       }
     } catch (err) {
-      _iterator.e(err);
+      _iterator2.e(err);
     } finally {
-      _iterator.f();
+      _iterator2.f();
     }
     return conflicts;
   };
@@ -38755,7 +39173,10 @@ var DiscoverWidgetsDetail = function DiscoverWidgetsDetail(_ref) {
         widget: selectedWidget,
         onInstall: handleInstall,
         isInstalling: isInstalling,
-        installError: installError
+        installError: installError,
+        isInstalled: selectedWidget ? isPackageInstalled(packages.find(function (p) {
+          return p.name === selectedPackageName;
+        }) || {}) : false
       })]
     });
   }
@@ -38808,6 +39229,7 @@ var DiscoverWidgetsDetail = function DiscoverWidgetsDetail(_ref) {
           return w.packageName === pkg.name;
         });
         var hasIncompatible = (pkgWidget === null || pkgWidget === void 0 ? void 0 : pkgWidget.missingApis) && pkgWidget.missingApis.length > 0;
+        var isInstalled = isPackageInstalled(pkg);
         return /*#__PURE__*/jsxRuntime.jsx(DashReact.Sidebar.Item, {
           icon: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: hasIncompatible ? "triangle-exclamation" : "cube",
@@ -38817,7 +39239,14 @@ var DiscoverWidgetsDetail = function DiscoverWidgetsDetail(_ref) {
             return setSelectedPackageName(pkg.name);
           },
           badge: "".concat(widgetCount),
-          children: pkg.displayName || pkg.name
+          className: isInstalled ? "opacity-50" : "",
+          children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+            className: "flex items-center gap-1.5",
+            children: [pkg.displayName || pkg.name, isInstalled && /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-[10px] text-emerald-400",
+              children: "Installed"
+            })]
+          })
         }, pkg.name);
       })
     });
@@ -44897,6 +45326,7 @@ exports.THEME_SAVE = THEME_SAVE;
 exports.THEME_SAVE_COMPLETE = THEME_SAVE_COMPLETE;
 exports.THEME_SAVE_ERROR = THEME_SAVE_ERROR;
 exports.ThemeApi = ThemeApi;
+exports.ThemeColorDots = ThemeColorDots;
 exports.ThemeManagerModal = ThemeManagerModal;
 exports.ThemeModel = ThemeModel;
 exports.ThemeWrapper = ThemeWrapper;