@speechos/client 0.2.9 → 0.2.11

package/dist/index.iife.js

@@ -26912,7 +26912,6 @@
   	host: DEFAULT_HOST,
   	debug: false,
   	webSocketFactory: void 0,
-  	fetchHandler: void 0,
   	settingsToken: void 0
   };
   /**
@@ -26921,14 +26920,13 @@
   * @returns Validated and merged configuration
   */
   function validateConfig(userConfig) {
-  	if (!userConfig.apiKey) throw new Error("SpeechOS requires an apiKey. Get one from your team dashboard at /a/<team-slug>/.");
+  	if (!userConfig.apiKey) throw new Error("SpeechOS requires an apiKey. Get one from your team dashboard at /a/.");
   	return {
   		apiKey: userConfig.apiKey,
   		userId: userConfig.userId ?? defaultConfig.userId,
   		host: userConfig.host ?? defaultConfig.host,
   		debug: userConfig.debug ?? defaultConfig.debug,
   		webSocketFactory: userConfig.webSocketFactory ?? defaultConfig.webSocketFactory,
-  		fetchHandler: userConfig.fetchHandler ?? defaultConfig.fetchHandler,
   		settingsToken: userConfig.settingsToken ?? defaultConfig.settingsToken
   	};
   }
@@ -26982,13 +26980,6 @@
   	};
   }
   /**
-  * Get the fetch handler from the current configuration
-  * @returns The fetch handler or undefined if not configured
-  */
-  function getFetchHandler() {
-  	return currentConfig.fetchHandler;
-  }
-  /**
   * LocalStorage key for anonymous ID persistence
   */
   const ANONYMOUS_ID_KEY = "speechos_anonymous_id";
@@ -28805,6 +28796,7 @@
       commands: [],
       zIndex: 999999,
       alwaysVisible: false,
+      useExternalSettings: false,
   };
   /**
    * Current client configuration singleton
@@ -28820,6 +28812,7 @@
           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) {
@@ -28871,6 +28864,12 @@
   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
@@ -29041,6 +29040,17 @@
           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,
+              });
+              state.setFocusedElement(activeElement);
+              state.show();
+              events.emit("form:focus", { element: activeElement });
+          }
       }
       /**
        * Stop detecting form field focus events
@@ -29285,9 +29295,12 @@
    * 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"] },
@@ -29308,18 +29321,26 @@
       { 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"] },
@@ -30112,25 +30133,14 @@
           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 = getConfig();
-          const customHandler = 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
@@ -30510,9 +30520,9 @@
     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;
@@ -31077,45 +31087,51 @@
         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);
       }
 
@@ -31158,15 +31174,15 @@
         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,
@@ -31187,13 +31203,13 @@
         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,
@@ -31234,8 +31250,8 @@
         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;
@@ -32655,15 +32671,15 @@
   }
 
   .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;
@@ -32688,16 +32704,16 @@
     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 {
@@ -32710,7 +32726,7 @@
     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;
@@ -32725,13 +32741,13 @@
   .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;
@@ -32747,13 +32763,22 @@
     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 {
@@ -32765,8 +32790,8 @@
   .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;
@@ -32795,19 +32820,25 @@
     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 {
@@ -32818,7 +32849,7 @@
     transform: translateY(-50%);
     width: 3px;
     height: 24px;
-    background: #34d399;
+    background: #0f766e;
     border-radius: 0 3px 3px 0;
   }
 
@@ -32861,14 +32892,14 @@
   .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;
   }
@@ -32876,7 +32907,7 @@
   .empty-state {
     text-align: center;
     padding: 40px 20px;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
   }
 
   .empty-state-icon {
@@ -32888,7 +32919,7 @@
     font-size: 15px;
     font-weight: 500;
     margin-bottom: 8px;
-    color: rgba(255, 255, 255, 0.7);
+    color: #525252;
   }
 
   .empty-state-text {
@@ -32906,7 +32937,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.35);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
@@ -32944,20 +32975,30 @@
     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 {
@@ -32968,7 +33009,7 @@
 
   .count-badge {
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.45);
+    color: #737373;
     font-weight: 500;
   }
 
@@ -32980,11 +33021,12 @@
   }
 
   .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 {
@@ -32999,7 +33041,7 @@
     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;
@@ -33008,10 +33050,10 @@
   .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;
@@ -33020,12 +33062,12 @@
 
   .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 {
@@ -33049,7 +33091,7 @@
 
   .char-count {
     font-size: 11px;
-    color: rgba(255, 255, 255, 0.4);
+    color: #737373;
     font-variant-numeric: tabular-nums;
   }
 
@@ -33083,26 +33125,35 @@
   }
 
   .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 {
@@ -33136,16 +33187,17 @@
       }
 
       .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 {
@@ -33168,28 +33220,28 @@
       }
 
       .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;
@@ -33204,7 +33256,7 @@
         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 {
@@ -33213,23 +33265,23 @@
         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 {
@@ -33243,9 +33295,9 @@
         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;
@@ -33254,18 +33306,18 @@
 
       .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;
@@ -33453,21 +33505,21 @@
         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;
       }
@@ -33484,17 +33536,17 @@
       }
 
       .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;
@@ -33572,7 +33624,7 @@
         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;
@@ -33587,13 +33639,13 @@
       .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;
@@ -33601,7 +33653,7 @@
 
       .about-description {
         font-size: 14px;
-        color: rgba(255, 255, 255, 0.65);
+        color: #525252;
         line-height: 1.7;
         margin-bottom: 24px;
       }
@@ -33619,19 +33671,29 @@
         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);
       }
     `,
       ]; }
@@ -33711,20 +33773,21 @@
         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 {
@@ -33733,14 +33796,15 @@
         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;
       }
     `,
       ]; }
@@ -33937,18 +34001,18 @@
       }
 
       .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;
       }
@@ -33977,10 +34041,10 @@
       .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;
@@ -33990,34 +34054,44 @@
       }
 
       .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;
       }
@@ -34027,7 +34101,7 @@
         align-items: center;
         gap: 4px;
         font-size: 11px;
-        color: #34d399;
+        color: #059669;
         font-weight: 500;
         opacity: 0;
         transition: opacity 0.2s ease;
@@ -34043,28 +34117,34 @@
         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 {
@@ -34187,13 +34267,14 @@
           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
@@ -34311,7 +34392,7 @@
         <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>
@@ -34352,9 +34433,13 @@
         </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>
     `;
       }
@@ -34417,17 +34502,18 @@
       }
 
       .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 {
@@ -34440,7 +34526,7 @@
       .snippet-trigger-text {
         font-size: 14px;
         font-weight: 600;
-        color: #34d399;
+        color: #0d9488;
       }
 
       .snippet-trigger-text::before {
@@ -34458,12 +34544,12 @@
         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;
       }
@@ -34492,13 +34578,13 @@
         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;
       }
     `,
       ]; }
@@ -34781,30 +34867,32 @@
         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;
       }
     `,
       ]; }
@@ -35205,14 +35293,14 @@
   }
 
   .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;
@@ -35228,14 +35316,14 @@
     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;
   }
@@ -35250,13 +35338,22 @@
     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 {
@@ -35268,8 +35365,8 @@
     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 {
@@ -35286,42 +35383,47 @@
   }
 
   .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;
@@ -35340,12 +35442,12 @@
   }
 
   .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 */
@@ -35360,7 +35462,7 @@
     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 {
@@ -35371,7 +35473,7 @@
     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;
@@ -35383,7 +35485,7 @@
 
   .instruction-text {
     font-size: 14px;
-    color: rgba(255, 255, 255, 0.85);
+    color: #171717;
     line-height: 1.5;
     padding-top: 2px;
   }
@@ -35441,7 +35543,7 @@
         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;
@@ -35455,31 +35557,35 @@
       }
 
       .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;
       }
 
@@ -35493,14 +35599,15 @@
         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;
       }
 
@@ -36340,7 +36447,14 @@
           state.hide();
       }
       handleSettingsClick() {
-          this.settingsOpen = true;
+          if (useExternalSettings()) {
+              const host = getConfig().host;
+              const fullUrl = `${host}/a/extension-settings`;
+              window.open(fullUrl, '_blank', 'noopener,noreferrer');
+          }
+          else {
+              this.settingsOpen = true;
+          }
       }
       handleDragStart(e) {
           if (e.button !== 0)
@@ -36881,10 +36995,17 @@
           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 = getConfig().host;
+              const fullUrl = `${host}/a/extension-settings`;
+              window.open(fullUrl, '_blank', 'noopener,noreferrer');
+          }
+          else {
+              this.settingsOpen = true;
+          }
           if (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;
       }
@@ -37465,6 +37586,7 @@
   exports.state = state;
   exports.transcriptStore = transcriptStore;
   exports.updateSnippet = updateSnippet;
+  exports.useExternalSettings = useExternalSettings;
   exports.vocabularyStore = vocabularyStore;
 
   Object.defineProperty(exports, '__esModule', { value: true });