@goodandready/dsh-tts 0.3.3 → 0.3.5

package/lib/client.js

@@ -29,33 +29,31 @@ 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}' +
       '.dts-badge-on{color:var(--dsw-alias-state-success-primary);border-color:currentColor}' +
-      '.dts-link{background:none;border:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-size:12px;padding:0}' +
-      // Карточка во вкладке «Настройки плагинов» — как у соседних
-      // плагинов: li в списке ядра, шапка со сбросом темы, шеврон.
-      '.dts-card{list-style:none;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;transition:border-color .16s,background .16s}' +
-      '.dts-card:hover{border-color:var(--dsw-alias-label-dimmed)}' +
-      '.dts-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}' +
-      '.dts-cardHead{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}' +
-      '.dts-cardHead:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}' +
-      '.dts-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}' +
-      '.dts-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}' +
-      '.dts-descr{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}' +
-      '.dts-chev{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}' +
-      '.dts-chevOpen{transform:rotate(180deg)}' +
-      '.dts-cardBody{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding:16px 0 8px}'
+      '.dts-link{background:none;border:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-size:12px;padding:0}'
 
     const setCssId = 'dsh-tts/settings.module.css'
     if (typeof document !== 'undefined' && !document.querySelector('style[data-plugin-css="' + setCssId + '"]')) {
@@ -278,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'),
@@ -295,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),
@@ -514,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)),
         }),
@@ -521,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,
@@ -572,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,
@@ -581,23 +584,22 @@ window.__ModuleLoader__.load({
     }
 
 
-    // Карточка во вкладке «Настройки плагинов» — та же структура, что у
-    // ядра и соседних плагинов: li в списке, шапка-кнопка со сбросом
-    // темы (иначе браузерный стиль кнопки красит её фирменным акцентом),
-    // шеврон, тело с формой.
+    // Карточка во вкладке «Настройки плагинов» — разметка и стили по
+    // единому канону (issue #19): li в списке ядра, шапка со сбросом темы,
+    // тело с чертой-разделителем. Шеврон — наш, ядро его не даёт.
     function TtsCard(props) {
       const t = (props && props.t) || ((key) => key)
       const [open, setOpen] = React.useState(false)
-      return React.createElement('li', { className: 'dts-card' + (open ? ' dts-cardOpen' : '') },
+      return React.createElement('li', { className: 'dts-card' },
         React.createElement('button', {
           type: 'button',
-          className: 'dts-cardHead',
+          className: 'dts-head',
           onClick: () => setOpen(!open),
           'aria-expanded': open,
         },
           React.createElement('div', { className: 'dts-headText' },
-            React.createElement('div', { className: 'dts-name' }, t('title')),
-            React.createElement('div', { className: 'dts-descr' }, t('cardHint')),
+            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' : ''),
@@ -609,8 +611,8 @@ window.__ModuleLoader__.load({
             }),
           ),
         ),
-        open ? React.createElement('div', { className: 'dts-cardBody' },
-          React.createElement(TtsSection, props),
+        open ? React.createElement('div', { className: 'dts-body' },
+          React.createElement(TtsSection, Object.assign({}, props, { compact: true })),
         ) : null,
       )
     }
@@ -644,7 +646,25 @@ window.__ModuleLoader__.load({
     }
 
     function registerSettings(ctx) {
-      ctx.effect(() => ctx.locale.register(NS, { en, ru }), 'dsh-tts: словари')
+      // Язык может принести не только плагин: словарные пакеты объявляют
+      // русский для чужих пространств. Ядро на повторное объявление той же
+      // пары «пространство + язык» бросает исключение, и незащищённый вызов
+      // уносил с собой весь плагин — в интерфейсе это выглядело как «Failed to
+      // load plugins» с перечнем ни в чём не повинных соседей.
+      //
+      // Поэтому каждый язык объявляется отдельно и по-хорошему: заняли до нас —
+      // уступаем, свой английский при этом всё равно встаёт на место.
+      const addLocale = (locale, dictionary) => {
+        try {
+          return ctx.locale.register(NS, locale, dictionary)
+        } catch (alreadyTaken) {
+          return () => {}
+        }
+      }
+      ctx.effect(() => {
+        const undo = [addLocale('en', en), addLocale('ru', ru)]
+        return () => { for (const off of undo) off() }
+      }, 'dsh-tts: словари')
       // Подпись раздела рисует боковой список, а не наш компонент: props.t
       // туда не доходит, поэтому берём переводчик, привязанный к namespace.
       const t = ctx.locale.bind(NS)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-tts",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "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",