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

package/scripts/publish-uat.sh

@@ -0,0 +1,149 @@
+#!/usr/bin/env bash
+#
+# publish-uat.sh — publish a UAT-suffixed version of @designcrowd/fe-shared-lib
+#
+# Usage:   ./scripts/publish-uat.sh <suffix>
+# Example: ./scripts/publish-uat.sh edge-fallback-2
+#
+# 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.
+#   3. Bump package.json, run bundle-translation.
+#   4. npm pack — produces a tarball.
+#   5. Secret scan: dangerous filenames + token-shaped strings + the
+#      literal token bytes from the token file (if it leaked into the
+#      tree somehow, this catches it).
+#   6. npm publish <tarball> via a temp .npmrc in /tmp (mode 600,
+#      removed on exit).
+#   7. git add + commit the version bump.
+#
+# Anything in steps 4-6 that fails leaves the working tree dirty so you
+# can investigate. The commit only lands after the registry confirms
+# the upload.
+
+set -euo pipefail
+
+PKG="@designcrowd/fe-shared-lib"
+TOKEN_FILE="${NPM_PUBLISH_TOKEN_FILE:-$HOME/.config/designcrowd/npm-publish-token}"
+
+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"
+
+# --- repo state ---
+cd "$(git rev-parse --show-toplevel)"
+BRANCH=$(git symbolic-ref --short HEAD)
+[[ "$BRANCH" == "master" || "$BRANCH" == "main" ]] && abort "refusing to publish from $BRANCH"
+
+# --- 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"
+if [[ -d src/bundles ]] && [[ -n "$(git status --porcelain -- src/bundles)" ]]; then
+  abort "src/bundles has uncommitted changes; commit or stash before publishing"
+fi
+
+# --- token ---
+[[ -f "$TOKEN_FILE" ]] || abort "no token at $TOKEN_FILE (set NPM_PUBLISH_TOKEN_FILE to override)"
+TOKEN=$(tr -d '[:space:]' < "$TOKEN_FILE")
+[[ -n "$TOKEN" ]] || abort "token file is empty: $TOKEN_FILE"
+
+# --- toolchain version check ---
+NODE_V=$(node -v)
+NPM_V=$(npm -v)
+echo "==> node $NODE_V, npm $NPM_V"
+if [[ -f .nvmrc ]]; then
+  WANT=$(tr -d '[:space:]v' < .nvmrc)
+  WANT_MAJOR="${WANT%%.*}"
+  HAVE_MAJOR=$(echo "${NODE_V#v}" | cut -d. -f1)
+  if [[ "$WANT_MAJOR" != "$HAVE_MAJOR" ]]; then
+    echo "WARNING: .nvmrc wants Node $WANT (major $WANT_MAJOR), you're on $NODE_V. Consider 'nvm use'." >&2
+  fi
+fi
+
+# --- compute version ---
+BASE=$(node -p "require('./package.json').version.replace(/-.*/, '')")
+NEW="$BASE-$SUFFIX"
+
+if npm view "$PKG@$NEW" version >/dev/null 2>&1; then
+  abort "$PKG@$NEW already published — pick a new suffix"
+fi
+
+echo "==> publishing $PKG@$NEW from branch $BRANCH"
+
+# --- bump + bundle ---
+node -e "const fs=require('fs');const p=require('./package.json');p.version='$NEW';fs.writeFileSync('./package.json', JSON.stringify(p, null, 2)+'\n');"
+echo "==> running bundle-translation"
+npm run --silent bundle-translation >/dev/null
+
+# --- cleanup trap: registered before any artifacts so a failed mktemp/pack still tidies up ---
+SCAN_DIR=""; TMP_NPMRC=""; TARBALL=""
+cleanup() {
+  [[ -n "$SCAN_DIR" ]] && rm -rf "$SCAN_DIR"
+  [[ -n "$TMP_NPMRC" ]] && rm -f "$TMP_NPMRC"
+  [[ -n "$TARBALL" ]] && rm -f "$TARBALL"
+  return 0
+}
+trap cleanup EXIT
+
+SCAN_DIR=$(mktemp -d)
+TMP_NPMRC=$(mktemp /tmp/fe-shared-lib-publish.XXXXXX.npmrc)
+chmod 600 "$TMP_NPMRC"
+
+# --- pack ---
+echo "==> packing"
+TARBALL=$(npm pack --silent)
+[[ -f "$TARBALL" ]] || abort "npm pack did not produce a tarball"
+
+# --- secret scan: filenames ---
+echo "==> scanning $TARBALL"
+DANGEROUS_PATHS='(^|/)(\.env(\..+)?|\.npmrc|\.npm-publish-token|id_rsa.*|id_ed25519.*|.*\.pem|.*\.key|.*[._-]token([._-].*)?|.*[._-]secret([._-].*)?|.*[._-]credentials?([._-].*)?)$|(^|/)\.(aws|ssh|gnupg)/'
+if BAD=$(tar tzf "$TARBALL" | grep -E -i "$DANGEROUS_PATHS" || true); [[ -n "$BAD" ]]; then
+  echo "$BAD" >&2
+  abort "dangerous filenames in tarball"
+fi
+
+# --- secret scan: contents ---
+tar xzf "$TARBALL" -C "$SCAN_DIR"
+
+# Token-shaped patterns. Length floors (e.g. {30,}) keep documentation placeholders
+# like 'npm_TOKEN' or '${NPM_TOKEN}' from tripping the check.
+SECRET_PATTERNS='(npm_[A-Za-z0-9]{30,}|AKIA[0-9A-Z]{16}|ASIA[0-9A-Z]{16}|gh[pousr]_[A-Za-z0-9]{20,}|xox[baprs]-[A-Za-z0-9-]{10,}|sk_live_[A-Za-z0-9]{20,}|-----BEGIN [A-Z ]*PRIVATE KEY-----)'
+if HITS=$(grep -REn -I -E "$SECRET_PATTERNS" "$SCAN_DIR" 2>/dev/null || true); [[ -n "$HITS" ]]; then
+  echo "$HITS" >&2
+  abort "secret-shaped string in tarball"
+fi
+
+# Belt-and-braces: the token's own bytes. If our publish token ever
+# lands in a tracked file by accident, this catches it regardless of
+# pattern-matching. Pass the token via stdin (-f -) so it doesn't appear
+# in the process arglist (visible to other users via `ps`).
+if printf '%s' "$TOKEN" | grep -RFqf - "$SCAN_DIR" 2>/dev/null; then
+  abort "publish token bytes appear in tarball — DO NOT publish"
+fi
+
+FILES=$(tar tzf "$TARBALL" | wc -l | tr -d ' ')
+SIZE=$(du -h "$TARBALL" | cut -f1)
+echo "==> scan clean. $FILES files, $SIZE"
+
+# --- publish ---
+printf '//registry.npmjs.org/:_authToken=%s\n' "$TOKEN" > "$TMP_NPMRC"
+echo "==> publishing"
+npm publish "$TARBALL" --userconfig "$TMP_NPMRC"
+
+# --- commit bump ---
+git add -- package.json
+[[ -d src/bundles ]] && git add -- src/bundles
+git commit -m "bump version to $NEW" >/dev/null
+echo
+echo "Published $PKG@$NEW (commit $(git rev-parse --short HEAD))"
+echo
+echo "Install in BrandCrowd.Net:"
+echo "  npm i $PKG@$NEW"

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

@@ -1,4 +1,5 @@
 import VoiceToTextButton from './VoiceToTextButton.vue';
+import { setVoiceToTextSessionDisabledForTesting } from '../../../useVoiceToText';
 
 export default {
   title: 'Components/VoiceToTextButton',
@@ -240,3 +241,124 @@ 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,16 +1,23 @@
 <template>
   <button
-    v-if="isSupported"
     type="button"
-    :disabled="disabled"
-    :aria-label="isListening ? 'Stop voice input' : 'Start voice input'"
+    :disabled="disabled || unavailableForSession"
+    :aria-label="
+      unavailableForSession
+        ? 'Voice input not available in this browser'
+        : isListening
+          ? 'Stop voice input'
+          : 'Start voice input'
+    "
+    :title="effectiveTitle"
     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 ? 'tw-opacity-50 tw-cursor-not-allowed' : '',
+      (disabled || unavailableForSession) ? 'tw-opacity-50 tw-cursor-not-allowed' : '',
+      unavailableForSession ? 'voice-prompt-unavailable' : '',
     ]"
     :style="isListening ? { '--voice-bg': variantClasses.recordingBg } : {}"
     @click="toggle"
@@ -27,7 +34,7 @@
 <script setup lang="ts">
 import { watch, toRef, computed } from 'vue';
 import Icon from '../Icon/Icon.vue';
-import { useVoiceToText } from '../../../useVoiceToText';
+import { useVoiceToText, VOICE_UNAVAILABLE_MESSAGE } from '../../../useVoiceToText';
 
 type ButtonSize = 'sm' | 'md' | 'lg';
 type ButtonVariant = 'light' | 'dark';
@@ -37,6 +44,7 @@ interface VoiceToTextButtonProps {
   disabled?: boolean;
   size?: ButtonSize;
   variant?: ButtonVariant;
+  title?: string;
 }
 
 const props = withDefaults(defineProps<VoiceToTextButtonProps>(), {
@@ -44,6 +52,7 @@ const props = withDefaults(defineProps<VoiceToTextButtonProps>(), {
   disabled: false,
   size: 'md',
   variant: 'dark',
+  title: undefined,
 });
 
 const sizeClasses = computed(() => {
@@ -91,6 +100,9 @@ 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);
 
@@ -144,4 +156,23 @@ 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

@@ -30,6 +30,15 @@ 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> = {
@@ -39,8 +48,24 @@ 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';
+  }
+}
+
 function getState(): VoiceToTextState {
   if (!state) {
     state = {
@@ -53,6 +78,54 @@ 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.
@@ -67,7 +140,8 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
   const SpeechRecognitionCtor: typeof SpeechRecognition | null =
     typeof window !== 'undefined' ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
 
-  const isSupported = computed(() => !!SpeechRecognitionCtor);
+  const sessionDisabledRef = getSessionDisabled();
+  const isSupported = computed(() => !!SpeechRecognitionCtor && !sessionDisabledRef.value);
 
   // Initialize singleton once
   if (!isInitialized && SpeechRecognitionCtor) {
@@ -88,16 +162,67 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
         }
       }
 
+      if (finalTranscript.length > 0 || interimTranscript.length > 0) {
+        hasReceivedResult = true;
+      }
+
       transcript.value = finalTranscript + interimTranscript;
       isFinal.value = interimTranscript === '';
     };
 
-    recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
+    recognition.onerror = async (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;