dshmarket 1.0.2 → 1.1.0

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="assets/logo.svg" width="96" alt="dsh-market logo">
+</p>
+
 # dsh-market
 
 English | [中文](README.zh.md)

package/README.zh.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="assets/logo.svg" width="96" alt="dsh-market logo">
+</p>
+
 # dsh-market
 
 [English](README.md) | 中文

package/client/client.js

@@ -58,8 +58,14 @@ const zh = {
   sortHot: '最热',
   sortNew: '最新',
   marketUpdate: '市场有新版本，升级',
+  updateAll: '全部更新',
+  tabThemes: '主题',
+  themeApply: '使用',
+  themeActive: '使用中',
+  themeEmpty: '目录里暂时还没有主题，敬请期待',
   progressHint: '首次安装需要下载与解析依赖，大插件可能要 1-3 分钟',
   toastReady: '已装好并已生效',
+  toastTheme: '已启用。到 设置 → 插件市场 → 主题 可随时切换',
   gotIt: '知道了',
 }
 
@@ -107,8 +113,14 @@ const en = {
   sortHot: 'Top',
   sortNew: 'New',
   marketUpdate: 'Market update available — upgrade',
+  updateAll: 'Update all',
+  tabThemes: 'Themes',
+  themeApply: 'Use',
+  themeActive: 'Active',
+  themeEmpty: 'No more theme plugins in the catalog yet — stay tuned',
   progressHint: 'First installs download and resolve dependencies — large plugins can take 1-3 minutes',
   toastReady: 'installed and live',
+  toastTheme: 'is now active. Switch any time in Settings → Plugin Market → Themes',
   gotIt: 'Got it',
 }
 
@@ -133,8 +145,12 @@ const CSS = `
 .dshm-top{position:absolute;right:18px;bottom:18px;z-index:20;width:38px;height:38px;border-radius:99px;border:1px solid var(--dsw-alias-border-l1,#e5e7eb);background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-secondary,#6b7280);font-size:16px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12)}
 .dshm-top:hover{color:var(--dsw-alias-brand-primary,#4f6ef7)}
 .dshm-chip{font:inherit;font-size:12px;border:1px solid var(--dsw-alias-border-l1,#e5e7eb);background:var(--dsw-alias-bg-layer-1,#fff);border-radius:99px;padding:3px 11px;cursor:pointer;color:var(--dsw-alias-label-secondary,#6b7280)}
-.dshm-chip.on{background:var(--dsw-alias-brand-primary,#4f6ef7);border-color:var(--dsw-alias-brand-primary,#4f6ef7);color:#fff}
+.dshm-chip.on{background:var(--dsw-alias-button-primary-fill,#4f6ef7);border-color:var(--dsw-alias-button-primary-fill,#4f6ef7);color:var(--dsw-alias-label-primary-foreground,#fff)}
 .dshm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
+.dshm-sect{font-size:12px;color:var(--dsw-alias-label-secondary,#6b7280);margin:14px 2px 8px;font-weight:600}
+.dshm-sect:first-child{margin-top:2px}
+.dshm-swatches{display:flex;gap:0;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--dsw-alias-border-l1,#e5e7eb)}
+.dshm-swatches i{flex:1}
 .dshm-card{background:var(--dsw-alias-bg-layer-1,#fff);border:1px solid var(--dsw-alias-border-l1,#e5e7eb);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
 .dshm-row1{display:flex;align-items:center;gap:9px;min-width:0}
 .dshm-av{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0}
@@ -147,7 +163,7 @@ const CSS = `
 .dshm-src{font-size:11px;color:var(--dsw-alias-label-secondary,#9ca3af);text-decoration:none}
 .dshm-src:hover{color:var(--dsw-alias-brand-primary,#4f6ef7)}
 .dshm-btn{border:none;border-radius:7px;padding:5px 14px;font:inherit;font-size:12px;cursor:pointer;font-weight:600}
-.dshm-btn.install{background:var(--dsw-alias-brand-primary,#4f6ef7);color:#fff}
+.dshm-btn.install{background:var(--dsw-alias-button-primary-fill,#4f6ef7);color:var(--dsw-alias-label-primary-foreground,#fff)}
 .dshm-btn.busy{opacity:.65;cursor:default}
 .dshm-btn.done{background:transparent;color:var(--dsw-alias-state-success-primary,#16a34a);cursor:default}
 .dshm-btn.ghost{background:var(--dsw-alias-bg-layer-2,#f3f4f6);color:var(--dsw-alias-label-secondary,#6b7280)}
@@ -162,6 +178,7 @@ const CSS = `
 .dshm-progress .dshm-spin{width:14px;height:14px;border-width:2px;flex-shrink:0}
 .dshm-progress code{font-family:ui-monospace,Menlo,monospace;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .dshm-toast{position:fixed;right:22px;bottom:22px;z-index:2000;background:var(--dsw-alias-bg-layer-1,#fff);border:1px solid var(--dsw-alias-border-l1,#e5e7eb);border-radius:12px;padding:13px 16px;box-shadow:0 12px 40px rgba(0,0,0,.18);display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dsw-alias-label-primary,#1f2328);pointer-events:auto;max-width:340px}
+.dshm-toast .dshm-btn{white-space:nowrap;flex-shrink:0}
 .dshm-empty{color:var(--dsw-alias-label-secondary,#9ca3af);font-size:13px;padding:32px;text-align:center}
 .dshm-err{color:var(--dsw-alias-state-error-primary,#dc2626);font-size:12px;margin:8px 0;white-space:pre-wrap;word-break:break-all}
 .dshm-mask{position:fixed;inset:0;background:rgba(15,18,25,.4);display:flex;align-items:center;justify-content:center;z-index:1000}
@@ -216,6 +233,25 @@ function isInstalled(plugin, installed) {
   return Object.values(installed).some(spec => String(spec).toLowerCase().includes(needle))
 }
 
+/**
+ * The brand mark (assets/logo.svg — shared block-grid mark with
+ * awesome-dsh-plugin), inlined so the header needs no extra request.
+ */
+const LOGO_URI = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><rect width="128" height="128" rx="28" fill="#f6f2ea"/><g transform="translate(15.7 16.7) scale(0.3) translate(-112 -78)"><g fill="#2b2620"><rect x="112" y="112" width="88" height="88" rx="14"/><rect x="212" y="112" width="88" height="88" rx="14"/><rect x="112" y="212" width="88" height="88" rx="14"/><rect x="212" y="212" width="88" height="88" rx="14"/><rect x="112" y="312" width="88" height="88" rx="14"/><rect x="212" y="312" width="88" height="88" rx="14"/><rect x="312" y="212" width="88" height="88" rx="14"/><rect x="312" y="312" width="88" height="88" rx="14"/></g><rect x="346" y="78" width="88" height="88" rx="14" fill="#c0392b" transform="rotate(9 390 122)"/></g></svg>')
+
+/** Four representative colors for a theme card's preview strip. */
+function themeSwatch(def) {
+  const tk = def.tokens || {}
+  const pick = (names) => { for (const n of names) { if (tk[n]) return tk[n] } return null }
+  const dark = def.colorScheme === 'dark'
+  return [
+    pick(['--dsw-alias-bg-base', '--dsw-alias-bg-layer-1']) || (dark ? '#0f1115' : '#ffffff'),
+    pick(['--dsw-alias-bg-layer-2', '--dsw-alias-bg-overlay']) || (dark ? '#1a1d23' : '#f3f4f6'),
+    pick(['--dsw-alias-brand-primary']) || '#4f6ef7',
+    pick(['--dsw-alias-label-primary']) || (dark ? '#e5e7eb' : '#1f2328'),
+  ]
+}
+
 function MarketSection(props) {
   const t = props.t
   const localeSnap = React.useSyncExternalStore(
@@ -223,9 +259,15 @@ function MarketSection(props) {
     () => props.locale.getSnapshot(),
   )
   const lang = String(localeSnap.active).toLowerCase().startsWith('zh') ? 'zh' : 'en'
+  // null when the composition has no theme service — the Themes tab hides.
+  const themeSnap = React.useSyncExternalStore(
+    props.themeStore.subscribe,
+    props.themeStore.getSnapshot,
+  )
   const [data, setData] = useState(null)
   const [loadError, setLoadError] = useState(false)
   const [installed, setInstalled] = useState({})
+  const [skins, setSkins] = useState([])
   const [tab, setTab] = useState(() => {
     const saved = sessionStorage.getItem('dshm-tab')
     if (saved !== null) sessionStorage.removeItem('dshm-tab')
@@ -239,6 +281,7 @@ function MarketSection(props) {
   const [installError, setInstallError] = useState(null)
   const [updates, setUpdates] = useState({})
   const [updatingName, setUpdatingName] = useState(null)
+  const [updatingAll, setUpdatingAll] = useState(false)
   const [updatedNames, setUpdatedNames] = useState([])
   const [hotUrls, setHotUrls] = useState([])
   const [hotNames, setHotNames] = useState([])
@@ -257,7 +300,10 @@ function MarketSection(props) {
   const refreshInstalled = useCallback((force) => {
     fetch('/dsh-market/installed', { cache: 'no-store' })
       .then(res => res.json())
-      .then(body => setInstalled(body.installed || {}))
+      .then(body => {
+        setInstalled(body.installed || {})
+        setSkins(body.live || [])
+      })
       .catch(() => {})
     fetch('/dsh-market/updates' + (force === true ? '?force=1' : ''), { cache: 'no-store' })
       .then(res => res.json())
@@ -393,6 +439,14 @@ function MarketSection(props) {
       .then(res => res.json().then(body => ({ status: res.status, body })))
       .then(({ status, body }) => {
         sessionStorage.removeItem('dshm-pending')
+        if (status === 200 && body.ok && body.hot && plugin.category === 'theme') {
+          // Themes auto-activate on install; reload straight into the Themes
+          // tab so the new look is on screen immediately.
+          sessionStorage.setItem('dshm-toast', JSON.stringify([plugin.name]))
+          sessionStorage.setItem('dshm-tab', 'themes')
+          location.reload()
+          return
+        }
         if (status === 200 && body.ok) {
           sessionStorage.setItem('dshm-tab', 'installed')
           if (body.hot) {
@@ -418,7 +472,7 @@ function MarketSection(props) {
   const doUpdate = useCallback((name) => {
     setInstallError(null)
     setUpdatingName(name)
-    fetch('/dsh-market/update', {
+    return fetch('/dsh-market/update', {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ name }),
@@ -438,11 +492,32 @@ function MarketSection(props) {
       .finally(() => setUpdatingName(null))
   }, [refreshInstalled, t])
 
+  const doUseSkin = useCallback((name) => {
+    setInstallError(null)
+    fetch('/dsh-market/use-skin', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ name }),
+    })
+      .then(res => res.json().then(body => ({ status: res.status, body })))
+      .then(({ status, body }) => {
+        if (status === 200 && body.ok) {
+          sessionStorage.setItem('dshm-toast', JSON.stringify([name]))
+          sessionStorage.setItem('dshm-toast-mode', 'theme')
+          sessionStorage.setItem('dshm-tab', 'themes')
+          location.reload()
+        } else {
+          setInstallError(String(body.error || 'failed'))
+        }
+      })
+      .catch(error => setInstallError(String(error)))
+  }, [])
+
   const doUninstall = useCallback((name) => {
     setRemoveArmed(null)
     setInstallError(null)
     setRemovingName(name)
-    fetch('/dsh-market/uninstall', {
+    return fetch('/dsh-market/uninstall', {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ name }),
@@ -461,16 +536,147 @@ function MarketSection(props) {
       .finally(() => setRemovingName(null))
   }, [refreshInstalled])
 
+  // The market itself stays out of the batch: its update reloads this page
+  // mid-run, which would strand the remaining items.
+  const selfName = installed['dshmarket'] !== undefined ? 'dshmarket' : 'dsh-market'
+  const updatableNames = Object.keys(installed).filter(
+    name => name !== selfName && !updatedNames.includes(name) && updates[name] && updates[name].updateAvailable,
+  )
+
+  const doUpdateAll = useCallback(() => {
+    const names = updatableNames.slice()
+    setUpdatingAll(true)
+    const next = () => {
+      const name = names.shift()
+      if (name === undefined) {
+        setUpdatingAll(false)
+        return
+      }
+      doUpdate(name).then(next, next)
+    }
+    next()
+  }, [updatableNames, doUpdate])
+
   const pendingRestart = doneUrls.length + updatedNames.length + removedCount
   const hasUpdates = Object.keys(installed).some(
     name => !updatedNames.includes(name) && updates[name] && updates[name].updateAvailable,
   )
 
+  const themePlugins = data === null ? [] : data.plugins
+    .filter(p => p.category === 'theme')
+    .sort((a, b) => (b.stars || 0) - (a.stars || 0))
+
+  const pluginCard = (p) => {
+    const desc = (p.description && (p.description[lang] || p.description.en)) || ''
+    const done = doneUrls.includes(p.url) || hotUrls.includes(p.url)
+    const already = isInstalled(p, installed)
+    const busy = busyUrl === p.url
+    return h('div', { key: p.url, className: 'dshm-card' },
+      h('div', { className: 'dshm-row1' },
+        h('div', { className: 'dshm-av', style: { background: avatarColor(p.name) } },
+          p.name.replace(/^dsh[-_]/i, '').charAt(0).toUpperCase() || 'P'),
+        h('div', { style: { minWidth: 0 } },
+          h('div', { className: 'dshm-nm' }, p.name),
+          h('div', { className: 'dshm-owner' }, p.owner,
+            typeof p.stars === 'number' && h('span', { className: 'dshm-star' }, ' · ★ ' + p.stars))),
+        h('span', { className: 'dshm-grow' }),
+        h('a', { className: 'dshm-src', href: p.url, target: '_blank', rel: 'noreferrer', style: { alignSelf: 'flex-start', flexShrink: 0 } }, t('viewSource'))),
+      h('div', { className: 'dshm-desc' }, desc),
+      h('div', { className: 'dshm-foot' },
+        h('span', { className: 'dshm-cat' },
+          (data.categories[p.category] && (data.categories[p.category][lang] || data.categories[p.category].en)) || p.category),
+        h('span', { className: 'dshm-grow' }),
+        done
+          ? h('button', { className: 'dshm-btn done' }, t('installedBadge'))
+          : already
+            ? h('button', { className: 'dshm-btn done' }, t('alreadyInstalled'))
+            : busy
+              ? h('button', { className: 'dshm-btn install busy' }, t('installing'))
+              : h('button', {
+                  className: 'dshm-btn install',
+                  disabled: busyUrl !== null || !envReady,
+                  onClick: () => setConfirming(p),
+                }, t('install'))),
+      busy && h('div', { className: 'dshm-progress', style: { margin: '6px 0 0' } },
+        h('span', { className: 'dshm-spin' }),
+        h('code', { className: 'dshm-grow' }, progressLine || t('progressHint'))))
+  }
+
+  const installedNameOf = (p) => {
+    if (installed[p.name] !== undefined) return p.name
+    const repo = repoOf(p.url)
+    if (repo === null) return null
+    const needle = ('github:' + repo).toLowerCase()
+    for (const [name, spec] of Object.entries(installed)) {
+      if (String(spec).toLowerCase().includes(needle)) return name
+    }
+    return null
+  }
+
+  // Plugins loaded at boot (bundle-layer skins) aren't in the shim list but
+  // are just as live; the boot manifest is the page's own record of them.
+  const bootEntries = (typeof window !== 'undefined' && window.__DSH_BOOT__ && Array.isArray(window.__DSH_BOOT__.entries))
+    ? window.__DSH_BOOT__.entries
+    : []
+
+  // Unified card for the Themes tab: install → use/in-use → uninstall.
+  const themePluginCard = (p) => {
+    const instName = installedNameOf(p)
+    if (instName === null) return pluginCard(p)
+    const mounted = skins.includes(instName) || bootEntries.some(e => e.id === instName)
+    const desc = (p.description && (p.description[lang] || p.description.en)) || ''
+    return h('div', { key: p.url, className: 'dshm-card' },
+      h('div', { className: 'dshm-row1' },
+        h('div', { className: 'dshm-av', style: { background: avatarColor(p.name) } },
+          p.name.replace(/^dsh[-_]/i, '').charAt(0).toUpperCase() || 'P'),
+        h('div', { style: { minWidth: 0 } },
+          h('div', { className: 'dshm-nm' }, p.name),
+          h('div', { className: 'dshm-owner' }, p.owner,
+            typeof p.stars === 'number' && h('span', { className: 'dshm-star' }, ' · ★ ' + p.stars))),
+        h('span', { className: 'dshm-grow' }),
+        h('a', { className: 'dshm-src', href: p.url, target: '_blank', rel: 'noreferrer', style: { alignSelf: 'flex-start', flexShrink: 0 } }, t('viewSource'))),
+      h('div', { className: 'dshm-desc' }, desc),
+      h('div', { className: 'dshm-foot' },
+        h('span', { className: 'dshm-grow' }),
+        removingName === instName
+          ? h('button', { className: 'dshm-btn danger busy' }, t('uninstalling'))
+          : removeArmed === instName
+            ? h('button', {
+                className: 'dshm-btn danger armed',
+                onClick: () => doUninstall(instName).then(() => {
+                  if (mounted) {
+                    sessionStorage.setItem('dshm-tab', 'themes')
+                    location.reload()
+                  }
+                }),
+              }, t('confirmRemove'))
+            : h('button', { className: 'dshm-btn danger', onClick: () => setRemoveArmed(instName) }, t('uninstall')),
+        mounted
+          ? h('button', { className: 'dshm-btn done' }, t('themeActive'))
+          : h('button', { className: 'dshm-btn install', onClick: () => doUseSkin(instName) }, t('themeApply'))))
+  }
+
+  const themeCard = (id, label, swatch) => {
+    const active = themeSnap !== null && themeSnap.preference === id
+    return h('div', { key: 'th-' + id, className: 'dshm-card' },
+      h('div', { className: 'dshm-swatches' }, swatch.map((c, i) => h('i', { key: i, style: { background: c } }))),
+      h('div', { className: 'dshm-foot' },
+        h('span', { className: 'dshm-nm' }, label),
+        h('span', { className: 'dshm-grow' }),
+        active
+          ? h('button', { className: 'dshm-btn done' }, t('themeActive'))
+          : h('button', {
+              className: 'dshm-btn install',
+              onClick: () => { try { props.theme.setTheme(id) } catch (error) { setInstallError(String(error)) } },
+            }, t('themeApply'))))
+  }
+
   const categories = data === null ? [] : Object.keys(data.categories)
 
   return h('div', { className: 'dshm-root' },
     h('div', { className: 'dshm-head' },
       h('div', { style: { display: 'flex', alignItems: 'center', gap: '10px' } },
+        h('img', { src: LOGO_URI, width: 22, height: 22, alt: '', style: { borderRadius: '5px', flexShrink: 0 } }),
         h('h2', { className: 'dshm-title' }, t('nav')),
         (() => {
           const self = installed['dshmarket'] !== undefined ? 'dshmarket' : 'dsh-market'
@@ -481,7 +687,13 @@ function MarketSection(props) {
               disabled: updatingName !== null || busyUrl !== null,
               onClick: () => { setTab('installed'); doUpdate(self) },
             }, updatingName === self ? t('updating') : t('marketUpdate'))
-        })()),
+        })(),
+        updatableNames.length >= 2 && h('button', {
+          className: 'dshm-btn upd',
+          style: { fontSize: '11px', padding: '3px 10px' },
+          disabled: updatingAll || updatingName !== null || busyUrl !== null || removingName !== null,
+          onClick: () => { setTab('installed'); doUpdateAll() },
+        }, updatingAll ? t('updating') : t('updateAll') + ' (' + updatableNames.length + ')')),
       h('div', { className: 'dshm-sub' },
         t('subtitle') + (data ? ' · ' + data.count : '') + ' · ',
         h('a', { className: 'dshm-src', href: '/dsh-market/logs', download: 'dsh-market-log.txt' }, t('exportLog'))),
@@ -489,6 +701,7 @@ function MarketSection(props) {
         h('input', { placeholder: t('searchPh'), value: q, onChange: e => setQ(e.target.value) })),
       h('div', { className: 'dshm-tabs' },
         h('button', { className: 'dshm-tab' + (tab === 'discover' ? ' on' : ''), onClick: () => setTab('discover') }, t('tabDiscover')),
+        themeSnap !== null && h('button', { className: 'dshm-tab' + (tab === 'themes' ? ' on' : ''), onClick: () => setTab('themes') }, t('tabThemes')),
         h('button', { className: 'dshm-tab' + (tab === 'installed' ? ' on' : ''), onClick: () => { setTab('installed'); refreshInstalled(true) } },
           t('tabInstalled') + (Object.keys(installed).length > 0 ? ' (' + Object.keys(installed).length + ')' : ''),
           hasUpdates && h('span', { className: 'dshm-dot' }))),
@@ -542,41 +755,22 @@ function MarketSection(props) {
                     }, t(key === 'hot' ? 'sortHot' : 'sortNew'))))),
                 plugins.length === 0
                   ? h('div', { className: 'dshm-empty' }, t('empty'))
-                  : h('div', { className: 'dshm-grid' }, plugins.map(p => {
-                      const desc = (p.description && (p.description[lang] || p.description.en)) || ''
-                      const done = doneUrls.includes(p.url) || hotUrls.includes(p.url)
-                      const already = isInstalled(p, installed)
-                      const busy = busyUrl === p.url
-                      return h('div', { key: p.url, className: 'dshm-card' },
-                        h('div', { className: 'dshm-row1' },
-                          h('div', { className: 'dshm-av', style: { background: avatarColor(p.name) } },
-                            p.name.replace(/^dsh[-_]/i, '').charAt(0).toUpperCase() || 'P'),
-                          h('div', { style: { minWidth: 0 } },
-                            h('div', { className: 'dshm-nm' }, p.name),
-                            h('div', { className: 'dshm-owner' }, p.owner,
-                              typeof p.stars === 'number' && h('span', { className: 'dshm-star' }, ' · ★ ' + p.stars))),
-                          h('span', { className: 'dshm-grow' }),
-                          h('a', { className: 'dshm-src', href: p.url, target: '_blank', rel: 'noreferrer', style: { alignSelf: 'flex-start', flexShrink: 0 } }, t('viewSource'))),
-                        h('div', { className: 'dshm-desc' }, desc),
-                        h('div', { className: 'dshm-foot' },
-                          h('span', { className: 'dshm-cat' },
-                            (data.categories[p.category] && (data.categories[p.category][lang] || data.categories[p.category].en)) || p.category),
-                          h('span', { className: 'dshm-grow' }),
-                          done
-                            ? h('button', { className: 'dshm-btn done' }, t('installedBadge'))
-                            : already
-                              ? h('button', { className: 'dshm-btn done' }, t('alreadyInstalled'))
-                              : busy
-                                ? h('button', { className: 'dshm-btn install busy' }, t('installing'))
-                                : h('button', {
-                                    className: 'dshm-btn install',
-                                    disabled: busyUrl !== null || !envReady,
-                                    onClick: () => setConfirming(p),
-                                  }, t('install'))),
-                        busy && h('div', { className: 'dshm-progress', style: { margin: '6px 0 0' } },
-                          h('span', { className: 'dshm-spin' }),
-                          h('code', { className: 'dshm-grow' }, progressLine || t('progressHint'))))
-                    })))
+                  : h('div', { className: 'dshm-grid' }, plugins.map(pluginCard)))
+        : tab === 'themes' && themeSnap !== null
+          ? h(React.Fragment, null,
+              // Light/dark/system live in the official Appearance setting; this
+              // tab only shows what that setting can't: registered third-party
+              // palettes (none in the wild yet) and installable theme plugins.
+              (() => {
+                const extra = themeSnap.themes.filter(def => def.id !== 'light' && def.id !== 'dark')
+                return extra.length > 0 && h('div', { className: 'dshm-grid', style: { marginBottom: 10 } },
+                  extra.map(def => themeCard(def.id, def.id, themeSwatch(def))))
+              })(),
+              data === null
+                ? h('div', { className: 'dshm-loading' }, h('span', { className: 'dshm-spin' }), t('loading'))
+                : themePlugins.length === 0
+                  ? h('div', { className: 'dshm-empty' }, t('themeEmpty'))
+                  : h('div', { className: 'dshm-grid' }, themePlugins.map(themePluginCard)))
         : Object.keys(installed).length === 0
           ? h('div', { className: 'dshm-empty' }, t('installedEmpty'))
           : Object.entries(installed).map(([name, spec]) => {
@@ -648,7 +842,10 @@ function MarketSection(props) {
 }
 
 exports.name = 'dsh-market'
-exports.inject = ['slots', 'locale']
+// 'theme' is safe to require: ui-layout (mandatory in every web composition)
+// already hard-depends on it. This cordis's object-form inject means
+// intercept config, NOT {required,optional} — do not use it here.
+exports.inject = ['slots', 'locale', 'theme']
 exports.apply = function apply(ctx) {
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-market: dictionaries')
   const t = ctx.locale.bind(NS)
@@ -660,12 +857,25 @@ exports.apply = function apply(ctx) {
     label: () => t('nav'),
     locale: NS,
     inject: () => ({ t }),
-  }, () => h(MarketSection, { t, locale: ctx.locale })))
+  }, () => h(MarketSection, {
+    t,
+    locale: ctx.locale,
+    theme: ctx.theme,
+    themeStore: {
+      subscribe: (cb) => ctx.on('theme/change', cb),
+      getSnapshot: () => ctx.theme.getTheme(),
+    },
+  })))
 
   // Post-reload confirmation: a floating "installed and live" card in the
   // shell overlay layer, shown once after the refresh that follows a hot
   // install, so the user lands back in their flow with visible proof.
   function InstallToast() {
+    const [mode] = useState(() => {
+      const value = sessionStorage.getItem('dshm-toast-mode')
+      sessionStorage.removeItem('dshm-toast-mode')
+      return value
+    })
     const [names, setNames] = useState(() => {
       const value = readSession('dshm-toast')
       sessionStorage.removeItem('dshm-toast')
@@ -680,7 +890,7 @@ exports.apply = function apply(ctx) {
     if (names.length === 0) return null
     return h('div', { className: 'dshm-toast' },
       h('span', null, '✨'),
-      h('span', null, names.join(', ') + ' ' + t('toastReady')),
+      h('span', null, names.join(', ') + ' ' + t(mode === 'theme' ? 'toastTheme' : 'toastReady')),
       h('button', { className: 'dshm-btn install', onClick: () => setNames([]) }, t('gotIt')))
   }
   ctx.slots.inject('shell.overlay', () => ctx.slots.register({

package/lib/hot.js

@@ -21,7 +21,7 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
     }
     return path;
 };
-import { mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { logEvent } from './log.js';
@@ -31,6 +31,13 @@ let hotTreeClass;
  * The Include subclass, built once per process; null when the loader's include
  * plugin is not importable (older harness) — callers fall back to restart.
  */
+/**
+ * Packages whose host import is replaced by a no-op shim. Client-only plugins
+ * (`dsh.client` without `dsh.bundle`) have no importable host half, but
+ * client-modules only serves bundles for packages with a live loader entry —
+ * the shim fiber exists purely to satisfy that registration.
+ */
+const shimNames = new Set();
 async function loadHotTreeClass() {
     if (hotTreeClass !== undefined)
         return hotTreeClass;
@@ -46,6 +53,11 @@ async function loadHotTreeClass() {
         class MarketHotTree extends Include {
             /** Runtime-only mount list; the bundle layer owns persistence. */
             write() { }
+            import(name, getOuterStack) {
+                if (shimNames.has(name))
+                    return { name, apply: () => { } };
+                return super.import(name, getOuterStack);
+            }
         }
         hotTreeClass = MarketHotTree;
     }
@@ -54,6 +66,16 @@ async function loadHotTreeClass() {
     }
     return hotTreeClass;
 }
+/** The `dsh` declaration block of an installed package, or null when unreadable. */
+function readPkgDsh(profileDir, packageName) {
+    try {
+        const manifest = JSON.parse(readFileSync(join(profileDir, 'node_modules', packageName, 'package.json'), 'utf8'));
+        return manifest.dsh ?? {};
+    }
+    catch {
+        return null;
+    }
+}
 /**
  * Insert rows of a plugin's bundle patch, or null when the patch contains
  * anything beyond plain `id`/`name` insert rows (config blocks, disables,
@@ -87,9 +109,44 @@ export function parseSimplePatch(patchText) {
         return null;
     return rows;
 }
-/** Wipe leftover hot-mount inputs; call once when the market host starts. */
+/**
+ * Wipe leftover hot-mount inputs; call once when the market host starts.
+ * `state.json` (skin enable/disable choices) deliberately survives.
+ */
 export function cleanHotDir(profileDir) {
-    rmSync(join(profileDir, HOT_DIR), { force: true, recursive: true });
+    const dir = join(profileDir, HOT_DIR);
+    let entries;
+    try {
+        entries = readdirSync(dir);
+    }
+    catch {
+        return;
+    }
+    for (const name of entries) {
+        if (/^hot-\d+\.yml$/.test(name))
+            rmSync(join(dir, name), { force: true });
+    }
+}
+function stateFile(profileDir) {
+    return join(profileDir, HOT_DIR, 'state.json');
+}
+/** Themes the user switched away from; skipped by the boot re-mount. */
+export function readDisabledThemes(profileDir) {
+    try {
+        const state = JSON.parse(readFileSync(stateFile(profileDir), 'utf8'));
+        return new Set(Array.isArray(state.disabledSkins) ? state.disabledSkins : []);
+    }
+    catch {
+        return new Set();
+    }
+}
+export function writeDisabledThemes(profileDir, disabled) {
+    mkdirSync(join(profileDir, HOT_DIR), { recursive: true, mode: 0o700 });
+    writeFileSync(stateFile(profileDir), JSON.stringify({ disabledSkins: [...disabled] }));
+}
+/** Package names currently live through a market hot mount (patch or shim). */
+export function listHotMounts() {
+    return [...hotHandles.keys()];
 }
 let hotSequence = 0;
 const hotHandles = new Map();
@@ -104,6 +161,7 @@ export async function hotUnmount(packageName) {
     if (handle === undefined)
         return false;
     hotHandles.delete(packageName);
+    shimNames.delete(packageName);
     try {
         await handle.dispose();
         logEvent('info', 'hot-unmount', `${packageName}: removed live`);
@@ -128,23 +186,43 @@ export async function hotMount(ctx, profileDir, packageName) {
         const HotTree = await loadHotTreeClass();
         if (HotTree === null)
             return false;
-        const patchText = readFileSync(join(profileDir, 'node_modules', packageName, 'cordis.patch.yml'), 'utf8');
-        const rows = parseSimplePatch(patchText);
-        if (rows === null)
-            return false;
+        let patchText;
+        try {
+            patchText = readFileSync(join(profileDir, 'node_modules', packageName, 'cordis.patch.yml'), 'utf8');
+        }
+        catch {
+            patchText = null;
+        }
+        let rows;
+        if (patchText !== null) {
+            rows = parseSimplePatch(patchText);
+            if (rows === null)
+                return false;
+        }
+        else {
+            // No host patch. Client-only packages (dsh.client, no dsh.bundle) never
+            // get a loader entry — not even after a restart — so client-modules
+            // would never serve their bundle. A shim entry under the package's name
+            // is the whole activation.
+            const dsh = readPkgDsh(profileDir, packageName);
+            if (dsh === null || dsh.client === undefined || dsh.bundle !== undefined)
+                return false;
+            shimNames.add(packageName);
+            rows = [{ id: `client-${packageName.replace(/[^A-Za-z0-9_.-]/g, '-')}`, name: packageName }];
+        }
         const dir = join(profileDir, HOT_DIR);
         mkdirSync(dir, { recursive: true, mode: 0o700 });
         hotSequence += 1;
         const file = join(dir, `hot-${String(hotSequence)}.yml`);
         const yml = rows
-            .map(row => `- id: mkt-${row.id}\n  name: '${row.name}'\n`)
+            .map(row => `- id: 'mkt-${row.id}'\n  name: '${row.name}'\n`)
             .join('');
         writeFileSync(file, yml);
         const handle = ctx.plugin(HotTree, { path: pathToFileURL(file).href });
         await handle.await();
         hotHandles.set(packageName, handle);
         ctx.logger?.info?.(`[dsh-market] hot-mounted ${packageName}`);
-        logEvent('info', 'hot-mount', `${packageName}: live`);
+        logEvent('info', 'hot-mount', `${packageName}: live${shimNames.has(packageName) ? ' (client-only shim)' : ''}`);
         return true;
     }
     catch (error) {
@@ -154,3 +232,33 @@ export async function hotMount(ctx, profileDir, packageName) {
         return false;
     }
 }
+/**
+ * Mount every installed client-only package (`dsh.client` without
+ * `dsh.bundle`) at market startup. The bundle reconcile skips these packages
+ * entirely, so without the market's shim their client bundles are unreachable
+ * in every boot — this is what makes them behave like normal plugins.
+ * @returns names that were mounted.
+ */
+export async function mountClientOnlyDeps(ctx, profileDir) {
+    let deps;
+    try {
+        const manifest = JSON.parse(readFileSync(join(profileDir, 'package.json'), 'utf8'));
+        const bundles = new Set(manifest.dsh?.profile?.bundles ?? []);
+        deps = Object.keys(manifest.dependencies ?? {}).filter(name => !bundles.has(name));
+    }
+    catch {
+        return [];
+    }
+    const disabled = readDisabledThemes(profileDir);
+    const mounted = [];
+    for (const name of deps) {
+        if (hotHandles.has(name) || disabled.has(name))
+            continue;
+        const dsh = readPkgDsh(profileDir, name);
+        if (dsh === null || dsh.client === undefined || dsh.bundle !== undefined)
+            continue;
+        if (await hotMount(ctx, profileDir, name))
+            mounted.push(name);
+    }
+    return mounted;
+}