dsh-sidebar-browser-agent 0.2.8 → 0.2.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.9
+
+- Polished the official-style plugin page rhythm: field/row spacing, tertiary
+  12px hints, the same input surface and radius the built-in settings pages
+  use, and the shared form footer as the only save action.
+
 ## 0.2.8
 
 - The plugin page now follows the official plugin-page style: the configuration

package/lib/client.js

@@ -47,7 +47,7 @@ window.__ModuleLoader__.load({
     const BASE_BACKOFF_MS = 400
     const MAX_EVAL_CHARS = 100_000
     /** Plugin version reported by diagnostics; keep in sync with package.json. */
-    const PLUGIN_VERSION = '0.2.8'
+    const PLUGIN_VERSION = '0.2.9'
     const MAX_SCREENSHOT_WIDTH = 1_400
     const MAX_SCREENSHOT_BASE64 = 12_000_000
     /**
@@ -1227,12 +1227,22 @@ window.__ModuleLoader__.load({
         font: 'inherit',
       },
       // --- official-style settings page (shared SettingsForm + Switch) ---
-      switchList: { display: 'flex', flexDirection: 'column' },
+      // Mirrors the built-in settings page rhythm: the shared form only stacks
+      // children, so each block below brings its own 12px vertical padding, the
+      // same scale the official fields and rows use.
+      formBody: { display: 'flex', flexDirection: 'column' },
+      noticeOfficial: {
+        margin: '0 0 4px',
+        color: 'var(--dsw-alias-label-secondary)',
+        fontSize: '13px',
+        lineHeight: 1.5,
+      },
+      switchList: { display: 'flex', flexDirection: 'column', padding: '12px 0' },
       switchRow: {
         display: 'flex',
         alignItems: 'center',
         gap: '16px',
-        minHeight: '44px',
+        minHeight: '40px',
         padding: '8px 0',
         borderBottom: '0.5px solid var(--dsw-alias-border-l2)',
       },
@@ -1240,28 +1250,29 @@ window.__ModuleLoader__.load({
         display: 'flex',
         alignItems: 'center',
         gap: '16px',
-        minHeight: '44px',
+        minHeight: '40px',
         padding: '8px 0',
       },
       switchText: { display: 'flex', flexDirection: 'column', gap: '2px', flex: '1 1 auto', minWidth: 0 },
-      switchLabel: { color: 'var(--dsw-alias-label-primary)', fontSize: '13px', lineHeight: '20px', fontWeight: 500 },
-      switchHint: { color: 'var(--dsw-alias-label-secondary)', fontSize: '13px', lineHeight: '18px' },
-      fieldLabel: { color: 'var(--dsw-alias-label-primary)', fontSize: '13px', lineHeight: '20px' },
+      switchLabel: { color: 'var(--dsw-alias-label-primary)', fontSize: '13px', lineHeight: 1.5, fontWeight: 500 },
+      switchHint: { color: 'var(--dsw-alias-label-tertiary)', fontSize: '12px', lineHeight: 1.5 },
+      field: { display: 'flex', flexDirection: 'column', gap: '6px', padding: '12px 0' },
+      fieldLabel: { color: 'var(--dsw-alias-label-primary)', fontSize: '13px', lineHeight: 1.5, fontWeight: 500 },
+      fieldHint: { color: 'var(--dsw-alias-label-tertiary)', fontSize: '12px', lineHeight: 1.5 },
       textareaOfficial: {
         boxSizing: 'border-box',
         width: '100%',
         minHeight: '96px',
         color: 'var(--dsw-alias-label-primary)',
-        background: 'var(--dsw-alias-bg-base)',
+        background: 'var(--dsw-alias-bg-layer-3)',
         border: '0.5px solid var(--dsw-alias-border-l4)',
         borderRadius: 'var(--dsw-radius-md, 8px)',
         font: 'inherit',
         fontSize: '13px',
-        lineHeight: '20px',
-        padding: '8px 10px',
+        lineHeight: 1.5,
+        padding: '8px 12px',
         resize: 'vertical',
       },
-      noticeOfficial: { color: 'var(--dsw-alias-label-secondary)', margin: 0, fontSize: '13px', lineHeight: '20px' },
     }
 
     /**
@@ -1378,7 +1389,7 @@ window.__ModuleLoader__.load({
         switchRow(t, { label: 'config.enabled', hint: 'config.enabledHint', checked: draft.enabled, disabled: readOnly, onChange: (next) => setDraft({ ...draft, enabled: next }) }),
         React.createElement('div', { style: configStyles.field },
           React.createElement('span', { style: configStyles.checkLabel }, t('config.hosts')),
-          React.createElement('span', { style: configStyles.hint }, t('config.hostsHint')),
+          React.createElement('span', { style: configStyles.fieldHint }, t('config.hostsHint')),
           React.createElement('textarea', {
             style: configStyles.textarea,
             rows: 4,
@@ -1492,13 +1503,14 @@ window.__ModuleLoader__.load({
         }),
       )
       return React.createElement(SettingsForm, { labels, state: model, onSave: save, onDiscard: discard },
-        React.createElement('p', { style: configStyles.noticeOfficial }, t('config.intro')),
-        React.createElement('div', { style: configStyles.switchList },
+        React.createElement('div', { style: configStyles.formBody },
+          React.createElement('p', { style: configStyles.noticeOfficial }, t('config.intro')),
+          React.createElement('div', { style: configStyles.switchList },
           toggleRow('enabled', 'config.enabled', 'config.enabledHint', false),
           toggleRow('allowEval', 'config.allowEval', 'config.allowEvalHint', false),
-          toggleRow('allowNativeInput', 'config.allowNativeInput', 'config.allowNativeInputHint', true),
-        ),
-        React.createElement('div', { style: configStyles.field },
+            toggleRow('allowNativeInput', 'config.allowNativeInput', 'config.allowNativeInputHint', true),
+          ),
+          React.createElement('div', { style: configStyles.field },
           React.createElement('span', { style: configStyles.fieldLabel }, t('config.hosts')),
           React.createElement('textarea', {
             style: configStyles.textareaOfficial,
@@ -1509,7 +1521,8 @@ window.__ModuleLoader__.load({
             value: draft.hostsText,
             onChange: (event) => setDraft({ ...draft, hostsText: event.target.value }),
           }),
-          React.createElement('span', { style: configStyles.hint }, t('config.hostsHint')),
+            React.createElement('span', { style: configStyles.fieldHint }, t('config.hostsHint')),
+          ),
         ),
       )
     }

package/lib/{entry-0.2.8.js → entry-0.2.9.js}

@@ -20,7 +20,7 @@ import z from '../vendor/schemastery/index.mjs'
 export const name = 'dsh-sidebar-browser-agent'
 
 /** Plugin version reported by diagnostics; keep in sync with package.json. */
-export const PLUGIN_VERSION = '0.2.8'
+export const PLUGIN_VERSION = '0.2.9'
 
 /** Services that must exist before this plugin mounts. */
 export const inject = ['webServer', 'connection', 'tools']

package/lib/index.js

@@ -20,7 +20,7 @@ import z from '../vendor/schemastery/index.mjs'
 export const name = 'dsh-sidebar-browser-agent'
 
 /** Plugin version reported by diagnostics; keep in sync with package.json. */
-export const PLUGIN_VERSION = '0.2.8'
+export const PLUGIN_VERSION = '0.2.9'
 
 /** Services that must exist before this plugin mounts. */
 export const inject = ['webServer', 'connection', 'tools']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-sidebar-browser-agent",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "type": "module",
   "icon": "./icon.svg",
   "description": "Native agent control for the DSH right-sidebar browser: manage tabs, and read, click, type, scroll, run JavaScript in and screenshot the real page through its Electron guest.",
@@ -20,7 +20,7 @@
     "electron-webview"
   ],
   "exports": {
-    ".": "./lib/entry-0.2.8.js",
+    ".": "./lib/entry-0.2.9.js",
     "./client": "./lib/client.js",
     "./locale/*.json": "./locale/*.json",
     "./icon": "./icon.svg"