@speechos/client 0.2.9 → 0.2.11

package/dist/index.cjs

@@ -15,6 +15,7 @@ const defaultClientConfig = {
     commands: [],
     zIndex: 999999,
     alwaysVisible: false,
+    useExternalSettings: false,
 };
 /**
  * Current client configuration singleton
@@ -30,6 +31,7 @@ function validateClientConfig(config) {
         commands: config.commands ?? defaultClientConfig.commands,
         zIndex: config.zIndex ?? defaultClientConfig.zIndex,
         alwaysVisible: config.alwaysVisible ?? defaultClientConfig.alwaysVisible,
+        useExternalSettings: config.useExternalSettings ?? defaultClientConfig.useExternalSettings,
     };
     // Validate zIndex
     if (typeof resolved.zIndex !== "number" || resolved.zIndex < 0) {
@@ -81,6 +83,12 @@ function getZIndex() {
 function isAlwaysVisible() {
     return currentClientConfig.alwaysVisible;
 }
+/**
+ * Check if external settings page should be used
+ */
+function useExternalSettings() {
+    return currentClientConfig.useExternalSettings;
+}
 
 /**
  * Form field focus detection for SpeechOS Client SDK
@@ -251,6 +259,17 @@ class FormDetector {
         document.addEventListener("touchstart", this.touchHandler, true);
         document.addEventListener("mousedown", this.mouseDownHandler, true);
         this.isActive = true;
+        // Check for already-focused form field (e.g., page loaded with autofocus)
+        const activeElement = document.activeElement;
+        if (isFormField(activeElement)) {
+            console.log("[SpeechOS] FormDetector: found initially focused form field", {
+                element: activeElement,
+                tagName: activeElement?.tagName,
+            });
+            core.state.setFocusedElement(activeElement);
+            core.state.show();
+            core.events.emit("form:focus", { element: activeElement });
+        }
     }
     /**
      * Stop detecting form field focus events
@@ -495,9 +514,12 @@ let memoryCache$3 = null;
  * Sorted alphabetically by name for dropdown display
  */
 const SUPPORTED_LANGUAGES = [
+    { name: "Belarusian", code: "be", variants: ["be"] },
+    { name: "Bengali", code: "bn", variants: ["bn"] },
+    { name: "Bosnian", code: "bs", variants: ["bs"] },
     { name: "Bulgarian", code: "bg", variants: ["bg"] },
     { name: "Catalan", code: "ca", variants: ["ca"] },
-    { name: "Chinese", code: "zh", variants: ["zh"] },
+    { name: "Croatian", code: "hr", variants: ["hr"] },
     { name: "Czech", code: "cs", variants: ["cs"] },
     { name: "Danish", code: "da", variants: ["da", "da-DK"] },
     { name: "Dutch", code: "nl", variants: ["nl"] },
@@ -518,18 +540,26 @@ const SUPPORTED_LANGUAGES = [
     { name: "Indonesian", code: "id", variants: ["id"] },
     { name: "Italian", code: "it", variants: ["it"] },
     { name: "Japanese", code: "ja", variants: ["ja"] },
+    { name: "Kannada", code: "kn", variants: ["kn"] },
     { name: "Korean", code: "ko", variants: ["ko", "ko-KR"] },
     { name: "Latvian", code: "lv", variants: ["lv"] },
     { name: "Lithuanian", code: "lt", variants: ["lt"] },
+    { name: "Macedonian", code: "mk", variants: ["mk"] },
     { name: "Malay", code: "ms", variants: ["ms"] },
+    { name: "Marathi", code: "mr", variants: ["mr"] },
     { name: "Norwegian", code: "no", variants: ["no"] },
     { name: "Polish", code: "pl", variants: ["pl"] },
     { name: "Portuguese", code: "pt", variants: ["pt", "pt-BR", "pt-PT"] },
     { name: "Romanian", code: "ro", variants: ["ro"] },
     { name: "Russian", code: "ru", variants: ["ru"] },
+    { name: "Serbian", code: "sr", variants: ["sr"] },
     { name: "Slovak", code: "sk", variants: ["sk"] },
+    { name: "Slovenian", code: "sl", variants: ["sl"] },
     { name: "Spanish", code: "es", variants: ["es", "es-419"] },
     { name: "Swedish", code: "sv", variants: ["sv", "sv-SE"] },
+    { name: "Tagalog", code: "tl", variants: ["tl"] },
+    { name: "Tamil", code: "ta", variants: ["ta"] },
+    { name: "Telugu", code: "te", variants: ["te"] },
     { name: "Turkish", code: "tr", variants: ["tr"] },
     { name: "Ukrainian", code: "uk", variants: ["uk"] },
     { name: "Vietnamese", code: "vi", variants: ["vi"] },
@@ -1322,25 +1352,14 @@ class SettingsSync {
         this.syncDisabled = false;
     }
     /**
-     * Make a fetch request using custom fetchHandler if configured, otherwise native fetch.
-     * This allows the Chrome extension to route fetch traffic through the service worker
-     * to bypass page CSP restrictions.
+     * Make a fetch request using native fetch.
      */
     async doFetch(url, options) {
         const config = core.getConfig();
-        const customHandler = core.getFetchHandler();
-        if (customHandler) {
-            if (config.debug) {
-                console.log("[SpeechOS] Using custom fetch handler (extension proxy)", options.method, url);
-            }
-            return customHandler(url, options);
-        }
         if (config.debug) {
             console.log("[SpeechOS] Using native fetch", options.method, url);
         }
-        // Use native fetch and wrap response to match FetchResponse interface
-        const response = await fetch(url, options);
-        return response;
+        return fetch(url, options);
     }
     /**
      * Initialize the settings sync manager
@@ -1720,9 +1739,9 @@ const themeStyles = i$4 `
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 
     /* Color tokens */
-    --speechos-primary: #10B981;
-    --speechos-primary-hover: #059669;
-    --speechos-primary-active: #047857;
+    --speechos-primary: #0d9488;
+    --speechos-primary-hover: #0f766e;
+    --speechos-primary-active: #115e59;
 
     --speechos-bg: #ffffff;
     --speechos-bg-hover: #f9fafb;
@@ -2287,45 +2306,51 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         width: 56px;
         height: 56px;
         border-radius: var(--speechos-radius-full);
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        background: #10b981;
         border: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
       }
 
       .mic-button:hover {
+        background: #059669;
         transform: scale(1.05);
-        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
+        box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45);
       }
 
       .mic-button:active {
         transform: scale(0.98);
       }
 
+      .mic-button:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4), 0 4px 16px rgba(16, 185, 129, 0.35);
+      }
+
       /* Expanded state - bubbles visible */
       .mic-button.expanded {
-        background: linear-gradient(135deg, #059669 0%, #047857 100%);
+        background: #059669;
       }
 
       /* Connecting state - Siri-style metallic spinner */
       .mic-button.connecting {
         background: radial-gradient(
           circle at 30% 30%,
-          #34d399 0%,
-          #10b981 40%,
-          #059669 70%,
-          #047857 100%
+          #2dd4bf 0%,
+          #14b8a6 40%,
+          #0d9488 70%,
+          #0f766e 100%
         );
         cursor: wait;
-        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4),
-          0 0 40px rgba(16, 185, 129, 0.2),
+        box-shadow: 0 0 20px rgba(13, 148, 136, 0.4),
+          0 0 40px rgba(13, 148, 136, 0.2),
           inset 0 0 20px rgba(255, 255, 255, 0.1);
       }
 
@@ -2368,15 +2393,15 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         background: conic-gradient(
           from 0deg,
           transparent 0deg,
-          rgba(52, 211, 153, 0.1) 30deg,
-          rgba(16, 185, 129, 0.8) 90deg,
+          rgba(45, 212, 191, 0.1) 30deg,
+          rgba(13, 148, 136, 0.8) 90deg,
           rgba(255, 255, 255, 0.95) 120deg,
-          rgba(52, 211, 153, 0.9) 150deg,
-          rgba(16, 185, 129, 0.6) 180deg,
-          rgba(5, 150, 105, 0.3) 210deg,
+          rgba(45, 212, 191, 0.9) 150deg,
+          rgba(13, 148, 136, 0.6) 180deg,
+          rgba(15, 118, 110, 0.3) 210deg,
           transparent 270deg,
-          rgba(110, 231, 183, 0.2) 300deg,
-          rgba(16, 185, 129, 0.5) 330deg,
+          rgba(94, 234, 212, 0.2) 300deg,
+          rgba(13, 148, 136, 0.5) 330deg,
           transparent 360deg
         );
         -webkit-mask: linear-gradient(#fff 0 0) content-box,
@@ -2397,13 +2422,13 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         background: conic-gradient(
           from 180deg,
           transparent 0deg,
-          rgba(167, 243, 208, 0.3) 60deg,
+          rgba(153, 246, 228, 0.3) 60deg,
           rgba(255, 255, 255, 0.7) 90deg,
-          rgba(110, 231, 183, 0.5) 120deg,
+          rgba(94, 234, 212, 0.5) 120deg,
           transparent 180deg,
-          rgba(52, 211, 153, 0.2) 240deg,
+          rgba(45, 212, 191, 0.2) 240deg,
           rgba(255, 255, 255, 0.5) 270deg,
-          rgba(16, 185, 129, 0.4) 300deg,
+          rgba(13, 148, 136, 0.4) 300deg,
           transparent 360deg
         );
         -webkit-mask: linear-gradient(#fff 0 0) content-box,
@@ -2444,8 +2469,8 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         border-radius: 50%;
         background: radial-gradient(
           circle,
-          rgba(16, 185, 129, 0.4) 0%,
-          rgba(16, 185, 129, 0.15) 40%,
+          rgba(13, 148, 136, 0.4) 0%,
+          rgba(13, 148, 136, 0.15) 40%,
           transparent 70%
         );
         animation: siri-glow-pulse 2s ease-in-out infinite;
@@ -3865,15 +3890,15 @@ const modalLayoutStyles = i$4 `
   }
 
   .modal {
-    background: #1a1d24;
+    background: #f5f5f4;
     border-radius: 16px;
     width: 90%;
     max-width: 580px;
     height: min(560px, 85vh);
     display: flex;
     flex-direction: column;
-    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
     transform: scale(0.95) translateY(10px);
     transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     pointer-events: auto;
@@ -3898,16 +3923,16 @@ const modalLayoutStyles = i$4 `
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid #e5e5e5;
+    background: #ffffff;
   }
 
   .modal-title {
     font-size: 17px;
     font-weight: 600;
-    color: white;
+    color: #171717;
     margin: 0;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.02em;
   }
 
   .modal-logo {
@@ -3920,7 +3945,7 @@ const modalLayoutStyles = i$4 `
     width: 28px;
     height: 28px;
     border-radius: 8px;
-    background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
+    background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -3935,13 +3960,13 @@ const modalLayoutStyles = i$4 `
   .logo-text {
     font-size: 17px;
     font-weight: 500;
-    color: white;
+    color: #171717;
     letter-spacing: -0.02em;
   }
 
   .logo-os {
     font-weight: 700;
-    background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+    background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -3957,13 +3982,22 @@ const modalLayoutStyles = i$4 `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
   .close-button:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: white;
+    background: #f5f5f4;
+    color: #171717;
+  }
+
+  .close-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #0d9488, 0 0 0 4px rgba(13, 148, 136, 0.2);
+  }
+
+  .close-button:active {
+    transform: scale(0.95);
   }
 
   .modal-body {
@@ -3975,8 +4009,8 @@ const modalLayoutStyles = i$4 `
   .sidebar {
     width: 110px;
     flex-shrink: 0;
-    background: rgba(0, 0, 0, 0.25);
-    border-right: 1px solid rgba(255, 255, 255, 0.06);
+    background: #fafaf9;
+    border-right: 1px solid #e5e5e5;
     padding: 12px 8px;
     display: flex;
     flex-direction: column;
@@ -4005,19 +4039,25 @@ const modalLayoutStyles = i$4 `
     border-radius: 10px;
     background: transparent;
     cursor: pointer;
-    color: rgba(255, 255, 255, 0.5);
+    color: #525252;
     transition: all 0.15s ease;
     position: relative;
   }
 
   .sidebar-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.8);
+    background: #ffffff;
+    color: #171717;
+  }
+
+  .sidebar-item:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px rgba(13, 148, 136, 0.4);
   }
 
   .sidebar-item.active {
-    background: rgba(16, 185, 129, 0.12);
-    color: #34d399;
+    background: rgba(15, 118, 110, 0.12);
+    color: #0f766e;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   }
 
   .sidebar-item.active::before {
@@ -4028,7 +4068,7 @@ const modalLayoutStyles = i$4 `
     transform: translateY(-50%);
     width: 3px;
     height: 24px;
-    background: #34d399;
+    background: #0f766e;
     border-radius: 0 3px 3px 0;
   }
 
@@ -4071,14 +4111,14 @@ const tabContentStyles = i$4 `
   .section-title {
     font-size: 15px;
     font-weight: 600;
-    color: white;
+    color: #171717;
     margin: 0 0 6px 0;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.02em;
   }
 
   .section-description {
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.5);
+    color: #525252;
     line-height: 1.5;
     margin: 0;
   }
@@ -4086,7 +4126,7 @@ const tabContentStyles = i$4 `
   .empty-state {
     text-align: center;
     padding: 40px 20px;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
   }
 
   .empty-state-icon {
@@ -4098,7 +4138,7 @@ const tabContentStyles = i$4 `
     font-size: 15px;
     font-weight: 500;
     margin-bottom: 8px;
-    color: rgba(255, 255, 255, 0.7);
+    color: #525252;
   }
 
   .empty-state-text {
@@ -4116,7 +4156,7 @@ const tabContentStyles = i$4 `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.35);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
@@ -4154,20 +4194,30 @@ const formStyles = i$4 `
     align-items: center;
     gap: 6px;
     padding: 10px 16px;
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     border: none;
     border-radius: 8px;
     color: white;
     font-size: 13px;
     font-weight: 600;
+    letter-spacing: 0.01em;
     cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
+    transition: all 0.15s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
   .add-button:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    background: #0f766e;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+  }
+
+  .add-button:focus:not(:disabled) {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
+  }
+
+  .add-button:active:not(:disabled) {
+    transform: scale(0.98);
   }
 
   .add-button:disabled {
@@ -4178,7 +4228,7 @@ const formStyles = i$4 `
 
   .count-badge {
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.45);
+    color: #737373;
     font-weight: 500;
   }
 
@@ -4190,11 +4240,12 @@ const formStyles = i$4 `
   }
 
   .add-form {
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
     border-radius: 12px;
     padding: 16px;
     margin-bottom: 16px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   }
 
   .form-group {
@@ -4209,7 +4260,7 @@ const formStyles = i$4 `
     display: block;
     font-size: 12px;
     font-weight: 600;
-    color: rgba(255, 255, 255, 0.7);
+    color: #525252;
     margin-bottom: 8px;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -4218,10 +4269,10 @@ const formStyles = i$4 `
   .form-input {
     width: 100%;
     padding: 12px 14px;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #ffffff;
+    border: 1px solid #d4d4d4;
     border-radius: 8px;
-    color: white;
+    color: #171717;
     font-size: 14px;
     font-family: inherit;
     transition: all 0.15s ease;
@@ -4230,12 +4281,12 @@ const formStyles = i$4 `
 
   .form-input:focus {
     outline: none;
-    border-color: #34d399;
-    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+    border-color: #0d9488;
+    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
   }
 
   .form-input::placeholder {
-    color: rgba(255, 255, 255, 0.3);
+    color: #a3a3a3;
   }
 
   .form-input.error {
@@ -4259,7 +4310,7 @@ const formStyles = i$4 `
 
   .char-count {
     font-size: 11px;
-    color: rgba(255, 255, 255, 0.4);
+    color: #737373;
     font-variant-numeric: tabular-nums;
   }
 
@@ -4293,26 +4344,35 @@ const formStyles = i$4 `
   }
 
   .form-btn.cancel {
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    color: rgba(255, 255, 255, 0.7);
+    background: #ffffff;
+    border: 1px solid #d4d4d4;
+    color: #525252;
   }
 
   .form-btn.cancel:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.25);
+    background: #fafaf9;
+    border-color: #a3a3a3;
   }
 
   .form-btn.save {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     border: none;
     color: white;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
   .form-btn.save:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    background: #0f766e;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+  }
+
+  .form-btn.save:focus:not(:disabled) {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
+  }
+
+  .form-btn.save:active:not(:disabled) {
+    transform: scale(0.98);
   }
 
   .form-btn.save:disabled {
@@ -4346,16 +4406,17 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
       }
 
       .transcript-item {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 10px;
         padding: 12px 14px;
         transition: all 0.15s ease;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       }
 
       .transcript-item:hover {
-        background: rgba(255, 255, 255, 0.06);
-        border-color: rgba(255, 255, 255, 0.1);
+        border-color: #d4d4d4;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       }
 
       .transcript-header {
@@ -4378,28 +4439,28 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
       }
 
       .transcript-badge.dictate {
-        background: rgba(16, 185, 129, 0.15);
-        color: #34d399;
+        background: rgba(13, 148, 136, 0.18);
+        color: #0f766e;
       }
 
       .transcript-badge.edit {
-        background: rgba(139, 92, 246, 0.15);
-        color: #a78bfa;
+        background: rgba(139, 92, 246, 0.18);
+        color: #7c3aed;
       }
 
       .transcript-badge.command {
-        background: rgba(245, 158, 11, 0.15);
-        color: #fbbf24;
+        background: rgba(245, 158, 11, 0.18);
+        color: #b45309;
       }
 
       .transcript-time {
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.35);
+        color: #737373;
       }
 
       .transcript-text {
         font-size: 14px;
-        color: rgba(255, 255, 255, 0.85);
+        color: #171717;
         line-height: 1.5;
         word-break: break-word;
         display: -webkit-box;
@@ -4414,7 +4475,7 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
         gap: 8px;
         margin-top: 10px;
         padding-top: 10px;
-        border-top: 1px solid rgba(255, 255, 255, 0.06);
+        border-top: 1px solid #e5e5e5;
       }
 
       .transcript-action-btn {
@@ -4423,23 +4484,23 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
         gap: 6px;
         padding: 6px 10px;
         border-radius: 6px;
-        background: rgba(255, 255, 255, 0.06);
+        background: rgba(0, 0, 0, 0.08);
         border: none;
         cursor: pointer;
         font-size: 12px;
         font-weight: 500;
-        color: rgba(255, 255, 255, 0.6);
+        color: #404040;
         transition: all 0.15s ease;
       }
 
       .transcript-action-btn:hover {
-        background: rgba(255, 255, 255, 0.1);
-        color: rgba(255, 255, 255, 0.9);
+        background: rgba(0, 0, 0, 0.12);
+        color: #171717;
       }
 
       .transcript-action-btn.copied {
-        background: rgba(16, 185, 129, 0.2);
-        color: #34d399;
+        background: rgba(13, 148, 136, 0.2);
+        color: #0d9488;
       }
 
       .transcript-action-btn.delete:hover {
@@ -4453,9 +4514,9 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
         margin-top: 16px;
         padding: 10px;
         background: rgba(239, 68, 68, 0.1);
-        border: 1px solid rgba(239, 68, 68, 0.15);
+        border: 1px solid rgba(239, 68, 68, 0.2);
         border-radius: 8px;
-        color: #f87171;
+        color: #dc2626;
         font-size: 13px;
         font-weight: 500;
         cursor: pointer;
@@ -4464,18 +4525,18 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
 
       .clear-all-button:hover {
         background: rgba(239, 68, 68, 0.18);
-        border-color: rgba(239, 68, 68, 0.25);
+        border-color: rgba(239, 68, 68, 0.3);
       }
 
       .command-matched {
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.5);
+        color: #525252;
         margin-top: 6px;
       }
 
       .command-matched code {
         background: rgba(245, 158, 11, 0.15);
-        color: #fbbf24;
+        color: #d97706;
         padding: 2px 6px;
         border-radius: 4px;
         font-family: monospace;
@@ -4663,21 +4724,21 @@ let SpeechOSHelpTab = class SpeechOSHelpTab extends i$1 {
         gap: 8px;
         font-size: 15px;
         font-weight: 600;
-        color: white;
+        color: #171717;
         margin-bottom: 10px;
       }
 
       .help-title.dictate {
-        color: #34d399;
+        color: #0f766e;
       }
 
       .help-title.edit {
-        color: #a78bfa;
+        color: #7c3aed;
       }
 
       .help-text {
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.6);
+        color: #525252;
         line-height: 1.6;
         margin-bottom: 10px;
       }
@@ -4694,17 +4755,17 @@ let SpeechOSHelpTab = class SpeechOSHelpTab extends i$1 {
       }
 
       .help-example {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 6px;
         padding: 8px 12px;
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.5);
+        color: #525252;
         font-style: italic;
       }
 
       .help-title.languages {
-        background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+        background: linear-gradient(135deg, #0f766e 0%, #1d4ed8 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
@@ -4782,7 +4843,7 @@ let SpeechOSAboutTab = class SpeechOSAboutTab extends i$1 {
         width: 36px;
         height: 36px;
         border-radius: 10px;
-        background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -4797,13 +4858,13 @@ let SpeechOSAboutTab = class SpeechOSAboutTab extends i$1 {
       .about-logo-text {
         font-size: 22px;
         font-weight: 500;
-        color: white;
+        color: #171717;
         letter-spacing: -0.02em;
       }
 
       .logo-os {
         font-weight: 700;
-        background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
@@ -4811,7 +4872,7 @@ let SpeechOSAboutTab = class SpeechOSAboutTab extends i$1 {
 
       .about-description {
         font-size: 14px;
-        color: rgba(255, 255, 255, 0.65);
+        color: #525252;
         line-height: 1.7;
         margin-bottom: 24px;
       }
@@ -4829,19 +4890,29 @@ let SpeechOSAboutTab = class SpeechOSAboutTab extends i$1 {
         align-items: center;
         gap: 8px;
         padding: 12px 18px;
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        background: #0d9488;
         border-radius: 10px;
         color: white;
         font-size: 14px;
         font-weight: 600;
+        letter-spacing: 0.01em;
         text-decoration: none;
-        transition: all 0.2s ease;
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
+        transition: all 0.15s ease;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
       }
 
       .about-link:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
+        background: #0f766e;
+        box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+      }
+
+      .about-link:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
+      }
+
+      .about-link:active {
+        transform: scale(0.98);
       }
     `,
     ]; }
@@ -4921,20 +4992,21 @@ let SpeechOSAudioLevelMeter = class SpeechOSAudioLevelMeter extends i$1 {
         gap: 3px;
         height: 32px;
         padding: 8px 12px;
-        background: rgba(0, 0, 0, 0.2);
+        background: #ffffff;
+        border: 2px solid #e5e5e5;
         border-radius: 8px;
       }
 
       .meter-bar {
         width: 6px;
         min-height: 4px;
-        background: rgba(255, 255, 255, 0.2);
+        background: #d4d4d4;
         border-radius: 2px;
         transition: height 50ms ease-out, background 100ms ease;
       }
 
       .meter-bar.active {
-        background: var(--speechos-primary);
+        background: #10b981;
       }
 
       .meter-inactive {
@@ -4943,14 +5015,15 @@ let SpeechOSAudioLevelMeter = class SpeechOSAudioLevelMeter extends i$1 {
         justify-content: center;
         height: 32px;
         padding: 8px 12px;
-        background: rgba(0, 0, 0, 0.2);
+        background: #ffffff;
+        border: 2px solid #e5e5e5;
         border-radius: 8px;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
         font-size: 13px;
       }
 
       .meter-error {
-        color: #f87171;
+        color: #dc2626;
       }
     `,
     ]; }
@@ -5147,18 +5220,18 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
       }
 
       .settings-section-icon {
-        color: #34d399;
+        color: #0d9488;
       }
 
       .settings-section-title {
         font-size: 14px;
         font-weight: 600;
-        color: white;
+        color: #171717;
       }
 
       .settings-section-description {
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.45);
+        color: #525252;
         line-height: 1.5;
         margin-bottom: 14px;
       }
@@ -5187,10 +5260,10 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
       .settings-select {
         width: 100%;
         padding: 12px 40px 12px 14px;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: #ffffff;
+        border: 1px solid #d4d4d4;
         border-radius: 10px;
-        color: white;
+        color: #171717;
         font-size: 14px;
         font-family: inherit;
         cursor: pointer;
@@ -5200,34 +5273,44 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
       }
 
       .settings-select:hover {
-        border-color: rgba(255, 255, 255, 0.15);
-        background: rgba(0, 0, 0, 0.4);
+        border-color: #a3a3a3;
+        background: #ffffff;
       }
 
       .settings-select:focus {
         outline: none;
-        border-color: #34d399;
-        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+        border-color: #0d9488;
+        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
       }
 
       .settings-select option {
-        background: #1a1d24;
-        color: white;
+        background: #ffffff;
+        color: #171717;
         padding: 8px;
       }
 
+      .settings-select:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .settings-select:disabled:hover {
+        border-color: #d4d4d4;
+        background: #ffffff;
+      }
+
       .settings-select-arrow {
         position: absolute;
         right: 14px;
         top: 50%;
         transform: translateY(-50%);
         pointer-events: none;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
       }
 
       .settings-permission-note {
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
         margin-top: 10px;
         font-style: italic;
       }
@@ -5237,7 +5320,7 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         align-items: center;
         gap: 4px;
         font-size: 11px;
-        color: #34d399;
+        color: #059669;
         font-weight: 500;
         opacity: 0;
         transition: opacity 0.2s ease;
@@ -5253,28 +5336,34 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         align-items: center;
         justify-content: space-between;
         padding: 12px 14px;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 10px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       }
 
       .settings-toggle-label {
         font-size: 14px;
-        color: white;
+        color: #171717;
       }
 
       .settings-toggle {
         position: relative;
         width: 44px;
         height: 24px;
-        background: rgba(255, 255, 255, 0.1);
+        background: #d4d4d4;
         border-radius: 12px;
         cursor: pointer;
         transition: background 0.2s ease;
       }
 
       .settings-toggle.active {
-        background: #34d399;
+        background: #0d9488;
+      }
+
+      .settings-toggle:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
       }
 
       .settings-toggle-knob {
@@ -5397,13 +5486,14 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         setSmartFormatEnabled(this.smartFormatEnabled);
         this.showSaved();
     }
-    renderLanguageSelector(selectedCode, onChange) {
+    renderLanguageSelector(selectedCode, onChange, disabled = false) {
         return b `
       <div class="settings-select-wrapper">
         <select
           class="settings-select"
           .value="${selectedCode}"
           @change="${onChange}"
+          ?disabled="${disabled}"
         >
           ${SUPPORTED_LANGUAGES.map((lang) => b `
               <option
@@ -5521,7 +5611,7 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         <div class="settings-section-description">
           AI automatically removes filler words, adds punctuation, and polishes
           your text. Disable for raw transcription output. Note: disabling also
-          turns off text snippets.
+          turns off text snippets and output language translation.
         </div>
         <div class="settings-toggle-row">
           <span class="settings-toggle-label">Enable AI formatting</span>
@@ -5562,9 +5652,13 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         </div>
         <div class="settings-section-description">
           The language for your transcribed text. Usually the same as input, but
-          can differ for translation.
+          can differ for translation.${!this.smartFormatEnabled
+            ? " Requires Smart Format to be enabled."
+            : ""}
         </div>
-        ${this.renderLanguageSelector(this.selectedOutputLanguageCode, this.handleOutputLanguageChange.bind(this))}
+        ${this.renderLanguageSelector(this.smartFormatEnabled
+            ? this.selectedOutputLanguageCode
+            : this.selectedInputLanguageCode, this.handleOutputLanguageChange.bind(this), !this.smartFormatEnabled)}
       </div>
     `;
     }
@@ -5627,17 +5721,18 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
       }
 
       .snippet-item {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 10px;
         padding: 14px;
         transition: all 0.15s ease;
         position: relative;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       }
 
       .snippet-item:hover {
-        background: rgba(255, 255, 255, 0.06);
-        border-color: rgba(255, 255, 255, 0.1);
+        border-color: #d4d4d4;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       }
 
       .snippet-trigger {
@@ -5650,7 +5745,7 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
       .snippet-trigger-text {
         font-size: 14px;
         font-weight: 600;
-        color: #34d399;
+        color: #0d9488;
       }
 
       .snippet-trigger-text::before {
@@ -5668,12 +5763,12 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
         align-items: flex-start;
         gap: 8px;
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.65);
+        color: #525252;
         line-height: 1.5;
       }
 
       .snippet-expansion-arrow {
-        color: rgba(255, 255, 255, 0.3);
+        color: #a3a3a3;
         flex-shrink: 0;
         margin-top: 2px;
       }
@@ -5702,13 +5797,13 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
         transition: all 0.15s ease;
       }
 
       .edit-btn:hover {
-        background: rgba(52, 211, 153, 0.15);
-        color: #34d399;
+        background: rgba(13, 148, 136, 0.1);
+        color: #0d9488;
       }
     `,
     ]; }
@@ -5991,30 +6086,32 @@ let SpeechOSVocabularyTab = class SpeechOSVocabularyTab extends i$1 {
         gap: 8px;
         padding: 8px 12px;
         background: rgba(139, 92, 246, 0.1);
-        border: 1px solid rgba(139, 92, 246, 0.2);
+        border: 1px solid rgba(139, 92, 246, 0.25);
         border-radius: 8px;
         transition: all 0.15s ease;
       }
 
       .vocabulary-chip:hover {
         background: rgba(139, 92, 246, 0.15);
-        border-color: rgba(139, 92, 246, 0.3);
+        border-color: rgba(139, 92, 246, 0.35);
       }
 
       .vocabulary-chip-text {
         font-size: 13px;
         font-weight: 500;
-        color: #c4b5fd;
+        color: #7c3aed;
       }
 
       .vocabulary-chip .delete-btn {
         width: 20px;
         height: 20px;
         margin: -4px -4px -4px 0;
+        color: #737373;
       }
 
       .vocabulary-chip .delete-btn:hover {
         background: rgba(239, 68, 68, 0.2);
+        color: #f87171;
       }
     `,
     ]; }
@@ -6415,14 +6512,14 @@ const popupModalStyles = i$4 `
   }
 
   .modal-card {
-    background: #1a1d24;
+    background: #f5f5f4;
     border-radius: 16px;
     width: 90%;
     max-width: 400px;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
     transform: scale(0.95) translateY(10px);
     transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     pointer-events: auto;
@@ -6438,14 +6535,14 @@ const popupModalStyles = i$4 `
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid #e5e5e5;
+    background: #ffffff;
   }
 
   .modal-title {
     font-size: 16px;
     font-weight: 600;
-    color: white;
+    color: #171717;
     margin: 0;
     letter-spacing: -0.01em;
   }
@@ -6460,13 +6557,22 @@ const popupModalStyles = i$4 `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
   .close-button:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: white;
+    background: #f5f5f4;
+    color: #171717;
+  }
+
+  .close-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #0d9488, 0 0 0 4px rgba(13, 148, 136, 0.2);
+  }
+
+  .close-button:active {
+    transform: scale(0.95);
   }
 
   .modal-body {
@@ -6478,8 +6584,8 @@ const popupModalStyles = i$4 `
     justify-content: flex-end;
     gap: 10px;
     padding: 16px 20px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(0, 0, 0, 0.1);
+    border-top: 1px solid #e5e5e5;
+    background: #ffffff;
   }
 
   .btn {
@@ -6496,42 +6602,47 @@ const popupModalStyles = i$4 `
   }
 
   .btn-secondary {
-    background: rgba(255, 255, 255, 0.08);
-    color: rgba(255, 255, 255, 0.8);
+    background: rgba(0, 0, 0, 0.08);
+    color: #525252;
   }
 
   .btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.12);
-    color: white;
+    background: rgba(0, 0, 0, 0.12);
+    color: #171717;
   }
 
   .btn-primary {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     color: white;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
   .btn-primary:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    background: #0f766e;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+  }
+
+  .btn-primary:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
   }
 
   .btn-primary:active {
-    transform: translateY(0);
+    transform: scale(0.98);
   }
 
   /* Success state for copy button */
   .btn-success {
-    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
+    background: #059669;
   }
 
   /* Text display area */
   .text-display {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
     border-radius: 10px;
     padding: 14px 16px;
-    color: white;
+    color: #171717;
     font-size: 14px;
     line-height: 1.5;
     max-height: 200px;
@@ -6550,12 +6661,12 @@ const popupModalStyles = i$4 `
   }
 
   .text-display::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(0, 0, 0, 0.15);
     border-radius: 3px;
   }
 
   .text-display::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.25);
+    background: rgba(0, 0, 0, 0.25);
   }
 
   /* Instruction list styling */
@@ -6570,7 +6681,7 @@ const popupModalStyles = i$4 `
     align-items: flex-start;
     gap: 12px;
     padding: 12px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid #e5e5e5;
   }
 
   .instruction-item:last-child {
@@ -6581,7 +6692,7 @@ const popupModalStyles = i$4 `
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     color: white;
     font-size: 12px;
     font-weight: 700;
@@ -6593,7 +6704,7 @@ const popupModalStyles = i$4 `
 
   .instruction-text {
     font-size: 14px;
-    color: rgba(255, 255, 255, 0.85);
+    color: #171717;
     line-height: 1.5;
     padding-top: 2px;
   }
@@ -6651,7 +6762,7 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
         width: 32px;
         height: 32px;
         border-radius: 8px;
-        background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -6665,31 +6776,35 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
       }
 
       .modal-title {
-        background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
       }
 
       .btn-primary {
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+        background: #0d9488;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         border-radius: 999px;
       }
 
       .btn-primary:hover {
-        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
-        transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+        background: #0f766e;
+        box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+      }
+
+      .btn-primary:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
       }
 
       .btn-primary:active {
-        transform: translateY(0);
+        transform: scale(0.98);
       }
 
       .btn-success {
-        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
-        box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
+        background: #059669;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         border-radius: 999px;
       }
 
@@ -6703,14 +6818,15 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
         gap: 6px;
         margin-top: 12px;
         padding: 8px 12px;
-        background: rgba(16, 185, 129, 0.08);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 8px;
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.6);
+        color: #525252;
       }
 
       .hint-icon {
-        color: #10b981;
+        color: #0d9488;
         flex-shrink: 0;
       }
 
@@ -7556,7 +7672,14 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         core.state.hide();
     }
     handleSettingsClick() {
-        this.settingsOpen = true;
+        if (useExternalSettings()) {
+            const host = core.getConfig().host;
+            const fullUrl = `${host}/a/extension-settings`;
+            window.open(fullUrl, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.settingsOpen = true;
+        }
     }
     handleDragStart(e) {
         if (e.button !== 0)
@@ -8097,10 +8220,17 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         this.editSelectionStart = null;
         this.editSelectionEnd = null;
         this.editSelectedText = "";
-        // Open settings modal
-        this.settingsOpen = true;
+        // Open settings - either external URL or modal
+        if (useExternalSettings()) {
+            const host = core.getConfig().host;
+            const fullUrl = `${host}/a/extension-settings`;
+            window.open(fullUrl, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.settingsOpen = true;
+        }
         if (core.getConfig().debug) {
-            console.log("[SpeechOS] Settings modal opened from no-audio warning");
+            console.log("[SpeechOS] Settings opened from no-audio warning", { useExternalSettings: useExternalSettings() });
         }
         await disconnectPromise;
     }
@@ -8702,5 +8832,6 @@ exports.settingsSync = settingsSync;
 exports.snippetsStore = snippetsStore;
 exports.transcriptStore = transcriptStore;
 exports.updateSnippet = updateSnippet;
+exports.useExternalSettings = useExternalSettings;
 exports.vocabularyStore = vocabularyStore;
 //# sourceMappingURL=index.cjs.map