@designcrowd/fe-shared-lib 1.8.0 → 1.8.2-voice-cumulative-transcript-1

package/.claude/scheduled_tasks.lock

@@ -0,0 +1 @@
+{"sessionId":"33dfc84f-253d-421e-b0c6-adbf8fc2c94d","pid":84069,"procStart":"339429","acquiredAt":1777334296981}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.8.0",
+  "version": "1.8.2-voice-cumulative-transcript-1",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/Icon/Icon.stories.js

@@ -216,6 +216,7 @@ export const IconSample = () => {
           { name: 'media' },
           { name: 'search' },
           { name: 'secure' },
+          { name: 'select-all' },
           { name: 'send' },
           { name: 'services' },
           { name: 'settings' },

package/src/atoms/components/Icon/icons/select-all.vue

@@ -1,7 +1,15 @@
 <template>
-  <g>
-    <rect x="0.75" y="0.75" width="14.5" height="14.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 4"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 8.5V4.5H8.5V5.80003H10V4C10 3.44772 9.55228 3 9 3H4C3.44772 3 3 3.44772 3 4V9C3 9.55228 3.44772 10 4 10H5.80005V8.5H4.5Z"/>
-    <rect x="6" y="6" width="7" height="7" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/>
+  <g clip-path="url(#clip0_3437_2353)">
+    <path
+      d="M13.9163 12.0003C13.9163 11.5862 14.2523 11.2505 14.6663 11.2503C15.0806 11.2503 15.4163 11.5861 15.4163 12.0003C15.4163 12.5718 15.4227 13.0046 15.3226 13.3783C15.0683 14.3273 14.3273 15.0683 13.3783 15.3226C13.0046 15.4227 12.5718 15.4163 12.0003 15.4163C11.5861 15.4163 11.2503 15.0806 11.2503 14.6663C11.2505 14.2523 11.5862 13.9163 12.0003 13.9163C12.6683 13.9163 12.8557 13.9105 12.9906 13.8743C13.4217 13.7587 13.7587 13.4217 13.8743 12.9906C13.9105 12.8557 13.9163 12.6683 13.9163 12.0003ZM1.32943 11.2503C1.74344 11.2475 2.08126 11.5805 2.08431 11.9945C2.08796 12.5202 2.10485 12.8174 2.14974 13.0257C2.2144 13.3254 2.44543 13.6173 2.76595 13.7806C2.93554 13.867 3.19601 13.9097 4.00521 13.9154C4.41941 13.9182 4.7532 14.257 4.75033 14.6712C4.74719 15.0852 4.40851 15.4182 3.99447 15.4154C3.2509 15.4102 2.62318 15.3905 2.08529 15.1165C1.4157 14.7754 0.855501 14.1374 0.68392 13.3421C0.601897 12.9618 0.587871 12.5175 0.584311 12.0052C0.581435 11.591 0.915226 11.2532 1.32943 11.2503ZM9.33333 13.6986C9.74751 13.6986 10.0833 14.0344 10.0833 14.4486C10.0833 14.8628 9.74755 15.1986 9.33333 15.1986H6.66634C6.25228 15.1984 5.91634 14.8627 5.91634 14.4486C5.9164 14.0345 6.25232 13.6987 6.66634 13.6986H9.33333ZM0.583334 9.33333V6.66634C0.58351 6.25228 0.919229 5.91634 1.33333 5.91634C1.74744 5.91634 2.08316 6.25228 2.08333 6.66634V9.33333C2.08333 9.74755 1.74755 10.0833 1.33333 10.0833C0.91912 10.0833 0.583334 9.74755 0.583334 9.33333ZM13.9163 9.33333V6.66634C13.9165 6.25239 14.2524 5.91652 14.6663 5.91634C15.0804 5.91634 15.4162 6.25228 15.4163 6.66634V9.33333C15.4163 9.74755 15.0806 10.0833 14.6663 10.0833C14.2523 10.0832 13.9163 9.74744 13.9163 9.33333ZM0.583334 4.00033C0.583334 3.42863 0.576938 2.99517 0.677084 2.62142C0.931395 1.67255 1.67255 0.931395 2.62142 0.677084C2.99517 0.576938 3.42863 0.583334 4.00033 0.583334C4.41439 0.58351 4.75033 0.919229 4.75033 1.33333C4.75033 1.74744 4.41439 2.08316 4.00033 2.08333C3.33234 2.08333 3.145 2.09019 3.01009 2.1263C2.57873 2.24189 2.24189 2.57873 2.1263 3.01009C2.09019 3.145 2.08333 3.33234 2.08333 4.00033C2.08316 4.41439 1.74744 4.75033 1.33333 4.75033C0.919229 4.75033 0.58351 4.41439 0.583334 4.00033ZM13.9163 4.00033C13.9163 3.33261 13.9104 3.14498 13.8743 3.01009C13.7588 2.57887 13.4217 2.242 12.9906 2.1263C12.8557 2.09016 12.6683 2.08334 12.0003 2.08333C11.5861 2.08333 11.2503 1.74755 11.2503 1.33333C11.2503 0.91912 11.5861 0.583334 12.0003 0.583334C12.5718 0.583332 13.0046 0.576996 13.3783 0.677084C14.3272 0.931347 15.0682 1.67253 15.3226 2.62142C15.4227 2.99517 15.4163 3.42863 15.4163 4.00033C15.4162 4.41439 15.0804 4.75033 14.6663 4.75033C14.2524 4.75015 13.9165 4.41428 13.9163 4.00033ZM9.33333 0.583334C9.74755 0.583334 10.0833 0.91912 10.0833 1.33333C10.0833 1.74755 9.74755 2.08333 9.33333 2.08333H6.66634C6.25228 2.08316 5.91634 1.74744 5.91634 1.33333C5.91634 0.919229 6.25228 0.58351 6.66634 0.583334H9.33333Z"
+    />
+    <path
+      d="M10.25 6.59961C10.25 6.30744 10.2498 6.13298 10.2393 6.00391C10.2294 5.88384 10.2143 5.87034 10.2227 5.88672C10.1987 5.83968 10.1603 5.80131 10.1133 5.77734C10.1297 5.78569 10.1162 5.77058 9.99609 5.76074C9.86702 5.7502 9.69256 5.75 9.40039 5.75H6.59961C6.30744 5.75 6.13298 5.7502 6.00391 5.76074C5.88384 5.77058 5.87034 5.78569 5.88672 5.77734C5.83968 5.80131 5.80131 5.83968 5.77734 5.88672C5.78569 5.87034 5.77058 5.88384 5.76074 6.00391C5.7502 6.13298 5.75 6.30744 5.75 6.59961V9.40039C5.75 9.69256 5.7502 9.86702 5.76074 9.99609C5.77058 10.1162 5.78569 10.1297 5.77734 10.1133C5.80131 10.1603 5.83968 10.1987 5.88672 10.2227C5.87034 10.2143 5.88384 10.2294 6.00391 10.2393C6.13298 10.2498 6.30744 10.25 6.59961 10.25H9.40039C9.69256 10.25 9.86702 10.2498 9.99609 10.2393C10.1162 10.2294 10.1297 10.2143 10.1133 10.2227C10.1603 10.1987 10.1987 10.1603 10.2227 10.1133C10.2143 10.1297 10.2294 10.1162 10.2393 9.99609C10.2498 9.86702 10.25 9.69256 10.25 9.40039V6.59961ZM11.75 9.40039C11.75 9.66789 11.7501 9.91389 11.7334 10.1182C11.716 10.3312 11.6769 10.5647 11.5596 10.7949C11.3918 11.124 11.124 11.3918 10.7949 11.5596C10.5647 11.6769 10.3312 11.716 10.1182 11.7334C9.91389 11.7501 9.66789 11.75 9.40039 11.75H6.59961C6.33211 11.75 6.08611 11.7501 5.88184 11.7334C5.66879 11.716 5.43527 11.6769 5.20508 11.5596C4.87597 11.3918 4.60818 11.124 4.44043 10.7949C4.32314 10.5647 4.28403 10.3312 4.2666 10.1182C4.24991 9.91389 4.25 9.66789 4.25 9.40039V6.59961C4.25 6.33211 4.24991 6.08611 4.2666 5.88184C4.28403 5.66879 4.32314 5.43527 4.44043 5.20508C4.60818 4.87597 4.87597 4.60818 5.20508 4.44043C5.43527 4.32314 5.66879 4.28403 5.88184 4.2666C6.08611 4.24991 6.33211 4.25 6.59961 4.25H9.40039C9.66789 4.25 9.91389 4.24991 10.1182 4.2666C10.3312 4.28403 10.5647 4.32314 10.7949 4.44043C11.124 4.60818 11.3918 4.87597 11.5596 5.20508C11.6769 5.43527 11.716 5.66879 11.7334 5.88184C11.7501 6.08611 11.75 6.33211 11.75 6.59961V9.40039Z"
+    />
   </g>
+  <defs>
+    <clipPath id="clip0_3437_2353">
+      <rect width="16" height="16" fill="white" />
+    </clipPath>
+  </defs>
 </template>

package/src/useVoiceToText.ts

@@ -79,7 +79,7 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
       let interimTranscript = '';
       let finalTranscript = '';
 
-      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+      for (let i = 0; i < event.results.length; i += 1) {
         const result = event.results[i];
         if (result.isFinal) {
           finalTranscript += result[0].transcript;
@@ -88,13 +88,8 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
         }
       }
 
-      if (finalTranscript) {
-        transcript.value = finalTranscript;
-        isFinal.value = true;
-      } else {
-        transcript.value = interimTranscript;
-        isFinal.value = false;
-      }
+      transcript.value = finalTranscript + interimTranscript;
+      isFinal.value = interimTranscript === '';
     };
 
     recognition.onerror = (event: SpeechRecognitionErrorEvent) => {

package/.playwright-cli/page-2026-04-15T02-26-54-483Z.yml

@@ -1,68 +0,0 @@
-- generic [ref=e3]:
-  - navigation "Global" [ref=e6]:
-    - generic [ref=e10]:
-      - generic [ref=e11]:
-        - link "Skip to canvas" [ref=e12] [cursor=pointer]:
-          - /url: "#storybook-preview-wrapper"
-        - link "Storybook" [ref=e14] [cursor=pointer]:
-          - /url: ./
-          - img "Storybook" [ref=e15]
-        - button "Shortcuts" [ref=e21] [cursor=pointer]:
-          - img [ref=e22]
-      - generic [ref=e25]: Search for components
-      - combobox "Search for components" [ref=e27]:
-        - generic:
-          - img
-        - searchbox "Search for components" [ref=e28]
-        - code: ⌃ K
-  - main [ref=e52]:
-    - generic [ref=e54]:
-      - generic [ref=e55]:
-        - button "Remount component" [ref=e56] [cursor=pointer]:
-          - img [ref=e57]
-        - button "Zoom in" [ref=e59] [cursor=pointer]:
-          - img [ref=e60]
-        - button "Zoom out" [ref=e63] [cursor=pointer]:
-          - img [ref=e64]
-        - button "Reset zoom" [ref=e67] [cursor=pointer]:
-          - img [ref=e68]
-        - button "Enable measure" [ref=e71] [cursor=pointer]:
-          - img [ref=e72]
-        - button "Apply outlines to the preview" [ref=e75] [cursor=pointer]:
-          - img [ref=e76]
-        - button "Change the size of the preview" [ref=e79] [cursor=pointer]:
-          - img [ref=e80]
-        - button "Vision simulator" [ref=e85] [cursor=pointer]:
-          - img [ref=e86]
-        - generic:
-          - img
-      - generic [ref=e90]:
-        - button "Go full screen" [ref=e91] [cursor=pointer]:
-          - img [ref=e92]
-        - link "Open canvas in new tab" [ref=e94] [cursor=pointer]:
-          - /url: iframe.html?id=components-voicetotextbutton--side-by-side
-          - img [ref=e95]
-        - button "Copy canvas link" [ref=e98] [cursor=pointer]:
-          - img [ref=e99]
-    - generic [ref=e103]:
-      - progressbar "Content is loading..." [ref=e105]
-      - generic [ref=e106]:
-        - link "Skip to sidebar" [ref=e107] [cursor=pointer]:
-          - /url: "#components-voicetotextbutton--side-by-side"
-        - iframe [ref=e108]:
-          
-  - generic [ref=e113]:
-    - tablist [ref=e115]:
-      - tab "Controls" [ref=e116] [cursor=pointer]:
-        - generic [ref=e118]: Controls
-      - tab "Actions" [ref=e119] [cursor=pointer]:
-        - generic [ref=e121]: Actions
-      - tab "Interactions" [ref=e122] [cursor=pointer]:
-        - generic [ref=e124]: Interactions
-      - tab "Accessibility" [ref=e125] [cursor=pointer]:
-        - generic [ref=e127]: Accessibility
-    - generic [ref=e130]:
-      - button "Change addon orientation [alt D]" [ref=e131] [cursor=pointer]:
-        - img [ref=e132]
-      - button "Hide addons [alt A]" [ref=e135] [cursor=pointer]:
-        - img [ref=e136]

package/.playwright-cli/page-2026-04-15T02-39-01-736Z.yml

@@ -1,26 +0,0 @@
-- generic [active] [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Start voice input" [ref=e10] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Start voice input" [ref=e17] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Start voice input" [ref=e24] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-39-10-233Z.yml

@@ -1,26 +0,0 @@
-- generic [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Start voice input" [ref=e10] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Start voice input" [active] [ref=e17] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Start voice input" [ref=e24] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-39-43-909Z.yml

@@ -1,26 +0,0 @@
-- generic [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Start voice input" [ref=e10] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Start voice input" [active] [ref=e17] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Start voice input" [ref=e24] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-40-54-188Z.yml

@@ -1,26 +0,0 @@
-- generic [active] [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Start voice input" [ref=e10] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Start voice input" [ref=e17] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Start voice input" [ref=e24] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-40-59-031Z.yml

@@ -1,26 +0,0 @@
-- generic [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Start voice input" [ref=e10] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Start voice input" [active] [ref=e17] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Start voice input" [ref=e24] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-51-10-941Z.yml

@@ -1,26 +0,0 @@
-- generic [active] [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Start voice input" [ref=e10] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Start voice input" [ref=e17] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Start voice input" [ref=e24] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-51-17-020Z.yml

@@ -1,26 +0,0 @@
-- generic [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Start voice input" [ref=e10] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Start voice input" [active] [ref=e17] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Start voice input" [ref=e24] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-51-42-403Z.yml

@@ -1,2 +0,0 @@
-- generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
-  - img [ref=e3]

package/.playwright-cli/page-2026-04-15T02-51-53-552Z.yml

@@ -1,26 +0,0 @@
-- generic [active] [ref=e7]:
-  - generic [ref=e9]:
-    - heading "Dark Variant - All States" [level=3] [ref=e10]
-    - generic [ref=e11]:
-      - generic [ref=e12]:
-        - button "Start voice input" [ref=e14] [cursor=pointer]:
-          - img [ref=e16]
-        - paragraph [ref=e18]: Small
-      - generic [ref=e19]:
-        - button "Start voice input" [ref=e21] [cursor=pointer]:
-          - img [ref=e23]
-        - paragraph [ref=e25]: Medium (default)
-      - generic [ref=e26]:
-        - button "Start voice input" [ref=e28] [cursor=pointer]:
-          - img [ref=e30]
-        - paragraph [ref=e32]: Large
-      - generic [ref=e33]:
-        - button "Start voice input" [disabled] [ref=e35] [cursor=pointer]:
-          - img [ref=e37]
-        - paragraph [ref=e39]: Disabled
-    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e1]:
-    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
-      - img [ref=e3]
-    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
-      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-51-54-631Z.yml

@@ -1,26 +0,0 @@
-- generic [ref=e7]:
-  - generic [ref=e9]:
-    - heading "Dark Variant - All States" [level=3] [ref=e10]
-    - generic [ref=e11]:
-      - generic [ref=e12]:
-        - button "Stop voice input" [active] [ref=e47] [cursor=pointer]:
-          - img [ref=e16]
-        - paragraph [ref=e18]: Small
-      - generic [ref=e19]:
-        - button "Stop voice input" [ref=e48] [cursor=pointer]:
-          - img [ref=e23]
-        - paragraph [ref=e25]: Medium (default)
-      - generic [ref=e26]:
-        - button "Stop voice input" [ref=e49] [cursor=pointer]:
-          - img [ref=e30]
-        - paragraph [ref=e32]: Large
-      - generic [ref=e33]:
-        - button "Stop voice input" [disabled] [ref=e50] [cursor=pointer]:
-          - img [ref=e37]
-        - paragraph [ref=e39]: Disabled
-    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e1]:
-    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
-      - img [ref=e3]
-    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
-      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-52-16-170Z.yml

@@ -1,26 +0,0 @@
-- generic [ref=e7]:
-  - generic [ref=e9]:
-    - heading "Dark Variant - All States" [level=3] [ref=e10]
-    - generic [ref=e11]:
-      - generic [ref=e12]:
-        - button "Stop voice input" [active] [ref=e47] [cursor=pointer]:
-          - img [ref=e16]
-        - paragraph [ref=e18]: Small
-      - generic [ref=e19]:
-        - button "Stop voice input" [ref=e48] [cursor=pointer]:
-          - img [ref=e23]
-        - paragraph [ref=e25]: Medium (default)
-      - generic [ref=e26]:
-        - button "Stop voice input" [ref=e49] [cursor=pointer]:
-          - img [ref=e30]
-        - paragraph [ref=e32]: Large
-      - generic [ref=e33]:
-        - button "Stop voice input" [disabled] [ref=e50] [cursor=pointer]:
-          - img [ref=e37]
-        - paragraph [ref=e39]: Disabled
-    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e1]:
-    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
-      - img [ref=e3]
-    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
-      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-52-17-246Z.yml

@@ -1,26 +0,0 @@
-- generic [active] [ref=e7]:
-  - generic [ref=e9]:
-    - heading "Dark Variant - All States" [level=3] [ref=e10]
-    - generic [ref=e11]:
-      - generic [ref=e12]:
-        - button "Stop voice input" [ref=e47] [cursor=pointer]:
-          - img [ref=e16]
-        - paragraph [ref=e18]: Small
-      - generic [ref=e19]:
-        - button "Stop voice input" [ref=e48] [cursor=pointer]:
-          - img [ref=e23]
-        - paragraph [ref=e25]: Medium (default)
-      - generic [ref=e26]:
-        - button "Stop voice input" [ref=e49] [cursor=pointer]:
-          - img [ref=e30]
-        - paragraph [ref=e32]: Large
-      - generic [ref=e33]:
-        - button "Stop voice input" [disabled] [ref=e50] [cursor=pointer]:
-          - img [ref=e37]
-        - paragraph [ref=e39]: Disabled
-    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e1]:
-    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
-      - img [ref=e3]
-    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
-      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-52-28-472Z.yml

@@ -1,26 +0,0 @@
-- generic [active] [ref=e7]:
-  - generic [ref=e9]:
-    - heading "Dark Variant - All States" [level=3] [ref=e10]
-    - generic [ref=e11]:
-      - generic [ref=e12]:
-        - button "Stop voice input" [ref=e47] [cursor=pointer]:
-          - img [ref=e16]
-        - paragraph [ref=e18]: Small
-      - generic [ref=e19]:
-        - button "Stop voice input" [ref=e48] [cursor=pointer]:
-          - img [ref=e23]
-        - paragraph [ref=e25]: Medium (default)
-      - generic [ref=e26]:
-        - button "Stop voice input" [ref=e49] [cursor=pointer]:
-          - img [ref=e30]
-        - paragraph [ref=e32]: Large
-      - generic [ref=e33]:
-        - button "Stop voice input" [disabled] [ref=e50] [cursor=pointer]:
-          - img [ref=e37]
-        - paragraph [ref=e39]: Disabled
-    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e1]:
-    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
-      - img [ref=e3]
-    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
-      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-53-16-554Z.yml

@@ -1,26 +0,0 @@
-- generic [active] [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Start voice input" [ref=e10] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Start voice input" [ref=e17] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Start voice input" [ref=e24] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-53-22-178Z.yml

@@ -1,26 +0,0 @@
-- generic [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Stop voice input" [ref=e49] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Stop voice input" [active] [ref=e50] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Stop voice input" [ref=e51] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Stop voice input" [disabled] [ref=e52] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-53-34-973Z.yml

@@ -1,26 +0,0 @@
-- generic [ref=e3]:
-  - generic [ref=e5]:
-    - heading "Dark Variant - All States" [level=3] [ref=e6]
-    - generic [ref=e7]:
-      - generic [ref=e8]:
-        - button "Start voice input" [ref=e53] [cursor=pointer]:
-          - img [ref=e12]
-        - paragraph [ref=e14]: Small
-      - generic [ref=e15]:
-        - button "Start voice input" [active] [ref=e54] [cursor=pointer]:
-          - img [ref=e19]
-        - paragraph [ref=e21]: Medium (default)
-      - generic [ref=e22]:
-        - button "Start voice input" [ref=e55] [cursor=pointer]:
-          - img [ref=e26]
-        - paragraph [ref=e28]: Large
-      - generic [ref=e29]:
-        - button "Start voice input" [disabled] [ref=e56] [cursor=pointer]:
-          - img [ref=e33]
-        - paragraph [ref=e35]: Disabled
-    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
-  - generic [ref=e37]:
-    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
-      - img [ref=e39]
-    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
-      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T06-15-29-589Z.yml

@@ -1,68 +0,0 @@
-- generic [ref=e3]:
-  - navigation "Global" [ref=e6]:
-    - generic [ref=e10]:
-      - generic [ref=e11]:
-        - link "Skip to canvas" [ref=e12] [cursor=pointer]:
-          - /url: "#storybook-preview-wrapper"
-        - link "Storybook" [ref=e14] [cursor=pointer]:
-          - /url: ./
-          - img "Storybook" [ref=e15]
-        - button "Shortcuts" [ref=e21] [cursor=pointer]:
-          - img [ref=e22]
-      - generic [ref=e25]: Search for components
-      - combobox "Search for components" [ref=e27]:
-        - generic:
-          - img
-        - searchbox "Search for components" [ref=e28]
-        - code: ⌃ K
-  - main [ref=e52]:
-    - generic [ref=e54]:
-      - generic [ref=e55]:
-        - button "Remount component" [ref=e56] [cursor=pointer]:
-          - img [ref=e57]
-        - button "Zoom in" [ref=e59] [cursor=pointer]:
-          - img [ref=e60]
-        - button "Zoom out" [ref=e63] [cursor=pointer]:
-          - img [ref=e64]
-        - button "Reset zoom" [ref=e67] [cursor=pointer]:
-          - img [ref=e68]
-        - button "Enable measure" [ref=e71] [cursor=pointer]:
-          - img [ref=e72]
-        - button "Apply outlines to the preview" [ref=e75] [cursor=pointer]:
-          - img [ref=e76]
-        - button "Change the size of the preview" [ref=e79] [cursor=pointer]:
-          - img [ref=e80]
-        - button "Vision simulator" [ref=e85] [cursor=pointer]:
-          - img [ref=e86]
-        - generic:
-          - img
-      - generic [ref=e90]:
-        - button "Go full screen" [ref=e91] [cursor=pointer]:
-          - img [ref=e92]
-        - link "Open canvas in new tab" [ref=e94] [cursor=pointer]:
-          - /url: iframe.html?id=components-voicetotextbutton--side-by-side
-          - img [ref=e95]
-        - button "Copy canvas link" [ref=e98] [cursor=pointer]:
-          - img [ref=e99]
-    - generic [ref=e103]:
-      - progressbar "Content is loading..." [ref=e105]
-      - generic [ref=e106]:
-        - link "Skip to sidebar" [ref=e107] [cursor=pointer]:
-          - /url: "#components-voicetotextbutton--side-by-side"
-        - iframe [ref=e108]:
-          
-  - generic [ref=e113]:
-    - tablist [ref=e115]:
-      - tab "Controls" [ref=e116] [cursor=pointer]:
-        - generic [ref=e118]: Controls
-      - tab "Actions" [ref=e119] [cursor=pointer]:
-        - generic [ref=e121]: Actions
-      - tab "Interactions" [ref=e122] [cursor=pointer]:
-        - generic [ref=e124]: Interactions
-      - tab "Accessibility" [ref=e125] [cursor=pointer]:
-        - generic [ref=e127]: Accessibility
-    - generic [ref=e130]:
-      - button "Change addon orientation [alt D]" [ref=e131] [cursor=pointer]:
-        - img [ref=e132]
-      - button "Hide addons [alt A]" [ref=e135] [cursor=pointer]:
-        - img [ref=e136]

package/docs/voice-to-text-discussion.md

@@ -1,330 +0,0 @@
-# Slack Thread: #growth-it-runs-on-local-team
-
-**Date:** 2026-04-09
-**Thread link:** https://designcrowd.slack.com/archives/C02955Q465R/p1775707213792599
-**Participants:** Zach, Loïc, ap, pmac, Mik
-
----
-
-## Zach — 4:00 AM
-
-**@Loïc** for https://designcrowd.atlassian.net/browse/GT-9885 there is a chromium package that handles voice to text really well. Works on Edge, Chrome and Safari but not other browsers. I've slapped together a PoC here https://gt-9885.bc.designcrowd.ninja/ . Nothing I need you to do, just wanted you to be aware so you can coordinate/plan appropriately.
-
-![image.png](voice-to-text-discussion-attachments/image.png)
-
----
-
-## Loïc — 4:41 AM
-
-Thanks Zach. Have you got a link to that package?
-
-Doesn’t seem to work in other languages but maybe relies on the browser set language?
-
-> Works on Edge, Chrome and Safari but not other browsers
-What other browsers would that not work on? Would imagine it would cover most if built on Chromium?
-
----
-
-## Loïc — 4:43 AM
-
-> Doesn’t seem to work in other languages but maybe relies on the browser set language?
-GPT voice to text works fine on the same browser for me when I speak in French.
-
----
-
-## Zach — 4:46 AM
-
-https://vueuse.org/core/useSpeechRecognition/ is the package. This is the browser support breakdown https://caniuse.com/mdn-api_speechrecognitionevent. It uses https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API under the hood. Skimming the docs I dont see anything about language support.
-
-![image.png](voice-to-text-discussion-attachments/image_1.png)
-
----
-
-## Loïc — 4:49 AM
-
-GPT:
-> Short answer: **yes — but not by itself.**
-> How `useSpeechRecognition` handles languages
-> The VueUse composable is just a thin wrapper around the browser’s **Web Speech API**. It lets you *set* the language via the `lang` option:
-> ```useSpeechRecognition({
->   lang: 'fr-FR' // or 'es-ES', 'de-DE', etc.
-> })```
-> So technically:
-> :white_check_mark: You **can use other languages** by changing `lang`
-> • :exclamation: But support depends entirely on the **browser + underlying speech engine** ([vueuse.org](http://vueuse.org))
-> 
-> What actually determines language support
-> The real behavior comes from the browser’s `SpeechRecognition` implementation:
-> Chrome (and Chromium browsers) → best support, many languages
-> Safari → limited support
-> • Firefox → basically **no support** for this API
-> VueUse just passes your config through — it doesn’t add language models itself. ([vueuse.org](http://vueuse.org))
-> 
-> Practical implications
-> • You can switch languages dynamically:
-> ```const lang = ref('en-US')
-> 
-> const speech = useSpeechRecognition({ lang })```
-> • But:
-> Some languages may be **less accurate**
-> Some may **not work at all** depending on browser
-> Offline support is usually **not available**
-> 
-> TL;DR
-> • :white_check_mark: Works with multiple languages via `lang`
-> • :exclamation: Limited by browser + Web Speech API support
-> • :x: Not a full multilingual engine on its own
-> 
-> If you tell me what languages you want (e.g. French + English switching), I can suggest the most reliable setup or alternatives (like Whisper, Vosk, etc.).
-
----
-
-## Zach — 4:49 AM
-
-Oh thats super easy.
-
----
-
-## Zach — 4:50 AM
-
-We always have the users language handy
-
----
-
-## Loïc — 4:50 AM
-
-:+1:
-
----
-
-## Loïc — 4:50 AM
-
-No Firefox support is probably the biggest unknown here but if we are able to hide the functionality if the browser is not supported then that should be fine.
-
----
-
-## Loïc — 4:51 AM
-
-FYI **@ap** ^
-
----
-
-## Zach — 4:52 AM
-
-Hiding should also be easy. It's already working in my demo.
-
----
-
-## ap — 5:02 AM
-
-we could extend this to send to a cloud service to do the speech to text for firefox?
-
----
-
-## Zach — 5:04 AM
-
-Thats where it starts to get tricky. We would need to use/build a cloud service if we wanted to support firefox. It's just a lot more effort.
-
----
-
-## Zach — 5:04 AM
-
-Also this is free
-
----
-
-## ap — 5:10 AM
-
-i was thinking as a fallback at a later stage once we understand the take up from customers
-
----
-
-## Loïc — 12:13 AM
-
-**@pmac**
-
----
-
-## Zach — 3:28 AM
-
-https://gt-9885.dcom.designcrowd.ninja/ **@Loïc** **@ap** Check it out.
-1. Use Chrome or Safari
-2. Make sure to set the AB test variations like in the screen shot. 
-3. First click should ask for microphone permissions
-4. It will transcribe into the input in real time
-5. Click to stop
-6. ta daaa
-**@ap** It is very easy to wire up: https://github.com/designcrowd/BrandCrowd.Net/pull/12884/changes#diff-8cf5baa45c1f1700d712ccef3bc0485214f743b907c9916c9bc6372b9475bbf8
-
-• It will hide itself if the browser does not support it
-• Language support is there but not tested yet
-• emits events for interim transcript chunks and the final transcript
-• Easy to drop in and wire up to any existing input
-• Its only styled for the new ai prompt input at the moment. We will need to add style variations in fe-shared-lib.
-Lets me know if there are any questions/changes you want. If not, I will wrap it up and get it to QA.
-
-![image.png](voice-to-text-discussion-attachments/image_2.png)
-
----
-
-## pmac — 3:32 AM
-
-just catching up .. this is client side and only works in some browsers?
-
----
-
-## Zach — 3:32 AM
-
-correct
-
----
-
-## pmac — 3:39 AM
-
-.. and I assume you chose this path as it was quick to implement
-
----
-
-## pmac — 3:39 AM
-
-I have a feeling that we're going to see much better transcription using the newer speech to text models
-
----
-
-## pmac — 3:47 AM
-
-what does the server side solution look like, that would work for all browsers? I suppose we'd be sending wav/mp3 to a backend transcription.
-
----
-
-## Zach — 1:10 AM
-
-If we wanted to do server side we have a few options. Best choice is to buy something off the shelf. Having made my own local tool for voice to text using whisper, there are a bunch of issues we just dont want to handle. Whisper starts to hallucinate pretty badly after about 90 seconds, so we would have to handle streaming, chunking and a bunch of other stuff.
-
-I would want to find something that we just import a package and set an API key somewhere and then its done.
-
-The approach using the built in browser tools was so easy and fast I think it makes sense to try it out first and see what kind of returns we get. Also, all phone keyboards have voice to text built in that I think most people prefer to use.
-
-Where we are at now with the browser solution is to just do a once over on styling and nail down the AB test variation details and timing. It's code complete.
-
----
-
-## pmac — 1:13 AM
-
-for server side, I would be expecting us to use something like the AWS Transcribe product
-
----
-
-## Zach — 1:15 AM
-
-Thats the one I was looking at before I stumbled onto the browser native option.
-
----
-
-## Zach — 1:17 AM
-
-Looks like the price is $1.44/hr for streaming transcription.
-
----
-
-## pmac — 1:18 AM
-
-lets leave it in the back pocket
-
----
-
-## Loïc — 1:41 AM
-
-works well in French
-
----
-
-## Loïc — 1:42 AM
-
-the UI doesn’t look like what we had in designs?
-
----
-
-## Zach — 1:43 AM
-
-Yea, I can't find designs for the new AI long prompt input we've got.
-
----
-
-## Zach — 1:44 AM
-
-If you are happy with the design we've got in the figma for the other style I can apply to both.
-
----
-
-## Loïc — 1:44 AM
-
-these ones in the ticket https://www.figma.com/design/gz0bEUjboSGaAMMtalOqVS/Maker---Speech-to-Text-in-AI?node-id=7-636&t=cIYxelUljv4Qp17M-1 ?
-
-![Screenshot 2026-04-15 at 11.44.18 am.png](voice-to-text-discussion-attachments/Screenshot 2026-04-15 at 11.44.18 am.png)
-
----
-
-## Zach — 1:45 AM
-
-You sure you want that same design for the dark theme AI prompt as well?
-
----
-
-## Zach — 1:45 AM
-
-Happy to do it, I can just implement both dark and light so it looks like the figma designs just with reversed colors on the AI prompt.
-
----
-
-## pmac — 1:48 AM
-
-**@Zach** how do I get it to show for me?
-
----
-
-## Zach — 1:49 AM
-
-In the bottom right there is an "AB" button. Click it and set these two campaigns to variation 1.
-
-![image.png](voice-to-text-discussion-attachments/image_3.png)
-
----
-
-## Loïc — 1:49 AM
-
-**@Mik** see Zach’s comment about dark theme AI prompt
-
----
-
-## Mik — 2:00 AM
-
-hey **@Zach**, ideally it should look like this in dark mode - is this also what you envision?
-
-![image.png](voice-to-text-discussion-attachments/image_4.png)
-
----
-
-## Loïc — 2:01 AM
-
-have you got a screen for when it’s recording?
-
----
-
-## Zach — 2:06 AM
-
-**@Mik** that was what I was thinking.  We've already got the microphone icon so all good there. Is the light grey circle around the microphone icon indicating when its recording?
-
----
-
-## Mik — 2:08 AM
-
-yes, it's recording
-
----
-
-## Zach — 2:09 AM
-
-I will get the UI tightened up then lets everyone know when its ready for another review.
-
----