@goodandready/dsh-tts 0.3.2 → 0.3.4

package/lib/client.js

@@ -29,15 +29,26 @@ window.__ModuleLoader__.load({
       '.dts-wrap{display:flex;flex-direction:column;gap:22px;padding:4px 0;max-width:720px}' +
       '.dts-block{display:flex;flex-direction:column;gap:10px}' +
       '.dts-h{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}' +
-      '.dts-sub{font-size:12px;color:var(--dsw-alias-label-secondary)}' +
+      // Единый вид карточки «Настройки плагинов»: значения из канона
+      // (issue #19), цвета только переменными темы.
+      '.dts-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none}' +
+      '.dts-head{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;display:flex;align-items:center;gap:12px;padding:14px 16px}' +
+      '.dts-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}' +
+      '.dts-title{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}' +
+      '.dts-sub{color:var(--dsw-alias-label-secondary);font-size:13px}' +
+      '.dts-chev{margin-left:auto;color:var(--dsw-alias-label-secondary);flex:none;transition:transform .16s}' +
+      '.dts-chevOpen{transform:rotate(180deg)}' +
+      '.dts-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}' +
+      '.dts-field{display:flex;flex-direction:column;gap:6px;padding:12px 0}' +
+      '.dts-input{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}' +
+      '.dts-foot{border-top:1px solid var(--dsw-alias-border-l2);display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px}' +
+      '.dts-save{appearance:none;font:inherit;cursor:pointer;border:1px solid transparent;border-radius:8px;padding:5px 14px;font-size:13px;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}' +
+      // Помощники внутренней формы (цепочка провайдеров).
       '.dts-entry{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px}' +
       '.dts-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}' +
-      '.dts-row select,.dts-row input,.dts-field input,.dts-field select{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-primary);border-radius:6px;padding:6px 8px;font-size:13px}' +
       '.dts-row .dts-model{flex:1;min-width:120px}' +
       '.dts-row .dts-key{flex:1;min-width:180px}' +
-      '.dts-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dsw-alias-label-secondary)}' +
       '.dts-mini{border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);border-radius:6px;width:28px;height:28px;cursor:pointer;flex:none}' +
-      '.dts-save{background:var(--dsw-alias-brand-primary);color:#fff;border:none;border-radius:6px;padding:7px 14px;font-size:13px;cursor:pointer}' +
       '.dts-ok{font-size:12px;color:var(--dsw-alias-state-success-primary)}' +
       '.dts-bad{font-size:12px;color:var(--dsw-alias-state-error-primary)}' +
       '.dts-badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);white-space:nowrap}' +
@@ -265,15 +276,16 @@ window.__ModuleLoader__.load({
           return React.createElement('div', { className: 'dts-entry', key: i },
             React.createElement('div', { className: 'dts-row' },
               React.createElement('select', {
+                className: 'dts-input',
                 value: row.provider, disabled: !props.writable,
                 onChange: (e) => change(i, { provider: e.target.value }),
               }, PROVIDERS.map((p) => React.createElement('option', { key: p, value: p }, p))),
               React.createElement('input', {
-                className: 'dts-model', value: row.model || '', disabled: !props.writable,
+                className: 'dts-model dts-input', value: row.model || '', disabled: !props.writable,
                 placeholder: MODEL_HINT[row.provider] || '', onChange: (e) => change(i, { model: e.target.value }),
               }),
               React.createElement('input', {
-                className: 'dts-model', value: row.voice || '', disabled: !props.writable,
+                className: 'dts-model dts-input', value: row.voice || '', disabled: !props.writable,
                 placeholder: 'voice', onChange: (e) => change(i, { voice: e.target.value }),
               }),
               React.createElement('button', { type: 'button', className: 'dts-mini', title: t('up'), disabled: !props.writable, onClick: () => move(i, -1) }, '\u2191'),
@@ -282,7 +294,7 @@ window.__ModuleLoader__.load({
             ),
             cloud ? React.createElement('div', { className: 'dts-row' },
               React.createElement('input', {
-                className: 'dts-key', type: 'password', autoComplete: 'off',
+                className: 'dts-key dts-input', type: 'password', autoComplete: 'off',
                 value: draft, disabled: !props.writable || !cred.writable,
                 placeholder: cred.configured ? 'leave blank to keep' : 'paste API key',
                 onChange: (e) => props.onDraft(row.provider, e.target.value),
@@ -501,6 +513,7 @@ window.__ModuleLoader__.load({
       const numberField = (key, label, hint, step) => React.createElement('label', { className: 'dts-field' }, label,
         React.createElement('input', {
           type: 'number', step: step || 1,
+          className: 'dts-input',
           value: draft && draft[key] !== undefined ? draft[key] : '', disabled: !writable,
           onChange: (e) => setTop(key, Number(e.target.value)),
         }),
@@ -508,14 +521,17 @@ window.__ModuleLoader__.load({
 
       const textField = (key, label, hint) => React.createElement('label', { className: 'dts-field' }, label,
         React.createElement('input', {
+          className: 'dts-input',
           value: draft && draft[key] !== undefined ? draft[key] : '', disabled: !writable,
           onChange: (e) => setTop(key, e.target.value),
         }),
         React.createElement('span', { className: 'dts-sub' }, hint))
 
+      // В карточке заголовок рисует шапка — свой блок не дублируем.
+      const titleLine = props && props.compact ? null : React.createElement('div', { className: 'dts-h' }, t('title'))
       return React.createElement('div', { className: 'dts-wrap' },
         React.createElement('div', { className: 'dts-block' },
-          React.createElement('div', { className: 'dts-h' }, t('title')),
+          titleLine,
           React.createElement('label', { className: 'dts-row' },
             React.createElement('input', {
               type: 'checkbox', checked: !!(draft && draft.speakReplies), disabled: !writable,
@@ -559,7 +575,7 @@ window.__ModuleLoader__.load({
           textField('edgeBin', t('edgeBin'), t('edgeHint')),
           textField('azureRegion', t('azureRegion'), t('azureHint')),
         ),
-        React.createElement('div', { className: 'dts-row' },
+        React.createElement('div', { className: 'dts-foot' },
           React.createElement('button', { type: 'button', className: 'dts-save', disabled: !writable, onClick: save }, t('save')),
           saved ? React.createElement('span', { className: 'dts-ok' }, t('saved')) : null,
           err ? React.createElement('span', { className: 'dts-bad' }, err) : null,
@@ -568,28 +584,36 @@ window.__ModuleLoader__.load({
     }
 
 
-    // Карточка настроек во вкладке «Плагины»: заголовок, пояснение и
-    // сворачивание рисуем сами — ядро даёт только рамку списка.
+    // Карточка во вкладке «Настройки плагинов» — разметка и стили по
+    // единому канону (issue #19): li в списке ядра, шапка со сбросом темы,
+    // тело с чертой-разделителем. Шеврон — наш, ядро его не даёт.
     function TtsCard(props) {
       const t = (props && props.t) || ((key) => key)
       const [open, setOpen] = React.useState(false)
-      return React.createElement('div',
-        {
-          className: 'dts-wrap',
-          style: { border: '1px solid var(--dsw-alias-border-l2)', borderRadius: '8px', marginBottom: '10px' },
+      return React.createElement('li', { className: 'dts-card' },
+        React.createElement('button', {
+          type: 'button',
+          className: 'dts-head',
+          onClick: () => setOpen(!open),
+          'aria-expanded': open,
         },
-        React.createElement('button',
-          {
-            type: 'button',
-            'aria-expanded': open ? 'true' : 'false',
-            onClick: () => setOpen((v) => !v),
-            style: { display: 'flex', width: '100%', gap: '8px', alignItems: 'baseline', background: 'none', border: 'none', padding: '10px 12px', cursor: 'pointer', textAlign: 'left' },
+          React.createElement('div', { className: 'dts-headText' },
+            React.createElement('div', { className: 'dts-title' }, t('title')),
+            React.createElement('div', { className: 'dts-sub' }, t('cardHint')),
+          ),
+          React.createElement('svg', {
+            className: 'dts-chev' + (open ? ' dts-chevOpen' : ''),
+            width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none',
           },
-          React.createElement('strong', null, t('title')),
-          React.createElement('span', { className: 'dts-sub' }, t('cardHint')),
-          React.createElement('span', { style: { marginLeft: 'auto', color: 'var(--dsw-alias-label-secondary)' } }, open ? '\u25be' : '\u25b8'),
+            React.createElement('path', {
+              d: 'M4 6l4 4 4-4', stroke: 'currentColor', 'stroke-width': 1.5,
+              'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+            }),
+          ),
         ),
-        open ? React.createElement(TtsSection, props) : null,
+        open ? React.createElement('div', { className: 'dts-body' },
+          React.createElement(TtsSection, Object.assign({}, props, { compact: true })),
+        ) : null,
       )
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-tts",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Text-to-speech for DeepSeek Harness: speak agent replies in the Web UI with a provider fallback chain (OpenAI, ElevenLabs, Google, Azure, Groq, Deepgram, OpenRouter, Edge, Piper, eSpeak).",
   "license": "MIT",
   "type": "module",