dsh-live-voice 0.0.1-developing → 0.1.0

package/src/client/index.ts

@@ -0,0 +1,430 @@
+// @ts-nocheck
+import React from 'react';
+import { VoiceCoordinator } from '../core/coordinator.ts';
+import { VoiceOwnership } from '../core/ownership.ts';
+import { normalizeSettings } from '../core/settings.ts';
+import { MicrophoneMeter } from '../core/microphone.ts';
+import { BrowserSpeakingEngine } from '../engines/speaking/browser.ts';
+import { SayClientEngine } from '../engines/speaking/say-client.ts';
+import { BrowserRecognitionEngine } from '../engines/recognition/browser.ts';
+import { WhisperHttpRecognitionEngine } from '../engines/recognition/whisper-http.ts';
+import { QwenHttpRecognitionEngine } from '../engines/recognition/qwen-http.ts';
+import { QwenHttpSpeakingEngine } from '../engines/speaking/qwen-http.ts';
+import { createComponents } from './components.ts';
+import { styles } from './styles.ts';
+import { assistantMessages, addressedTurn, latestUserSequence } from './chat.ts';
+
+export const inject = ['slots', 'connection', 'uiConversation'];
+export function apply(ctx) {
+  const e = React.createElement;
+  const { MicrophoneButtons, RecordingBar, SpeakButton, SettingsPanel } = createComponents(React);
+  const controllers = new Map();
+  const retiring = new Set();
+  let disposed = false;
+  const ownership = new VoiceOwnership();
+  const recognitionFor = (settings, meter) =>
+    settings.recognitionEngine === 'qwen-http'
+      ? new QwenHttpRecognitionEngine({
+          meter,
+          voiceDetectionPreset: settings.voiceDetectionPreset,
+        })
+      : settings.recognitionEngine === 'whisper-http'
+        ? new WhisperHttpRecognitionEngine({
+            meter,
+            voiceDetectionPreset: settings.voiceDetectionPreset,
+          })
+        : new BrowserRecognitionEngine({
+            processLocally: settings.recognitionProcessLocally,
+            autoInstallLocalPack: settings.recognitionAutoInstall,
+          });
+  const run = (controller, promise) =>
+    Promise.resolve(promise).catch((error) => {
+      if (!disposed && !controller.disposed)
+        controller.patch({ error: error?.message || String(error) });
+    });
+  function retire(entry) {
+    if (entry.closed) return;
+    entry.closed = true;
+    entry.request++;
+    entry.composers.clear();
+    entry.unsubscribe?.();
+    entry.unsubscribe = null;
+    entry.chatListeners.clear();
+    if (controllers.get(entry.key) === entry) controllers.delete(entry.key);
+    // Keep teardown in the hardware handoff barrier, not in the session registry.
+    const done = run(entry.controller, entry.controller.dispose());
+    const barrier = { endConversation: () => done };
+    retiring.add(barrier);
+    void done.finally(() => retiring.delete(barrier));
+  }
+  function get(sessionId) {
+    const key = String(sessionId);
+    if (controllers.has(key)) return controllers.get(key);
+    const entry = {
+      key,
+      draft: '',
+      pendingDraft: undefined,
+      composers: new Map(),
+      refs: 0,
+      buttons: 0,
+      request: 0,
+      closed: false,
+    };
+    let settings = {};
+    try {
+      settings = normalizeSettings(
+        JSON.parse(localStorage.getItem('dsh-live-voice.settings') || '{}'),
+      );
+    } catch {
+      settings = normalizeSettings(null);
+    }
+    const engineBrowser = new BrowserSpeakingEngine({ lang: settings.lang || 'pt-BR' });
+    const engineSay = new SayClientEngine({ rpc: ctx.connection.rpc });
+    const engineQwen = new QwenHttpSpeakingEngine({ lang: settings.lang || 'pt-BR' });
+    const meter = new MicrophoneMeter();
+    const recognition = recognitionFor(settings, meter);
+    entry.controller = new VoiceCoordinator({
+      recognition,
+      engines: { browser: engineBrowser, say: engineSay, 'qwen-http': engineQwen },
+      meter,
+      composer: {
+        getDraft: () => entry.draft,
+        submit: () => {
+          const owner = [...entry.composers.values()].at(-1);
+          owner?.actions.submit?.();
+        },
+        setDraft: (text) => {
+          if (disposed || entry.closed) return;
+          const owner = [...entry.composers.values()].at(-1);
+          if (!owner) return;
+          // `setDraft()` updates Lexical synchronously but the subscribed InputState
+          // can publish on a subsequent React commit. Preserve the optimistic value
+          // until that exact publication arrives; otherwise another slot render can
+          // make a later recognition result start from stale text.
+          entry.draft = text;
+          entry.pendingDraft = text;
+          owner.actions.setDraft(text);
+        },
+      },
+      settings,
+    });
+    const controller = entry.controller;
+    entry.chat = ctx.uiConversation.binding(sessionId).target('chat');
+    entry.chatListeners = new Set();
+    entry.subscribeChat = (listener) => {
+      if (entry.closed) return () => {};
+      entry.chatListeners.add(listener);
+      return () => entry.chatListeners.delete(listener);
+    };
+    entry.readChat = entry.chat.getSnapshot.bind(entry.chat);
+    const refresh = (baseline = false) => {
+      if (disposed || entry.closed) return;
+      const snapshot = entry.readChat();
+      const userSeq = latestUserSequence(snapshot);
+      if (
+        !baseline &&
+        userSeq > entry.userSeq &&
+        controller.getSnapshot().settings.interruptSpeechOnUserMessage &&
+        (controller.getSnapshot().speaking || controller.getSnapshot().paused)
+      )
+        run(controller, controller.stopSpeech());
+      entry.userSeq = Math.max(entry.userSeq ?? -1, userSeq);
+      for (const message of assistantMessages(snapshot))
+        controller.observeMessage(message.id, message.text, {
+          complete: message.complete,
+          baseline: baseline || message.interrupted,
+        });
+    };
+    refresh(true);
+    entry.unsubscribe = entry.chat.subscribe(() => {
+      refresh();
+      for (const listener of entry.chatListeners) listener();
+    });
+    const update = controller.updateSettings.bind(controller);
+    controller.updateSettings = (next) => {
+      if (disposed || entry.closed) return;
+      update(next);
+      engineBrowser.lang = controller.getSnapshot().settings.lang;
+      engineQwen.lang = controller.getSnapshot().settings.lang;
+      try {
+        localStorage.setItem(
+          'dsh-live-voice.settings',
+          JSON.stringify(controller.getSnapshot().settings),
+        );
+      } catch {}
+      run(controller, controller.refreshCapabilities());
+    };
+    // Cancel only this entry's queued acquisition. Global cancellation here would
+    // invalidate a newer session while its predecessor is being unmounted.
+    for (const method of ['stopListening', 'cancelDictation', 'endConversation', 'stopSpeech']) {
+      const original = controller[method].bind(controller);
+      controller[method] = (...args) => {
+        entry.request++;
+        return original(...args);
+      };
+    }
+    for (const method of ['startDictation', 'startConversation', 'speak']) {
+      const original = controller[method].bind(controller);
+      controller[method] = (...args) => {
+        if (disposed || entry.closed || !entry.refs) return Promise.resolve();
+        if (method !== 'speak' && !entry.composers.size) return Promise.resolve();
+        const request = ++entry.request;
+        return ownership.run(
+          controller,
+          [...controllers.values()].map((other) => other.controller).concat([...retiring]),
+          () => {
+            if (disposed || entry.closed || !entry.refs || request !== entry.request) return;
+            if (method !== 'speak' && !entry.composers.size) return;
+            return original(...args);
+          },
+        );
+      };
+    }
+    controllers.set(key, entry);
+    run(controller, controller.refreshCapabilities());
+    return entry;
+  }
+  function useEntry(sessionId, kind) {
+    const [entry, setEntry] = React.useState(null);
+    React.useLayoutEffect(() => {
+      if (disposed) return;
+      // Allocation and subscriptions happen only for committed mounts. Suspended
+      // or abandoned renders never acquire a session, probe engines, or retain it.
+      const current = get(sessionId);
+      current.refs++;
+      if (kind === 'buttons') current.buttons++;
+      setEntry(current);
+      return () => {
+        current.refs--;
+        if (kind === 'buttons') current.buttons--;
+        if (!current.refs) current.request++;
+        // StrictMode replay reacquires the same entry before this microtask.
+        queueMicrotask(() => {
+          if (!current.refs) retire(current);
+        });
+      };
+    }, [sessionId, kind]);
+    return entry?.key === String(sessionId) && !entry.closed ? entry : null;
+  }
+  function useComposer(entry, props) {
+    // DSH publishes shell.state as useInput and shell.actions as inputActions.
+    // Subscribe even when an embedding also supplies an input snapshot: that
+    // snapshot is not the reactive owner of the shell-owned editor.
+    const subscribedInput = props.useInput?.((value) => value);
+    const input = subscribedInput ?? props.input;
+    const token = React.useRef({});
+    React.useLayoutEffect(() => {
+      if (!entry || entry.closed || disposed) return;
+      return () => {
+        entry.composers.delete(token.current);
+        // Message-action mounts may outlive the composer; never retain its actions.
+        if (!entry.composers.size) {
+          entry.request++;
+          queueMicrotask(() => {
+            if (!entry.closed && !entry.composers.size)
+              run(entry.controller, entry.controller.endConversation());
+          });
+        }
+      };
+    }, [entry]);
+    React.useLayoutEffect(() => {
+      if (!entry || entry.closed || disposed) return;
+      if (!input || typeof props.inputActions?.setDraft !== 'function') return;
+      entry.composers.set(token.current, { actions: props.inputActions });
+    }, [entry, input, props.inputActions]);
+    React.useLayoutEffect(() => {
+      if (!entry || entry.closed || disposed || !input) return;
+      const published = typeof input.draft === 'string' ? input.draft : '';
+      // A voice write is optimistic until React commits the editor publication.
+      // Unrelated slot renders must not restore the previous draft in between.
+      if (entry.pendingDraft === undefined) entry.draft = published;
+      else if (published === entry.pendingDraft) {
+        entry.draft = published;
+        entry.pendingDraft = undefined;
+      }
+      entry.controller.composerChanged(entry.draft);
+    });
+  }
+  function Buttons(props) {
+    const entry = useEntry(props.sessionId, 'buttons');
+    useComposer(entry, props);
+    return entry ? e(MicrophoneButtons, { controller: entry.controller }) : null;
+  }
+  function Settings() {
+    const [controller, setController] = React.useState(null);
+    React.useEffect(() => {
+      let settings;
+      try {
+        settings = normalizeSettings(
+          JSON.parse(localStorage.getItem('dsh-live-voice.settings') || '{}'),
+        );
+      } catch {
+        settings = normalizeSettings(null);
+      }
+      const browser = new BrowserSpeakingEngine({ lang: settings.lang });
+      const qwen = new QwenHttpSpeakingEngine({ lang: settings.lang });
+      const meter = new MicrophoneMeter();
+      const recognition = recognitionFor(settings, meter);
+      const c = new VoiceCoordinator({
+        recognition,
+        engines: {
+          browser,
+          say: new SayClientEngine({ rpc: ctx.connection.rpc }),
+          'qwen-http': qwen,
+        },
+        meter,
+        composer: { getDraft: () => '', setDraft: () => {} },
+        settings,
+      });
+      const speak = c.speak.bind(c);
+      c.speak = (...args) =>
+        ownership.run(
+          c,
+          [...controllers.values()].map((entry) => entry.controller).concat([...retiring]),
+          () => speak(...args),
+        );
+      const update = c.updateSettings.bind(c);
+      let settingsRevision = 0;
+      c.updateSettings = async (next) => {
+        const revision = ++settingsRevision;
+        const previousEngine = c.getSnapshot().settings.recognitionEngine;
+        update(next);
+        browser.lang = c.getSnapshot().settings.lang;
+        qwen.lang = c.getSnapshot().settings.lang;
+        const settings = c.getSnapshot().settings;
+        if (previousEngine !== settings.recognitionEngine)
+          c.replaceRecognition(recognitionFor(settings, c.meter));
+        localStorage.setItem('dsh-live-voice.settings', JSON.stringify(settings));
+        run(c, c.refreshCapabilities());
+        const active = [...controllers.values()];
+        await Promise.allSettled([
+          c.endConversation(),
+          ...active.map((entry) => entry.controller.endConversation()),
+        ]);
+        if (revision !== settingsRevision || disposed || c.disposed) return;
+        for (const entry of controllers.values()) {
+          if (entry.closed) continue;
+          if (
+            entry.controller.getSnapshot().settings.recognitionEngine !== settings.recognitionEngine
+          )
+            entry.controller.replaceRecognition(recognitionFor(settings, entry.controller.meter));
+          entry.controller.updateSettings(settings);
+          run(entry.controller, entry.controller.refreshCapabilities());
+        }
+      };
+      const refresh = () => run(c, c.refreshCapabilities());
+      document.addEventListener('dsh-live-voice:capabilitieschanged', refresh);
+      setController(c);
+      refresh();
+      return () => {
+        document.removeEventListener('dsh-live-voice:capabilitieschanged', refresh);
+        void c.dispose();
+      };
+    }, []);
+    return controller ? e(SettingsPanel, { controller }) : null;
+  }
+  ctx.slots.inject('settings.section', () =>
+    ctx.slots.register(
+      { name: 'settings.section', id: 'dsh-live-voice', order: 65, label: 'Live Voice' },
+      Settings,
+    ),
+  );
+  function Dock(props) {
+    const entry = useEntry(props.sessionId, 'dock');
+    useComposer(entry, props);
+    return entry ? e(RecordingBar, { controller: entry.controller }) : null;
+  }
+  function ActionView({ entry, messageId }) {
+    const snapshot = React.useSyncExternalStore(
+      entry.controller.subscribe,
+      entry.controller.getSnapshot,
+    );
+    const chat = React.useSyncExternalStore(entry.subscribeChat, entry.readChat);
+    const message = addressedTurn(assistantMessages(chat), messageId);
+    const capability = snapshot.capabilities[snapshot.settings.engine];
+    const active = snapshot.speaking && message.id === snapshot.activeMessageId;
+    const unavailable = capability?.supported !== true;
+    return e(SpeakButton, {
+      active,
+      disabled: !message.text.trim() || (!active && unavailable),
+      label: unavailable ? capability?.reason || 'Checking speech output…' : undefined,
+      onClick: () =>
+        run(
+          entry.controller,
+          active ? entry.controller.stopSpeech() : entry.controller.speak(message.text, message.id),
+        ),
+    });
+  }
+  function Action(props) {
+    const entry = useEntry(props.sessionId, 'action');
+    return entry ? e(ActionView, { entry, messageId: props.messageId }) : null;
+  }
+  ctx.effect(() => {
+    const style = document.createElement('style');
+    style.dataset.plugin = 'dsh-live-voice';
+    style.textContent = styles;
+    document.head.appendChild(style);
+    return () => style.remove();
+  });
+  for (const [name, id, order, component] of [
+    ['conversation.input.right', 'live-voice-controls', 6, Buttons],
+    ['conversation.input.dock', 'live-voice-status', -100, Dock],
+    ['conversation.chat.assistant-actions', 'live-voice-speak', 5, Action],
+  ])
+    ctx.slots.inject(name, () =>
+      ctx.slots.register({ name, id, order, label: 'DSH Live Voice' }, component),
+    );
+  ctx.effect(() => {
+    const stop = () => {
+      ownership.cancel();
+      for (const entry of controllers.values())
+        run(entry.controller, entry.controller.endConversation());
+    };
+    const onKey = (event) => {
+      if (
+        disposed ||
+        event.defaultPrevented ||
+        !event.ctrlKey ||
+        !event.shiftKey ||
+        event.code !== 'Space' ||
+        event.repeat
+      )
+        return;
+      const candidates = [...controllers.values()].filter(
+        (entry) => entry.buttons > 0 && entry.composers.size > 0,
+      );
+      if (candidates.length !== 1) return;
+      event.preventDefault();
+      const c = candidates[0].controller;
+      run(
+        c,
+        c.getSnapshot().listening || c.getSnapshot().starting
+          ? c.stopListening()
+          : c.startDictation(),
+      );
+    };
+    const refreshCapabilities = () => {
+      for (const entry of controllers.values())
+        run(entry.controller, entry.controller.refreshCapabilities());
+      document.dispatchEvent(new Event('dsh-live-voice:capabilitieschanged'));
+    };
+    const visibilityChanged = () => {
+      if (document.visibilityState === 'visible') refreshCapabilities();
+    };
+    window.speechSynthesis?.addEventListener?.('voiceschanged', refreshCapabilities);
+    navigator.mediaDevices?.addEventListener?.('devicechange', refreshCapabilities);
+    document.addEventListener('visibilitychange', visibilityChanged);
+    document.addEventListener('keydown', onKey);
+    window.addEventListener('pagehide', stop);
+    return () => {
+      disposed = true;
+      ownership.close();
+      window.speechSynthesis?.removeEventListener?.('voiceschanged', refreshCapabilities);
+      navigator.mediaDevices?.removeEventListener?.('devicechange', refreshCapabilities);
+      document.removeEventListener('visibilitychange', visibilityChanged);
+      document.removeEventListener('keydown', onKey);
+      window.removeEventListener('pagehide', stop);
+      for (const entry of controllers.values()) retire(entry);
+    };
+  });
+}

package/src/client/qwen-settings.ts

@@ -0,0 +1,144 @@
+// @ts-nocheck
+const BASE = '/api/dsh-live-voice/qwen';
+const UNLOADED =
+  'Qwen settings routes are not loaded. A normal DSH server restart is required to load updated plugin routes; refreshing this page alone is not enough.';
+export async function qwenSettingsRequest(
+  path,
+  { method = 'GET', config, signal } = {},
+  fetchImpl = globalThis.fetch,
+) {
+  const response = await fetchImpl(BASE + path, {
+    method,
+    credentials: 'same-origin',
+    signal,
+    headers: config ? { 'content-type': 'application/json' } : undefined,
+    body: config ? JSON.stringify(config) : undefined,
+  });
+  if (response.status === 401 || response.status === 403)
+    throw new Error('Sign in to DSH to manage Qwen settings.');
+  if (response.status === 404 || response.status === 405) throw new Error(UNLOADED);
+  let body;
+  try {
+    body = await response.json();
+  } catch {
+    throw new Error(UNLOADED);
+  }
+  if (typeof body?.ok !== 'boolean') throw new Error(UNLOADED);
+  if (!response.ok || !body.ok)
+    throw new Error(body.error?.message || 'Qwen settings request failed.');
+  return body.value;
+}
+export function createQwenSettings(React) {
+  const h = React.createElement;
+  return function QwenSettings({ controller }) {
+    const [draft, setDraft] = React.useState({
+      baseUrl: 'http://127.0.0.1:8080/',
+      timeoutMs: 300000,
+    });
+    const [busy, setBusy] = React.useState(true),
+      [loaded, setLoaded] = React.useState(false),
+      [error, setError] = React.useState(''),
+      [message, setMessage] = React.useState('');
+    const active = React.useRef(null);
+    async function run(action) {
+      active.current?.abort();
+      const abort = new AbortController();
+      active.current = abort;
+      setBusy(true);
+      setError('');
+      setMessage('');
+      try {
+        if (action === 'load') {
+          const value = await qwenSettingsRequest('/config', { signal: abort.signal });
+          if (!abort.signal.aborted) {
+            setDraft(value);
+            setLoaded(true);
+          }
+        } else if (action === 'save') {
+          await controller.endConversation?.();
+          const value = await qwenSettingsRequest('/config', {
+            method: 'PUT',
+            config: { ...draft, timeoutMs: Number(draft.timeoutMs) },
+            signal: abort.signal,
+          });
+          if (!abort.signal.aborted) {
+            setDraft(value);
+            setMessage('Saved on the DSH host. Active Qwen requests were cancelled.');
+            await controller.refreshCapabilities?.();
+          }
+        } else {
+          const value = await qwenSettingsRequest('/test', {
+            method: 'POST',
+            config: { ...draft, timeoutMs: Number(draft.timeoutMs) },
+            signal: abort.signal,
+          });
+          if (!abort.signal.aborted) {
+            if (!value.supported) throw new Error(value.reason || 'Qwen health check failed.');
+            setMessage(
+              'Connection successful. Both Qwen ASR and TTS are loaded. Unsaved edits have not been applied.',
+            );
+          }
+        }
+      } catch (reason) {
+        if (!abort.signal.aborted) setError(reason.message || String(reason));
+      } finally {
+        if (!abort.signal.aborted) setBusy(false);
+      }
+    }
+    React.useEffect(() => {
+      void run('load');
+      return () => active.current?.abort();
+    }, []);
+    const field = (label, key, type = 'text') =>
+      h(
+        'label',
+        null,
+        label,
+        h('input', {
+          type,
+          value: draft[key],
+          disabled: busy || !loaded,
+          autoComplete: 'off',
+          ...(type === 'number' ? { min: 1000, max: 600000, step: 1 } : {}),
+          onChange: (event) => {
+            setDraft({ ...draft, [key]: event.target.value });
+            setMessage('Unsaved changes');
+            setError('');
+          },
+        }),
+      );
+    return h(
+      React.Fragment,
+      null,
+      h(
+        'p',
+        null,
+        'Host-wide settings for the Qwen3 ASR + TTS server. Enter any HTTP or HTTPS base URL reachable from the DSH host. The browser accesses it through authenticated DSH routes.',
+      ),
+      field('Qwen API base URL', 'baseUrl'),
+      field('Request timeout (ms)', 'timeoutMs', 'number'),
+      h(
+        'div',
+        { className: 'dlv-settings-actions' },
+        h(
+          'button',
+          { type: 'button', disabled: busy || !loaded, onClick: () => run('save') },
+          'Save Qwen settings',
+        ),
+        h(
+          'button',
+          { type: 'button', disabled: busy || !loaded, onClick: () => run('test') },
+          'Test Qwen server',
+        ),
+        h(
+          'button',
+          { type: 'button', disabled: busy, onClick: () => run('load') },
+          'Reload saved settings',
+        ),
+      ),
+      busy ? h('p', { role: 'status' }, 'Contacting DSH host…') : null,
+      message ? h('p', { role: 'status' }, message) : null,
+      error ? h('p', { role: 'alert' }, error) : null,
+    );
+  };
+}

package/src/client/styles.ts

@@ -0,0 +1,36 @@
+// @ts-nocheck
+// Independent presentation for the DSH Live Voice controls.
+export const styles = `
+.dlv-icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex-shrink:0;cursor:pointer;background:transparent;color:var(--dsw-alias-label-secondary);padding:0;font:inherit}
+.dlv-icon-button svg{display:block;width:20px;height:20px}
+.dlv-mic{width:30px;height:30px;border:1px solid var(--dsw-alias-border-l1);border-radius:50%}
+.dlv-mic:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l2)}
+.dlv-speaker{width:28px;height:28px;border:0;border-radius:28px;padding:5px;color:var(--dsw-alias-label-tertiary)}
+.dlv-speaker:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}
+.dlv-speaker[aria-pressed=true]{color:var(--dsw-alias-label-primary)}
+.dlv-icon-button:disabled{opacity:.4;cursor:default}
+.dlv-icon-button:focus-visible,.dlv-settings :is(input,select):focus-visible{outline:2px solid var(--dsw-alias-label-primary);outline-offset:3px}
+.dlv-bar-wrap{width:100%;min-width:0}
+.dlv-pill{display:flex;align-items:center;box-sizing:border-box;gap:10px;min-height:52px;border-radius:26px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);padding:0 14px;width:100%;max-width:720px;margin:0 auto;box-shadow:0 8px 24px rgba(0,0,0,.18)}
+.dlv-pill-button{width:34px;height:34px;border-radius:50%;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary)}
+.dlv-pill-button:hover{background:var(--dsw-alias-bg-layer-2)}
+.dlv-live-toggle{width:auto;min-width:58px;height:34px;padding:0 9px;gap:5px;border:1px solid var(--dsw-alias-border-l2);border-radius:17px;color:var(--dsw-alias-label-primary)}
+.dlv-live-toggle svg{width:18px;height:18px}
+.dlv-toggle-state{min-width:22px;font-size:10px;font-weight:700;line-height:1;letter-spacing:.04em;text-align:left}
+.dlv-live-toggle:hover{background:var(--dsw-alias-bg-layer-2)}
+.dlv-live-toggle[aria-checked=false]{color:var(--dsw-alias-label-tertiary);border-color:var(--dsw-alias-border-l1);opacity:.72}
+.dlv-live-toggle[aria-checked=true]{background:var(--dsw-alias-bg-layer-2)}
+.dlv-wave{display:block;flex:1 1 180px;min-width:30px;width:100%;height:40px;color:var(--dsw-alias-label-primary)}
+.dlv-status{flex:1 1 120px;min-width:0;font-size:13px;line-height:1.4;color:var(--dsw-alias-label-secondary)}
+.dlv-error{color:var(--dsw-alias-state-error-primary);overflow-wrap:anywhere;font-size:13px;max-width:720px;margin:8px auto}
+.dlv-settings{box-sizing:border-box;padding:18px;width:100%;display:grid;gap:16px;max-width:640px;color:var(--dsw-alias-label-primary)}
+.dlv-settings h3,.dlv-settings p{margin:0}
+.dlv-settings-group,.dlv-settings-card{margin:0;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;min-width:0}.dlv-settings-group{display:grid;gap:14px;padding:16px}.dlv-settings-group legend{padding:0 6px;font-weight:600;color:var(--dsw-alias-label-primary)}.dlv-settings-card>summary,.dlv-settings-subcard>summary{cursor:pointer;font-weight:650;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px}.dlv-settings-card>summary::-webkit-details-marker,.dlv-settings-subcard>summary::-webkit-details-marker{display:none}.dlv-settings-card>summary:after,.dlv-settings-subcard>summary:after{content:"›";transform:rotate(90deg);transition:transform .15s}.dlv-settings-card:not([open])>summary:after,.dlv-settings-subcard:not([open])>summary:after{transform:rotate(0)}.dlv-settings-card-body{display:grid;gap:12px;padding:0 12px 12px}.dlv-settings-subcard{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;min-width:0}.dlv-settings-subcard>summary{padding:10px}.dlv-settings-subcard-body{display:grid;gap:10px;padding:0 10px 10px}
+.dlv-settings label{display:grid;gap:6px;font-size:14px}.dlv-settings label.dlv-check{display:flex;align-items:center;gap:8px}.dlv-settings label.dlv-check input{width:auto}
+.dlv-settings :is(input,select){box-sizing:border-box;width:100%;padding:8px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-1);color:inherit;font:inherit}
+.dlv-settings small,.dlv-settings p{font-size:13px;color:var(--dsw-alias-label-secondary);line-height:1.5}
+.dlv-preset-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.dlv-settings label.dlv-preset{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid var(--dsw-alias-border-l1);border-radius:8px;cursor:pointer}.dlv-settings label.dlv-preset:has(input:checked){border-color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-1)}.dlv-settings label.dlv-preset input{width:auto;margin-top:3px}.dlv-preset span{display:grid;gap:3px}.dlv-vad-summary{font-weight:500}
+.dlv-settings-actions{display:flex;flex-wrap:wrap;gap:8px}.dlv-settings-actions button{padding:8px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-1);color:inherit;cursor:pointer}.dlv-settings-actions button:disabled{opacity:.45;cursor:default}
+@media(max-width:480px){.dlv-preset-group{grid-template-columns:1fr}.dlv-pill{flex-wrap:wrap}.dlv-wave{flex-basis:90px}.dlv-status{flex-basis:100px}}
+`;
+export default styles;