replace v5 with crypto.randomuuid

package.json

@@ -114,7 +114,6 @@
     "tailwind-merge": "^1.14.0",
     "unist-util-remove": "^4.0.0",
     "url-pattern": "^1.0.3",
-    "uuid": "^9.0.0",
     "zod": "^3.25.64"
   },
   "devDependencies": {
@@ -158,7 +157,6 @@
     "@types/sanitize-html": "^2.8.0",
     "@types/tar-fs": "^2.0.4",
     "@types/unist": "^3.0.0",
-    "@types/uuid": "^9.0.0",
     "@types/yargs": "^17.0.24",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",

src/lib/components/payload-input-with-encoding.svelte

@@ -9,8 +9,6 @@
 <script lang="ts">
   import { type Writable } from 'svelte/store';
 
-  import { v4 as uuid } from 'uuid';
-
   import Card from '$lib/holocene/card.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
@@ -19,7 +17,7 @@
 
   import PayloadInput from './payload-input.svelte';
 
-  export let id = uuid();
+  export let id: string = crypto.randomUUID();
   export let input: string;
   export let encoding: Writable<PayloadInputEncoding>;
   export let messageType: string;

src/lib/components/payload-input.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  import { v4 as uuid } from 'uuid';
 
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import FileInput from '$lib/holocene/file-input.svelte';
   import Label from '$lib/holocene/label.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
 
-  export let id = uuid();
+  export let id: string = crypto.randomUUID();
   export let error = false;
   export let input: string;
   export let label = translate('workflows.signal-payload-input-label');

src/lib/components/workflow/client-actions/batch-cancel-confirmation-modal.svelte

@@ -2,7 +2,6 @@
   import { writable } from 'svelte/store';
 
   import { getContext } from 'svelte';
-  import { v4 } from 'uuid';
 
   import Modal from '$lib/holocene/modal.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -28,7 +27,7 @@
   const reasonPlaceholder = getPlaceholder(Action.Cancel, identity);
   const jobId = writable('');
   const jobIdValid = writable(true);
-  let jobIdPlaceholder = v4();
+  let jobIdPlaceholder = crypto.randomUUID();
   let error = '';
 
   const { allSelected, cancelableWorkflows } =
@@ -38,7 +37,7 @@
     $reason = '';
     $jobId = '';
     $jobIdValid = true;
-    jobIdPlaceholder = v4();
+    jobIdPlaceholder = crypto.randomUUID();
   };
 
   $: if (open) resetForm();

src/lib/components/workflow/client-actions/batch-reset-confirmation-modal.svelte

@@ -2,7 +2,6 @@
   import { writable } from 'svelte/store';
 
   import { getContext } from 'svelte';
-  import { v4 } from 'uuid';
 
   import Modal from '$lib/holocene/modal.svelte';
   import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
@@ -26,7 +25,7 @@
   export let namespace: string;
   export let open = false;
   let error = '';
-  let jobIdPlaceholder = v4();
+  let jobIdPlaceholder = crypto.randomUUID();
   let resetType = writable<'first' | 'last'>('first');
   const identity = getIdentity();
   const reason = writable('');
@@ -42,7 +41,7 @@
     $reason = '';
     $jobId = '';
     $jobIdValid = true;
-    jobIdPlaceholder = v4();
+    jobIdPlaceholder = crypto.randomUUID();
   };
 
   $: if (open) resetForm();

src/lib/components/workflow/client-actions/batch-terminate-confirmation-modal.svelte

@@ -2,7 +2,6 @@
   import { writable } from 'svelte/store';
 
   import { getContext } from 'svelte';
-  import { v4 } from 'uuid';
 
   import Modal from '$lib/holocene/modal.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -28,7 +27,7 @@
   const reasonPlaceholder = getPlaceholder(Action.Terminate, identity);
   const jobId = writable('');
   const jobIdValid = writable(true);
-  let jobIdPlaceholder = v4();
+  let jobIdPlaceholder = crypto.randomUUID();
   let error = '';
 
   const { allSelected, terminableWorkflows } =
@@ -38,7 +37,7 @@
     $reason = '';
     $jobId = '';
     $jobIdValid = true;
-    jobIdPlaceholder = v4();
+    jobIdPlaceholder = crypto.randomUUID();
   };
 
   $: if (open) resetForm();

src/lib/components/workflow/client-actions/update-confirmation-modal.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import { writable, type Writable } from 'svelte/store';
 
-  import { v4 as uuid } from 'uuid';
-
   import { page } from '$app/stores';
 
   import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
@@ -38,7 +36,7 @@
   let success;
 
   let name = '';
-  let updateId = uuid();
+  let updateId = crypto.randomUUID();
   let input = '';
   let customUpdate = false;
   let encoding: Writable<PayloadInputEncoding> = writable(defaultEncoding);
@@ -71,7 +69,7 @@
 
       failure = result?.outcome?.failure;
       success = result?.outcome?.success || !failure;
-      updateId = uuid();
+      updateId = crypto.randomUUID();
 
       if (success) {
         toaster.push({

src/lib/holocene/accordion/accordion-light.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
-  import { v4 } from 'uuid';
-
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
 
@@ -16,7 +14,7 @@
     'data-testid'?: string;
   }
 
-  export let id: string = v4();
+  export let id: string = crypto.randomUUID();
   export let open = false;
   export let onToggle = undefined;
   export let icon: IconName | undefined = undefined;

src/lib/holocene/accordion/accordion.svelte

@@ -2,7 +2,6 @@
   import type { HTMLAttributes } from 'svelte/elements';
 
   import { twMerge as merge } from 'tailwind-merge';
-  import { v4 } from 'uuid';
 
   import Badge from '$lib/holocene/badge.svelte';
   import type { IconName } from '$lib/holocene/icon';
@@ -22,7 +21,7 @@
   }
 
   export let title: string;
-  export let id: string = v4();
+  export let id: string = crypto.randomUUID();
   export let subtitle = '';
   export let icon = null;
   export let open = false;

src/lib/pages/start-workflow.svelte

@@ -2,7 +2,6 @@
   import { writable, type Writable } from 'svelte/store';
 
   import { onMount } from 'svelte';
-  import { v4 } from 'uuid';
 
   import { page } from '$app/stores';
 
@@ -142,7 +141,7 @@
   };
 
   const generateRandomWorkflowId = () => {
-    workflowId = v4();
+    workflowId = crypto.randomUUID();
     updateQueryParameters({
       parameter: 'workflowId',
       value: workflowId,

src/lib/services/schedule-service.ts

@@ -1,5 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
-
 import { translate } from '$lib/i18n/translate';
 import type {
   CreateScheduleRequest,
@@ -138,7 +136,7 @@ export async function createSchedule({
       options: {
         method: 'POST',
         body: stringifyWithBigInt({
-          request_id: uuidv4(),
+          request_id: crypto.randomUUID(),
           ...body,
           ...(identity && { identity }),
         }),
@@ -179,7 +177,7 @@ export async function editSchedule({
     options: {
       method: 'POST',
       body: stringifyWithBigInt({
-        request_id: uuidv4(),
+        request_id: crypto.randomUUID(),
         ...body,
         ...(identity && { identity }),
       }),
@@ -218,7 +216,7 @@ export async function pauseSchedule({
       method: 'POST',
       body: stringifyWithBigInt({
         ...options,
-        request_id: uuidv4(),
+        request_id: crypto.randomUUID(),
         ...(identity && { identity }),
       }),
     },
@@ -254,7 +252,7 @@ export async function unpauseSchedule({
       method: 'POST',
       body: stringifyWithBigInt({
         ...options,
-        request_id: uuidv4(),
+        request_id: crypto.randomUUID(),
         ...(identity && { identity }),
       }),
     },
@@ -291,7 +289,7 @@ export async function triggerImmediately({
       method: 'POST',
       body: stringifyWithBigInt({
         ...options,
-        request_id: uuidv4(),
+        request_id: crypto.randomUUID(),
         ...(identity && { identity }),
       }),
     },
@@ -332,7 +330,7 @@ export async function backfillRequest({
       method: 'POST',
       body: stringifyWithBigInt({
         ...options,
-        request_id: uuidv4(),
+        request_id: crypto.randomUUID(),
         ...(identity && { identity }),
       }),
     },

src/lib/services/workflow-service.ts

@@ -1,7 +1,5 @@
 import { get } from 'svelte/store';
 
-import { v4 } from 'uuid';
-
 import { page } from '$app/stores';
 
 import {
@@ -469,7 +467,7 @@ export async function resetWorkflow({
       runId,
     },
     workflowTaskFinishEventId: eventId,
-    requestId: v4(),
+    requestId: crypto.randomUUID(),
     reason: formattedReason,
   };
 

src/lib/stores/toaster.ts

@@ -1,7 +1,5 @@
 import { get, writable, type Writable } from 'svelte/store';
 
-import { v4 } from 'uuid';
-
 import type { Toast, ToastPosition } from '$lib/types/holocene';
 
 const toasts = writable<Toast[]>([]);
@@ -21,7 +19,7 @@ const setPosition = (position: ToastPosition): void => {
 
 const push = (toast: Toast) => {
   const toastWithDefaults: Toast = {
-    id: v4(),
+    id: crypto.randomUUID(),
     duration: 3000,
     variant: 'primary',
     ...toast,

vitest-setup.ts

@@ -25,6 +25,12 @@ const BroadcastChannelMock = vi.fn(() => ({
 
 vi.stubGlobal('BroadcastChannel', BroadcastChannelMock);
 
+const cryptoMock = {
+  randomUUID: () => 'test-uuid-' + Math.random().toString(36).substring(2, 9),
+};
+
+vi.stubGlobal('crypto', cryptoMock);
+
 vi.mock('esm-env', () => {
   const BROWSER = true;
   const DEV = false;