claude-code-marketplace 0.5.12 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-marketplace",
-  "version": "0.5.12",
+  "version": "0.6.0",
   "description": "Web UI for browsing and managing Claude Code marketplace plugins",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -1466,4 +1466,24 @@ function hubNavigate(app, url) {
   if (!window.__HUB__?.enabled) return;
   window.parent?.postMessage({ type: 'hub:navigate', app, url }, '*');
 }
+
+(function initHubTheme() {
+  const getTheme = () => (document.body.classList.contains('light') ? 'light' : 'dark');
+  const hubOrigin = () => (window.__HUB__?.url ? new URL(window.__HUB__.url).origin : null);
+  let lastTheme = getTheme();
+  window.addEventListener('message', (e) => {
+    if (e.source !== window.parent || e.origin !== hubOrigin()) return;
+    if (e.data?.type !== 'hub:theme') return;
+    if (getTheme() === e.data.theme) return;
+    window.toggleTheme();
+    lastTheme = getTheme();
+  });
+  new MutationObserver(() => {
+    const t = getTheme();
+    if (t === lastTheme) return;
+    lastTheme = t;
+    const origin = hubOrigin();
+    if (origin) window.parent.postMessage({ type: 'hub:theme', theme: t }, origin);
+  }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+})();
 // #endregion HUB_INTEGRATION

package/public/style.css

@@ -334,11 +334,11 @@ body {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 12px;
-  font-size: 12px;
+  padding: 7px 12px;
+  font-size: 13px;
   cursor: pointer;
   transition: background 0.1s ease;
-  min-height: 34px;
+  min-height: 38px;
   flex-wrap: nowrap;
   border-left: 2px solid transparent;
 }
@@ -360,7 +360,7 @@ body {
   position: sticky;
   top: 0;
   z-index: 2;
-  font-size: 11px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   padding: 8px 12px;
@@ -395,8 +395,8 @@ body {
   opacity: 0.45;
 }
 .tree-icon svg {
-  width: 14px;
-  height: 14px;
+  width: 15px;
+  height: 15px;
 }
 .tree-label {
   flex-shrink: 0;
@@ -405,7 +405,7 @@ body {
   color: var(--text-secondary);
 }
 .version {
-  font-size: 10px;
+  font-size: 11px;
   color: var(--accent);
   background: var(--accent-dim);
   padding: 1px 5px;
@@ -421,8 +421,8 @@ body {
   color: var(--text-primary);
 }
 .tree-meta {
-  font-size: 10px;
-  color: var(--text-muted);
+  font-size: 11px;
+  color: var(--text-tertiary);
   flex-shrink: 0;
   white-space: nowrap;
 }
@@ -456,37 +456,50 @@ body {
   border-color: rgba(196, 149, 106, 0.4);
   color: rgba(196, 149, 106, 0.5);
 }
-.scope-toggle.user.active,
-.scope-toggle.user.disabled {
+.scope-toggle.user.active {
   background: var(--scope-user-dim);
   color: var(--scope-user);
   border-color: var(--scope-user);
 }
+.scope-toggle.user.disabled {
+  background: transparent;
+  color: var(--scope-user);
+  border-color: var(--scope-user);
+}
 
 .scope-toggle.project {
   border-color: rgba(122, 181, 160, 0.4);
   color: rgba(122, 181, 160, 0.5);
 }
-.scope-toggle.project.active,
-.scope-toggle.project.disabled {
+.scope-toggle.project.active {
   background: var(--scope-project-dim);
   color: var(--scope-project);
   border-color: var(--scope-project);
 }
+.scope-toggle.project.disabled {
+  background: transparent;
+  color: var(--scope-project);
+  border-color: var(--scope-project);
+}
 
 .scope-toggle.local {
   border-color: rgba(138, 155, 181, 0.4);
   color: rgba(138, 155, 181, 0.5);
 }
-.scope-toggle.local.active,
-.scope-toggle.local.disabled {
+.scope-toggle.local.active {
   background: var(--scope-local-dim);
   color: var(--scope-local);
   border-color: var(--scope-local);
 }
+.scope-toggle.local.disabled {
+  background: transparent;
+  color: var(--scope-local);
+  border-color: var(--scope-local);
+}
 .scope-toggle.disabled {
-  border-style: dashed;
-  opacity: 0.6;
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+  opacity: 0.75;
 }
 
 /* Light theme: boost inactive scope contrast further */
@@ -633,9 +646,9 @@ body.light .scope-toggle.local {
 }
 
 .tree-desc-inline {
-  font-size: 11px;
-  color: var(--text-muted);
-  opacity: 0.95;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  opacity: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;