@philomelcc/dsh-workbench 0.1.1 → 0.1.3

package/client.js

@@ -434,7 +434,96 @@ window.__ModuleLoader__.load({
         h('path', { d: 'M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-4 3.5V6z', stroke: 'currentColor', strokeWidth: 1.6, strokeLinejoin: 'round' }));
     }
 
+    // ---------- theme switcher ----------
+    // `paper` builds on the light palette and overrides the alias layer only.
+    const PAPER_THEME = {
+      id: 'paper',
+      colorScheme: 'light',
+      tokens: {
+        '--dsw-alias-bg-base': '#f4efe3',
+        '--dsw-alias-bg-layer-1': '#efe9db',
+        '--dsw-alias-bg-layer-2': '#e7dfcd',
+        '--dsw-alias-bg-overlay': '#fbf7ee',
+        '--dsw-alias-border-l1': '#d8cfba',
+        '--dsw-alias-border-l2': '#c6bba2',
+        '--dsw-alias-brand-primary': '#8a6a45',
+        '--dsw-alias-label-primary': '#3b342a',
+        '--dsw-alias-label-secondary': '#6f6557',
+        '--dsw-alias-state-error-primary': '#a34a3c',
+        '--dsw-alias-state-warn-primary': '#a8792c',
+        '--dsw-alias-state-success-primary': '#4f7a5a',
+        '--dsw-alias-state-idle-primary': '#a49a89',
+        '--dsw-specific-sidebar-fill': '#efe9db',
+      },
+    };
+
+    // Swatches double as both the current-state indicator and the toggle.
+    const THEME_SWATCHES = [
+      { id: 'dark', label: '深色', color: '#15171a' },
+      { id: 'light', label: '浅色', color: '#f7f8fa' },
+      { id: 'paper', label: '纸质', color: '#f4efe3' },
+    ];
+
+    function createThemeSwitcher(ctx) {
+      function ThemeSwitcher() {
+        const theme = typeof ctx.get === 'function' ? ctx.get('theme') : ctx.theme;
+        const read = () => {
+          try {
+            const snapshot = theme && typeof theme.getTheme === 'function' ? theme.getTheme() : null;
+            return snapshot ? snapshot.preference : null;
+          } catch (_error) {
+            return null;
+          }
+        };
+        const [preference, setPreference] = React.useState(read);
+
+        React.useEffect(() => {
+          if (!theme || typeof theme.getTheme !== 'function' || typeof ctx.on !== 'function') return undefined;
+          let off = null;
+          try {
+            off = ctx.on('theme/change', () => setPreference(read()));
+          } catch (_error) {
+            off = null;
+          }
+          return () => { if (typeof off === 'function') off(); };
+        }, []);
+
+        return h('div', {
+          style: { display: 'inline-flex', alignItems: 'center', gap: 7, flex: '0 0 auto' },
+          title: '主题',
+        },
+          THEME_SWATCHES.map((swatch) => {
+            const active = preference === swatch.id;
+            return h('button', {
+              key: swatch.id,
+              type: 'button',
+              title: swatch.label,
+              'aria-label': swatch.label,
+              'aria-pressed': active ? 'true' : 'false',
+              onClick: () => {
+                if (!theme || typeof theme.setTheme !== 'function') return;
+                try { theme.setTheme(swatch.id); } catch (error) { console.warn('[workbench] setTheme failed', error); }
+              },
+              style: {
+                width: 15, height: 15, padding: 0, borderRadius: '50%', flex: '0 0 auto',
+                background: swatch.color,
+                border: '1px solid ' + (active ? 'var(--dsw-alias-brand-primary)' : 'var(--dsw-alias-border-l2)'),
+                boxShadow: active
+                  ? '0 0 0 2px var(--dsw-alias-bg-base), 0 0 0 3px var(--dsw-alias-brand-primary)'
+                  : 'none',
+                cursor: 'pointer',
+                transition: 'box-shadow .12s, border-color .12s',
+              },
+            });
+          }),
+        );
+      }
+      return ThemeSwitcher;
+    }
+
     function createTopBar(ctx, balance) {
+      const ThemeSwitcher = createThemeSwitcher(ctx);
+
       function BalanceChip() {
         const snap = React.useSyncExternalStore(balance.subscribe, balance.getSnapshot);
         const [hover, setHover] = React.useState(false);
@@ -637,7 +726,7 @@ window.__ModuleLoader__.load({
               iconBtn('plugins', '插件', IconPlugins),
               iconBtn('schedules', '自动化任务', IconClock),
             ),
-            null,
+            h('div', { style: { flex: '0 0 auto', marginRight: 150 } }, h(ThemeSwitcher)),
           ),
           h('div', { style: { height: 45, display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px', borderTop: '1px solid var(--dsw-alias-border-l1)' } },
             h('div', { ref: tabsRef, style: { position: 'relative', display: 'flex', alignItems: 'center', gap: 4, flex: 1, overflowX: 'auto', overflowY: 'hidden' } },
@@ -1116,8 +1205,17 @@ div[data-row-key^="session:"]:has(svg[data-state="ongoing"]) svg[data-state="ong
         var r = radiusOf(width, height);
         var total = perimeter(width, height);
         var t = (now % ORBIT_MS) / ORBIT_MS;
+        // 呼吸边框：2.8s 一个周期，和原来 CSS 动画同节奏；在 canvas 内画，
+        // 所以只会有一条边（不会再和 CSS box-shadow 叠成双线）。
+        var breath = 0.5 + 0.5 * Math.sin((now / 2800) * Math.PI * 2);
+        var dim = entry.lights === 1 ? 0.35 : 1;
+        var edgeAlpha = (0.12 + breath * 0.33) * dim;
 
-        context.strokeStyle = "rgba(99, 149, 255, 0.07)";
+        context.save();
+        context.lineWidth = 1;
+        context.strokeStyle = "rgba(99, 149, 255, " + edgeAlpha.toFixed(3) + ")";
+        context.shadowBlur = (4 + breath * 10) * dim;
+        context.shadowColor = "rgba(99, 149, 255, " + ((0.2 + breath * 0.35) * dim).toFixed(3) + ")";
         context.beginPath();
         if (typeof context.roundRect === "function") {
           context.roundRect(0.5, 0.5, width - 1, height - 1, r);
@@ -1125,6 +1223,7 @@ div[data-row-key^="session:"]:has(svg[data-state="ongoing"]) svg[data-state="ong
           context.rect(0.5, 0.5, width - 1, height - 1);
         }
         context.stroke();
+        context.restore();
 
         var count = Math.max(24, Math.ceil(total / STEP_PX));
         for (var i = 0; i < count; i += 1) {
@@ -1230,6 +1329,16 @@ div[data-row-key^="session:"]:has(svg[data-state="ongoing"]) svg[data-state="ong
         layoutService = ctx.get('layout') || null;
         layoutGetter = () => ctx.get('layout') || null;
 
+        // Extra palette on top of the built-in light/dark pair.
+        try {
+          const themeService = typeof ctx.get === 'function' ? ctx.get('theme') : null;
+          if (themeService && typeof themeService.register === 'function') {
+            ctx.effect(() => themeService.register(PAPER_THEME), 'workbench: paper theme');
+          }
+        } catch (error) {
+          console.warn('[workbench] paper theme registration failed', error);
+        }
+
         // The shell's own overview lives above the tab row: it is reachable from
         // the top-bar "工作台" icon, so it registers a page without a tab.
         ctx.effect(() => api.registerView({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@philomelcc/dsh-workbench",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "description": "Workbench shell for DeepSeek Harness: a view/page module API, shared UI primitives and a top-bar switcher.",
   "license": "MIT",