@designcrowd/fe-shared-lib 1.8.4-edge-fallback-1 → 1.8.4

package/dist/css/tailwind-designCrowd.css

@@ -551,6 +551,9 @@ video {
 .tw-relative {
   position: relative;
 }
+.tw-inset-0 {
+  inset: 0px;
+}
 .tw--left-16 {
   left: -4rem;
 }
@@ -946,6 +949,9 @@ video {
 .tw-w-96 {
   width: 24rem;
 }
+.tw-w-\[14rem\] {
+  width: 14rem;
+}
 .tw-w-auto {
   width: auto;
 }
@@ -1210,6 +1216,9 @@ video {
 .tw-rounded-full {
   border-radius: 9999px;
 }
+.tw-rounded-lg {
+  border-radius: 0.5rem;
+}
 .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1394,6 +1403,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
+.tw-border-t-transparent {
+  border-top-color: transparent;
+}
 .tw-bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1509,6 +1521,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+.tw-bg-white\/50 {
+  background-color: rgb(255 255 255 / 0.5);
+}
 .tw-bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1851,6 +1866,9 @@ video {
 .tw-font-bold {
   font-weight: 700;
 }
+.tw-font-medium {
+  font-weight: 500;
+}
 .tw-font-normal {
   font-weight: 400;
 }
@@ -1878,6 +1896,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(146 38 36 / var(--tw-text-opacity));
 }
+.tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(230 230 230 / var(--tw-text-opacity));
+}
 .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(204 204 204 / var(--tw-text-opacity));
@@ -2031,6 +2053,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2062,6 +2089,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
 }
+.hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 204 204 / var(--tw-border-opacity));
+}
 .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(14 121 188 / var(--tw-border-opacity));
@@ -2098,6 +2129,14 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
+}
+.hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 93 96 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2122,6 +2161,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 91 141 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(223 226 230 / var(--tw-bg-opacity));
@@ -2138,6 +2181,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(74 87 103 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-secondary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 65 77 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(213 242 223 / var(--tw-bg-opacity));
@@ -2150,10 +2197,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 140 34 / var(--tw-bg-opacity));
 }
-.hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(39 52 56 / var(--tw-text-opacity));
-}
 .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(14 121 188 / var(--tw-text-opacity));
@@ -2210,6 +2253,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus-visible\:tw-ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.focus-visible\:tw-ring-primary-500:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 151 235 / var(--tw-ring-opacity));
+}
+.focus-visible\:tw-ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
 .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(17 151 235 / var(--tw-text-opacity));

package/package.json

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

package/src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="sparkle-loader" role="status" :aria-label="alt">
     <svg :width="size" :height="size" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
-      <g id="bottom-star">
+      <g class="bottom-star">
         <path
           d="M39.286883,33.960772c-6.044693,2.417601-7.991402,4.376919-10.393442,10.460772C26.491402,38.337691,24.544694,36.378373,18.5,33.960772C24.544694,31.543171,26.491402,29.583852,28.893441,23.5c2.402041,6.083852,4.348749,8.043171,10.393442,10.460772Z"
           transform="matrix(1 0 0 1 -5 -6)"
           fill="#8b5cf6"
         ></path>
       </g>
-      <g id="top-star">
+      <g class="top-star">
         <path
           d="M39.056802,33.844967c-5.977787,2.390837-7.902948,4.328466-10.278401,10.344967C26.402949,38.173434,24.477787,36.235805,18.5,33.844967C24.477787,31.454131,26.402949,29.516502,28.778401,23.5c2.375453,6.016502,4.300614,7.954131,10.278401,10.344967Z"
           transform="matrix(1 0 0 1 -5 -61)"
           fill="#8b5cf6"
         ></path>
       </g>
-      <g id="primary">
+      <g class="primary">
         <path
           d="M65.653886,47.229432c-13.71205,5.484135-18.128049,9.928695-23.576943,23.729431C36.62805,57.158127,32.212051,52.713567,18.5,47.229432C32.212051,41.745296,36.62805,37.300736,42.076943,23.5c5.448894,13.800736,9.864893,18.245296,23.576943,23.729432Z"
           transform="matrix(1.595951 0.008736 -0.00868 1.585695 -77.344676 -75.246035)"
@@ -26,14 +26,14 @@
         <path
           d="M 0 -90
       A 90 90 0 0 1 85 -30"
-          stroke="url(#sparkle-grad-2)"
+          :stroke="`url(#${gradientId})`"
           stroke-width="16"
           stroke-linecap="round"
           fill="transparent"
         ></path>
       </g>
       <defs>
-        <linearGradient id="sparkle-grad-2" x1="0" y1="-90" x2="85" y2="-30" gradientUnits="userSpaceOnUse">
+        <linearGradient :id="gradientId" x1="0" y1="-90" x2="85" y2="-30" gradientUnits="userSpaceOnUse">
           <stop stop-color="#E3E3E3" stop-opacity="0"></stop>
           <stop offset="0.33" stop-color="#E3E3E3" stop-opacity="0.3"></stop>
           <stop offset="0.66" stop-color="#8b5cf6" stop-opacity="0.5"></stop>
@@ -45,6 +45,8 @@
 </template>
 
 <script setup lang="ts">
+import { useId } from 'vue';
+
 interface Props {
   size?: number;
   alt?: string;
@@ -54,6 +56,8 @@ withDefaults(defineProps<Props>(), {
   size: 96,
   alt: 'loading',
 });
+
+const gradientId = useId();
 </script>
 
 <style scoped>
@@ -70,7 +74,7 @@ withDefaults(defineProps<Props>(), {
   }
 }
 
-#primary {
+.primary {
   animation: ai-loader-primary 2000ms infinite ease-in-out;
 }
 
@@ -86,11 +90,11 @@ withDefaults(defineProps<Props>(), {
   }
 }
 
-#top-star {
+.top-star {
   animation: ai-loader-secondary-top 2000ms infinite ease-in-out;
 }
 
-#bottom-star {
+.bottom-star {
   animation: ai-loader-secondary-bottom 2000ms infinite ease-in-out;
 }
 

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

@@ -1,5 +1,4 @@
 import VoiceToTextButton from './VoiceToTextButton.vue';
-import { __setVoiceToTextSessionDisabled } from '../../../useVoiceToText';
 
 export default {
   title: 'Components/VoiceToTextButton',
@@ -241,70 +240,3 @@ export const SideBySide = () => ({
 SideBySide.story = {
   name: 'Side by Side Comparison',
 };
-
-export const ForceUnsupported = () => ({
-  components: { VoiceToTextButton },
-  data() {
-    return {
-      // Reactive ping so the button re-renders when we flip the session flag.
-      // The composable's isSupported is reactive on its own, but the parent
-      // template uses :key to make the toggle obvious in Storybook.
-      tick: 0,
-    };
-  },
-  methods: {
-    forceUnsupported() {
-      __setVoiceToTextSessionDisabled(true);
-      this.tick += 1;
-    },
-    reset() {
-      __setVoiceToTextSessionDisabled(false);
-      this.tick += 1;
-    },
-  },
-  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
-        and the button hides itself. 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 :key="tick" 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)',
-};

package/src/useVoiceToText.ts

@@ -30,14 +30,6 @@ 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;
-
-// 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> = {
@@ -61,43 +53,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
-  }
-}
-
-/**
- * Test/Storybook helper: force the session-disabled latch on or off without
- * needing a real network error. Not part of the public consumer API.
- */
-// eslint-disable-next-line no-underscore-dangle
-export function __setVoiceToTextSessionDisabled(disabled: boolean): void {
-  setSessionDisabled(disabled);
-}
-
 /**
  * Singleton composable that wraps the Web Speech API (SpeechRecognition).
  * All calls to useVoiceToText() return the same shared instance.
@@ -112,8 +67,7 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
   const SpeechRecognitionCtor: typeof SpeechRecognition | null =
     typeof window !== 'undefined' ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
 
-  const sessionDisabledRef = getSessionDisabled();
-  const isSupported = computed(() => !!SpeechRecognitionCtor && !sessionDisabledRef.value);
+  const isSupported = computed(() => !!SpeechRecognitionCtor);
 
   // Initialize singleton once
   if (!isInitialized && SpeechRecognitionCtor) {
@@ -144,17 +98,6 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
         return;
       }
 
-      // Latch on first network error: Edge exposes SpeechRecognition but the
-      // backend doesn't actually work for most users. Hide the feature for the
-      // rest of the session rather than surfacing a recurring toast.
-      if (event.error === 'network') {
-        // eslint-disable-next-line no-console
-        console.warn('[useVoiceToText] network error — disabling voice input for this session');
-        isListening.value = false;
-        setSessionDisabled(true);
-        return;
-      }
-
       const message = ERROR_MESSAGES[event.error] || 'An error occurred with speech recognition.';
       error.value = message;
 

package/.storybook-static/assets/Auth-DT64t5h-.css

@@ -1 +0,0 @@
-.email-input[data-v-777ace40]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.password-input[data-v-777ace40]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-777ace40]{padding-left:2.5rem!important}.email-input[data-v-91cb4060]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-91cb4060]{padding-left:2.5rem!important}.password-input[data-v-524c1521]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-524c1521]{padding-left:2.5rem!important}