@designcrowd/fe-shared-lib 1.8.5-edge-fallback-5 → 1.8.5

package/index.js

@@ -23,7 +23,6 @@ export { WEBSITE_UPGRADE_CONTEXT_TYPES } from './src/experiences/models/websiteC
 
 export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
 export { useVoiceToText } from './src/useVoiceToText';
-export { setVoiceToTextSessionDisabledForTesting, VOICE_UNAVAILABLE_MESSAGE } from './src/useVoiceToText';
 
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.8.5-edge-fallback-5",
+  "version": "1.8.5",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/scripts/publish-uat.sh

@@ -1,17 +1,19 @@
 #!/usr/bin/env bash
 #
-# publish-uat.sh — publish a UAT-suffixed version of @designcrowd/fe-shared-lib
+# publish-uat.sh — publish @designcrowd/fe-shared-lib (UAT or stable)
 #
-# Usage:   ./scripts/publish-uat.sh <suffix>
+# Usage:   ./scripts/publish-uat.sh <suffix>     # UAT pre-release
+#          ./scripts/publish-uat.sh --stable     # final release (no suffix)
 # Example: ./scripts/publish-uat.sh edge-fallback-2
+#          ./scripts/publish-uat.sh --stable
 #
 # Reads the npm publish token from $NPM_PUBLISH_TOKEN_FILE
 # (default ~/.config/designcrowd/npm-publish-token, mode 600).
 # The token is never written into the repo.
 #
 # Workflow:
-#   1. Validate branch (refuse master) and suffix.
-#   2. Compute new version = <base>-<suffix>, refuse if already published.
+#   1. Validate args; in UAT mode also refuse master/main.
+#   2. Compute new version (<base>-<suffix> or <base>); refuse if already published.
 #   3. Bump package.json, run bundle-translation.
 #   4. npm pack — produces a tarball.
 #   5. Secret scan: dangerous filenames + token-shaped strings + the
@@ -33,16 +35,28 @@ TOKEN_FILE="${NPM_PUBLISH_TOKEN_FILE:-$HOME/.config/designcrowd/npm-publish-toke
 abort() { echo "ABORT: $*" >&2; exit 1; }
 
 # --- args ---
-SUFFIX="${1:-}"
-[[ -z "$SUFFIX" ]] && abort "usage: $0 <suffix>  e.g. $0 edge-fallback-2"
-# Semver pre-release identifiers are [0-9A-Za-z-], dot-separated. Reject underscores etc.
-# so we fail before npm rejects the version mid-flight with a dirty tree.
-[[ "$SUFFIX" =~ ^[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*$ ]] || abort "suffix must match semver pre-release: alphanumerics/hyphens, optionally dot-separated"
+MODE="uat"
+SUFFIX=""
+ARG="${1:-}"
+if [[ "$ARG" == "--stable" ]]; then
+  MODE="stable"
+elif [[ -n "$ARG" ]]; then
+  SUFFIX="$ARG"
+  # Semver pre-release identifiers are [0-9A-Za-z-], dot-separated. Reject underscores etc.
+  # so we fail before npm rejects the version mid-flight with a dirty tree.
+  [[ "$SUFFIX" =~ ^[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*$ ]] || abort "suffix must match semver pre-release: alphanumerics/hyphens, optionally dot-separated"
+else
+  abort $'usage: '"$0"$' <suffix>     # UAT pre-release (e.g. edge-fallback-2)\n       '"$0"$' --stable     # final release'
+fi
 
 # --- repo state ---
 cd "$(git rev-parse --show-toplevel)"
 BRANCH=$(git symbolic-ref --short HEAD)
-[[ "$BRANCH" == "master" || "$BRANCH" == "main" ]] && abort "refusing to publish from $BRANCH"
+# UAT publishes from feature branches only; stable can come from any branch
+# (master is the typical case but feature-branch hot publishes are allowed too).
+if [[ "$MODE" == "uat" ]]; then
+  [[ "$BRANCH" == "master" || "$BRANCH" == "main" ]] && abort "refusing UAT publish from $BRANCH"
+fi
 
 # --- preconditions: files we'll commit must be clean, so unrelated edits don't get swept into the version-bump commit ---
 [[ -z "$(git status --porcelain -- package.json)" ]] || abort "package.json has uncommitted changes; commit or stash before publishing"
@@ -70,10 +84,18 @@ fi
 
 # --- compute version ---
 BASE=$(node -p "require('./package.json').version.replace(/-.*/, '')")
-NEW="$BASE-$SUFFIX"
+if [[ "$MODE" == "stable" ]]; then
+  NEW="$BASE"
+else
+  NEW="$BASE-$SUFFIX"
+fi
 
 if npm view "$PKG@$NEW" version >/dev/null 2>&1; then
-  abort "$PKG@$NEW already published — pick a new suffix"
+  if [[ "$MODE" == "stable" ]]; then
+    abort "$PKG@$NEW already published — bump the base version in package.json first"
+  else
+    abort "$PKG@$NEW already published — pick a new suffix"
+  fi
 fi
 
 echo "==> publishing $PKG@$NEW from branch $BRANCH"

package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.stories.ts

@@ -1,5 +1,4 @@
 import VoiceToTextButton from './VoiceToTextButton.vue';
-import { setVoiceToTextSessionDisabledForTesting } from '../../../useVoiceToText';
 
 export default {
   title: 'Components/VoiceToTextButton',
@@ -241,124 +240,3 @@ export const SideBySide = () => ({
 SideBySide.story = {
   name: 'Side by Side Comparison',
 };
-
-export const ForceUnsupported = () => ({
-  components: { VoiceToTextButton },
-  methods: {
-    forceUnsupported() {
-      setVoiceToTextSessionDisabledForTesting(true);
-    },
-    reset() {
-      setVoiceToTextSessionDisabledForTesting(false);
-    },
-  },
-  template: `
-    <div class="tw-min-h-[400px] tw-p-8 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-white">
-      <h3 class="tw-text-grayscale-800 tw-text-lg tw-font-semibold tw-mb-2">Force unsupported preview</h3>
-      <p class="tw-text-grayscale-600 tw-text-sm tw-mb-6 tw-text-center tw-max-w-md">
-        Simulates the Edge fallback: after a 'network' SpeechRecognitionError, the composable latches
-        <code class="tw-bg-grayscale-100 tw-px-1 tw-rounded">isSupported</code> to false for the rest of the session.
-        The button now stays visible but disabled, with a tooltip explaining the situation. Reset clears the session flag.
-      </p>
-
-      <div class="tw-flex tw-gap-3 tw-mb-6">
-        <button
-          type="button"
-          @click="forceUnsupported"
-          class="tw-px-4 tw-py-2 tw-rounded tw-bg-error-500 tw-text-white tw-text-sm hover:tw-bg-error-600"
-        >
-          Force unsupported
-        </button>
-        <button
-          type="button"
-          @click="reset"
-          class="tw-px-4 tw-py-2 tw-rounded tw-bg-grayscale-200 tw-text-grayscale-800 tw-text-sm hover:tw-bg-grayscale-300"
-        >
-          Reset
-        </button>
-      </div>
-
-      <div class="tw-w-full tw-max-w-xl tw-bg-grayscale-100 tw-rounded-full tw-px-6 tw-py-3 tw-flex tw-items-center tw-gap-3 tw-border tw-border-grayscale-300 tw-min-h-[64px]">
-        <input
-          type="text"
-          placeholder="Voice input would appear on the right..."
-          class="tw-flex-1 tw-bg-transparent tw-border-none tw-text-grayscale-800 tw-placeholder-grayscale-500 focus:tw-outline-none tw-text-base"
-        />
-        <VoiceToTextButton variant="light" size="md" />
-      </div>
-
-      <p class="tw-text-grayscale-500 tw-text-xs tw-mt-4">
-        Tip: open DevTools → Application → Session Storage to see the
-        <code class="tw-bg-grayscale-100 tw-px-1 tw-rounded">fe-shared-lib:voice-to-text-disabled</code> key.
-      </p>
-    </div>
-  `,
-});
-
-ForceUnsupported.story = {
-  name: 'Force Unsupported (Edge Fallback)',
-};
-
-export const ControlVsUnsupported = () => ({
-  components: { VoiceToTextButton },
-  methods: {
-    forceUnsupported() {
-      setVoiceToTextSessionDisabledForTesting(true);
-    },
-    reset() {
-      setVoiceToTextSessionDisabledForTesting(false);
-    },
-  },
-  template: `
-    <div class="tw-min-h-[400px] tw-p-8" style="background: #1a1a2e;">
-      <h3 class="tw-text-white tw-text-lg tw-font-semibold tw-mb-2">Control vs Unsupported (side-by-side)</h3>
-      <p class="tw-text-grayscale-400 tw-text-sm tw-mb-6 tw-max-w-2xl">
-        Both buttons share variant + size. The right one is rendered with the session-disabled latch
-        flipped on, so it shows the new disabled state with the explanatory tooltip. Use this to compare
-        visual treatments for design review.
-      </p>
-
-      <div class="tw-flex tw-gap-3 tw-mb-6">
-        <button
-          type="button"
-          @click="forceUnsupported"
-          class="tw-px-4 tw-py-2 tw-rounded tw-bg-error-500 tw-text-white tw-text-sm hover:tw-bg-error-600"
-        >
-          Force unsupported
-        </button>
-        <button
-          type="button"
-          @click="reset"
-          class="tw-px-4 tw-py-2 tw-rounded tw-bg-grayscale-200 tw-text-grayscale-800 tw-text-sm hover:tw-bg-grayscale-300"
-        >
-          Reset
-        </button>
-      </div>
-
-      <div class="tw-flex tw-gap-12 tw-items-start">
-        <div class="tw-text-center">
-          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
-            <VoiceToTextButton variant="dark" size="md" />
-          </div>
-          <p class="tw-text-grayscale-400 tw-text-xs">Control (default state)</p>
-        </div>
-
-        <div class="tw-text-center">
-          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
-            <VoiceToTextButton variant="dark" size="md" />
-          </div>
-          <p class="tw-text-grayscale-400 tw-text-xs">Unsupported (after latch)</p>
-        </div>
-      </div>
-
-      <p class="tw-text-grayscale-500 tw-text-xs tw-mt-6">
-        Note: the composable is a singleton, so flipping the latch affects every mounted instance —
-        which is exactly what the production Edge case does. Both buttons will switch together.
-      </p>
-    </div>
-  `,
-});
-
-ControlVsUnsupported.story = {
-  name: 'Control vs Unsupported',
-};

package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.vue

@@ -1,23 +1,17 @@
 <template>
   <button
+    v-if="isSupported"
     type="button"
-    :disabled="disabled || unavailableForSession"
-    :aria-label="
-      unavailableForSession
-        ? 'Voice input not available in this browser'
-        : isListening
-          ? 'Stop voice input'
-          : 'Start voice input'
-    "
-    :title="effectiveTitle"
+    :disabled="disabled"
+    :aria-label="isListening ? 'Stop voice input' : 'Start voice input'"
+    :title="title"
     data-test="voice-to-text-button"
     class="voice-prompt-button tw-rounded-full tw-border-0 tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 tw-cursor-pointer focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-500"
     :class="[
       sizeClasses,
       variantClasses.button,
       isListening ? 'voice-prompt-listening' : '',
-      (disabled || unavailableForSession) ? 'tw-opacity-50 tw-cursor-not-allowed' : '',
-      unavailableForSession ? 'voice-prompt-unavailable' : '',
+      disabled ? 'tw-opacity-50 tw-cursor-not-allowed' : '',
     ]"
     :style="isListening ? { '--voice-bg': variantClasses.recordingBg } : {}"
     @click="toggle"
@@ -34,7 +28,7 @@
 <script setup lang="ts">
 import { watch, toRef, computed } from 'vue';
 import Icon from '../Icon/Icon.vue';
-import { useVoiceToText, VOICE_UNAVAILABLE_MESSAGE } from '../../../useVoiceToText';
+import { useVoiceToText } from '../../../useVoiceToText';
 
 type ButtonSize = 'sm' | 'md' | 'lg';
 type ButtonVariant = 'light' | 'dark';
@@ -100,13 +94,8 @@ const variantClasses = computed(() => {
   };
 });
 
-const unavailableForSession = computed(() => !isSupported.value);
-const effectiveTitle = computed(() => (unavailableForSession.value ? VOICE_UNAVAILABLE_MESSAGE : props.title));
-
-// Keep recognition language in sync with prop
 watch(toRef(props, 'lang'), setLang);
 
-// Watch for transcript changes and emit appropriate events
 watch(
   [transcript, isFinal],
   ([newTranscript, newIsFinal]) => {
@@ -119,7 +108,6 @@ watch(
   { flush: 'sync' },
 );
 
-// Watch for listening state changes
 watch(isListening, (newVal, oldVal) => {
   if (newVal && !oldVal) {
     emit('on-start');
@@ -129,7 +117,6 @@ watch(isListening, (newVal, oldVal) => {
   }
 });
 
-// Watch for errors
 watch(error, (newError) => {
   if (newError) {
     emit('on-error', newError);
@@ -156,23 +143,4 @@ watch(error, (newError) => {
     opacity: 0.5;
   }
 }
-
-.voice-prompt-unavailable {
-  position: relative;
-}
-
-.voice-prompt-unavailable::after {
-  content: '';
-  position: absolute;
-  inset: 18%;
-  background: linear-gradient(
-    135deg,
-    transparent calc(50% - 1px),
-    #E34935 calc(50% - 1px),
-    #E34935 calc(50% + 1px),
-    transparent calc(50% + 1px)
-  );
-  pointer-events: none;
-  border-radius: inherit;
-}
 </style>

package/src/useVoiceToText.ts

@@ -25,22 +25,11 @@ interface VoiceToTextState {
   error: Ref<string | null>;
 }
 
-// Singleton instance and state (lazily initialized)
 let recognition: SpeechRecognition | null = null;
 let isInitialized = false;
 let errorClearTimeout: ReturnType<typeof setTimeout> | null = null;
 let state: VoiceToTextState | null = null;
-let sessionDisabled: Ref<boolean> | null = null;
-let hasReceivedResult = false;
 
-// Edge ships window.SpeechRecognition but routes it through Microsoft's Online
-// Speech service, which is gated by a Windows privacy toggle that's commonly
-// off — start() then fires a 'network' error. There's no synchronous capability
-// check, so we latch on the first network error and treat the feature as
-// unsupported for the rest of the session. See issue #161.
-const SESSION_DISABLED_KEY = 'fe-shared-lib:voice-to-text-disabled';
-
-// Error message mapping per spec
 const ERROR_MESSAGES: Record<string, string> = {
   'not-allowed': 'Microphone permission was denied. Please allow access.',
   'language-not-supported': 'This language is not supported.',
@@ -48,22 +37,15 @@ const ERROR_MESSAGES: Record<string, string> = {
   'audio-capture': 'No microphone was found or microphone is not working.',
 };
 
-export const VOICE_UNAVAILABLE_MESSAGE =
-  "Voice input isn't available in this browser. Try Chrome or Safari for the best experience.";
-
 const ERROR_CLEAR_DELAY = 5000;
 
-async function checkMicPermission(): Promise<'granted' | 'denied' | 'prompt' | 'unknown'> {
-  try {
-    if (typeof navigator === 'undefined' || !navigator.permissions?.query) {
-      return 'unknown';
-    }
-    const result = await navigator.permissions.query({ name: 'microphone' as PermissionName });
-    return result.state as 'granted' | 'denied' | 'prompt';
-  } catch {
-    // Permissions API or the 'microphone' descriptor isn't supported (older Safari, Firefox quirks).
-    return 'unknown';
-  }
+// Edge exposes window.SpeechRecognition but routes it through Microsoft's
+// Online Speech service, which fails inconsistently in ways the spec doesn't
+// cover (network errors, not-allowed even when mic is granted, mic UI
+// disappearing after first use). Treat Edge as unsupported until MS fixes it.
+function isEdgeBrowser(): boolean {
+  if (typeof navigator === 'undefined' || !navigator.userAgent) return false;
+  return /Edg(e|A|iOS)?\//.test(navigator.userAgent);
 }
 
 function getState(): VoiceToTextState {
@@ -78,54 +60,6 @@ function getState(): VoiceToTextState {
   return state;
 }
 
-function getSessionDisabled(): Ref<boolean> {
-  if (!sessionDisabled) {
-    let initial = false;
-    try {
-      initial = typeof window !== 'undefined' && window.sessionStorage?.getItem(SESSION_DISABLED_KEY) === '1';
-    } catch {
-      // sessionStorage can throw in sandboxed iframes / disabled-cookie contexts
-    }
-    sessionDisabled = ref(initial);
-  }
-  return sessionDisabled;
-}
-
-function setSessionDisabled(disabled: boolean): void {
-  const flag = getSessionDisabled();
-  flag.value = disabled;
-  try {
-    if (typeof window === 'undefined') return;
-    if (disabled) {
-      window.sessionStorage?.setItem(SESSION_DISABLED_KEY, '1');
-    } else {
-      window.sessionStorage?.removeItem(SESSION_DISABLED_KEY);
-    }
-  } catch {
-    // ignore storage failures — in-memory flag still applies for this session
-  }
-}
-
-function latchAsUnavailable(): void {
-  const { error: errorRef } = getState();
-  setSessionDisabled(true);
-  errorRef.value = VOICE_UNAVAILABLE_MESSAGE;
-  if (errorClearTimeout) {
-    clearTimeout(errorClearTimeout);
-  }
-  errorClearTimeout = setTimeout(() => {
-    errorRef.value = null;
-  }, ERROR_CLEAR_DELAY);
-}
-
-/**
- * Test/Storybook helper: force the session-disabled latch on or off without
- * needing a real network error. Not part of the public consumer API.
- */
-export function setVoiceToTextSessionDisabledForTesting(disabled: boolean): void {
-  setSessionDisabled(disabled);
-}
-
 /**
  * Singleton composable that wraps the Web Speech API (SpeechRecognition).
  * All calls to useVoiceToText() return the same shared instance.
@@ -133,18 +67,15 @@ export function setVoiceToTextSessionDisabledForTesting(disabled: boolean): void
 export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToTextReturn {
   const { lang = 'en-US' } = options;
 
-  // Get or create shared state
   const { isListening, transcript, isFinal, error } = getState();
 
-  // Check for browser support
   const SpeechRecognitionCtor: typeof SpeechRecognition | null =
     typeof window !== 'undefined' ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
 
-  const sessionDisabledRef = getSessionDisabled();
-  const isSupported = computed(() => !!SpeechRecognitionCtor && !sessionDisabledRef.value);
+  const supported = !!SpeechRecognitionCtor && !isEdgeBrowser();
+  const isSupported = computed(() => supported);
 
-  // Initialize singleton once
-  if (!isInitialized && SpeechRecognitionCtor) {
+  if (!isInitialized && supported && SpeechRecognitionCtor) {
     recognition = new SpeechRecognitionCtor();
     recognition.continuous = true;
     recognition.interimResults = true;
@@ -162,74 +93,22 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
         }
       }
 
-      if (finalTranscript.length > 0 || interimTranscript.length > 0) {
-        hasReceivedResult = true;
-      }
-
       transcript.value = finalTranscript + interimTranscript;
       isFinal.value = interimTranscript === '';
     };
 
-    recognition.onerror = async (event: SpeechRecognitionErrorEvent) => {
+    recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
       // Suppress no-speech and aborted errors per spec
       if (event.error === 'no-speech' || event.error === 'aborted') {
         return;
       }
 
-      // Diagnostic instrumentation: capture state at every non-suppressed error
-      // so QA has a data point on first failure across browser/permission combos.
-      const micPermission = await checkMicPermission();
-      const sessionDisabledFlag = getSessionDisabled().value;
-      // eslint-disable-next-line no-console
-      console.warn('[useVoiceToText] error event', {
-        error: event.error,
-        micPermission,
-        hasReceivedResult,
-        sessionDisabled: sessionDisabledFlag,
-      });
-
-      if (event.error === 'network') {
-        if (!hasReceivedResult) {
-          // First-attempt network failure on Edge with the privacy toggle off (or
-          // an actually-broken network). Latch the feature off for the session.
-          // eslint-disable-next-line no-console
-          console.warn('[useVoiceToText] network error before any result — disabling voice input for this session');
-          isListening.value = false;
-          latchAsUnavailable();
-        } else {
-          // Trailing network error after a successful result is a known Edge teardown
-          // quirk — swallow it instead of latching, since voice clearly works for this user.
-          // eslint-disable-next-line no-console
-          console.warn('[useVoiceToText] swallowing trailing network error after successful result');
-          isListening.value = false;
-        }
-        return;
-      }
-
-      if (event.error === 'not-allowed') {
-        if (micPermission === 'granted') {
-          // Page-level mic permission was granted but the underlying speech backend
-          // (Edge's Microsoft Online Speech service) refused. This is the Mac
-          // InPrivate / Windows-toggle-off failure mode. Latch instead of showing a
-          // misleading "permission denied" toast.
-          // eslint-disable-next-line no-console
-          console.warn(
-            '[useVoiceToText] not-allowed despite granted mic permission — disabling voice input for this session',
-          );
-          isListening.value = false;
-          latchAsUnavailable();
-          return;
-        }
-        // Otherwise fall through to the existing "permission was denied" toast.
-      }
-
       const message = ERROR_MESSAGES[event.error] || 'An error occurred with speech recognition.';
       error.value = message;
 
       // eslint-disable-next-line no-console
       console.warn('[useVoiceToText]', event.error, message);
 
-      // Auto-clear error after timeout
       if (errorClearTimeout) {
         clearTimeout(errorClearTimeout);
       }
@@ -245,7 +124,6 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
     isInitialized = true;
   }
 
-  // Update language on existing instance
   if (recognition) {
     recognition.lang = lang;
   }
@@ -253,7 +131,6 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
   const start = () => {
     if (!recognition || isListening.value) return;
 
-    // Clear previous state
     transcript.value = '';
     isFinal.value = false;
     error.value = null;
@@ -266,7 +143,6 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
       recognition.start();
       isListening.value = true;
     } catch (e: unknown) {
-      // Handle case where recognition is already started
       // eslint-disable-next-line no-console
       console.warn('[useVoiceToText] Failed to start:', (e as Error).message);
     }
@@ -279,7 +155,6 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
     try {
       recognition.stop();
     } catch (e: unknown) {
-      // Handle case where recognition is already stopped
       // eslint-disable-next-line no-console
       console.warn('[useVoiceToText] Failed to stop:', (e as Error).message);
     }