@goodandready/dsh-tts 0.3.1 → 0.3.3

package/lib/client.js

@@ -42,7 +42,20 @@ window.__ModuleLoader__.load({
       '.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}'
+      '.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}'
 
     const setCssId = 'dsh-tts/settings.module.css'
     if (typeof document !== 'undefined' && !document.querySelector('style[data-plugin-css="' + setCssId + '"]')) {
@@ -353,6 +366,7 @@ window.__ModuleLoader__.load({
       'down': 'Down',
       'save': 'Save',
       'saved': 'Saved',
+      'cardHint': 'Provider chain, voices and playback options.',
     }
     const ru = {
       'general': 'Общее',
@@ -400,6 +414,7 @@ window.__ModuleLoader__.load({
       'down': 'Ниже',
       'save': 'Сохранить',
       'saved': 'Сохранено',
+      'cardHint': 'Цепочка провайдеров, голоса и параметры чтения.',
     }
 
     function TtsSection(props) {
@@ -565,6 +580,41 @@ window.__ModuleLoader__.load({
       )
     }
 
+
+    // Карточка во вкладке «Настройки плагинов» — та же структура, что у
+    // ядра и соседних плагинов: 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' : '') },
+        React.createElement('button', {
+          type: 'button',
+          className: 'dts-cardHead',
+          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('svg', {
+            className: 'dts-chev' + (open ? ' dts-chevOpen' : ''),
+            width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none',
+          },
+            React.createElement('path', {
+              d: 'M4 6l4 4 4-4', stroke: 'currentColor', 'stroke-width': 1.5,
+              'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+            }),
+          ),
+        ),
+        open ? React.createElement('div', { className: 'dts-cardBody' },
+          React.createElement(TtsSection, props),
+        ) : null,
+      )
+    }
+
     // Кнопка в строке ввода: видно, что сейчас читается, и можно остановить.
     function SpeakerControl() {
       const p = usePlayer()
@@ -598,12 +648,30 @@ window.__ModuleLoader__.load({
       // Подпись раздела рисует боковой список, а не наш компонент: props.t
       // туда не доходит, поэтому берём переводчик, привязанный к namespace.
       const t = ctx.locale.bind(NS)
+      // Штатное место настроек — карточка во вкладке «Настройки плагинов».
+      // Вкладка перебирает пространства настроек и ищет слот по entryKey,
+      // равному имени пространства: ключ обязан равняться NS, иначе карточка
+      // не появится молча, без единой ошибки в журнале.
+      let moved = false
+      try {
+        moved = !!ctx.slots.inject('settings.plugin.item', () => ctx.slots.register(
+          {
+            name: 'settings.plugin.item',
+            key: NS,
+            locale: NS,
+            inject: () => ({ ctx: ctx }),
+          },
+          TtsCard,
+        ))
+      } catch (noPluginItemSlot) { moved = false }
+      if (moved) return
+      // Запасной путь для сборок без settings.plugin.item: прежний раздел
+      // в боковом списке, чтобы настройки не пропали.
       ctx.slots.inject('settings.section', () => ctx.slots.register(
         {
           name: 'settings.section',
           id: '@goodandready/dsh-tts',
           order: 32,
-          // locale в записи слота — то, из-за чего компонент получает props.t.
           locale: NS,
           label: () => t('title'),
           inject: () => ({ ctx: ctx }),
@@ -617,7 +685,10 @@ window.__ModuleLoader__.load({
       registerSettings(ctx)
       registerSpeaker(ctx)
       ctx.effect(() => listenForVoice(), 'dsh-tts: замолкать, когда человек заговорил')
-      setInterval(pollPending, 1000)
+      ctx.effect(() => {
+        const timer = setInterval(pollPending, 1000)
+        return () => clearInterval(timer)
+      }, 'dsh-tts: опрос готовых озвучек')
     }
     return module.exports
   },

package/package.json

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