function createCancellableRequest(endpoint: string) {
  const controller = new AbortController()
 
  const requestPromise = fetch(endpoint, {
    signal: controller.signal,
  })
    .then((response) => {
      // Handle the response
    })
    .catch((error) => {
      // Check if this was a cancellation
      if (error.name === 'AbortError') {
        return { cancelled: true, reason: controller.signal.reason }
      }
      // Otherwise rethrow the error
      throw error
    })
 
  // Return both the promise and cancellation function
  return {
    dataPromise: requestPromise,
    cancelRequest: (reason = 'User cancelled') => controller.abort(reason),
  }
}
 
// Usage
const { dataPromise, cancelRequest } = createCancellableRequest('/api/users')
 
// Later, if conditions change
cancelRequest('User navigated away')

function drag(element: HTMLElement) {
  // One controller manages multiple related listeners
  const controller = new AbortController()
  const { signal } = controller
 
  // Start dragging on mouse down
  element.addEventListener(
    'mousedown',
    (event) => {
      // Handle mouse down
    },
    { signal }
  )
 
  // Track mouse movement
  window.addEventListener(
    'mousemove',
    (event) => {
      // Handle mouse movement
    },
    { signal }
  )
 
  // End dragging on mouse up
  window.addEventListener(
    'mouseup',
    () => {
      // Handle mouse up
    },
    { signal }
  )
 
  // Return method to disable all drag functionality at once
  return () => controller.abort('Drag functionality disabled')
}
 
// Enable dragging for an element
const stopDragging = drag(document.getElementById('draggable-panel'))
 
// When no longer needed (e.g., in component cleanup)
stopDragging()

async function fetchWithTimeout(url, timeoutMs = 5000) {
  // Create a signal that automatically aborts after timeoutMs
  const timeoutSignal = AbortSignal.timeout(timeoutMs)
 
  try {
    const response = await fetch(url, { signal: timeoutSignal })
    return await response.json()
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error(`Request timed out after ${timeoutMs}ms`)
    }
    throw error
  }
}

function createMultiSourceOperation() {
  // Create different abort controllers for different cancellation sources
  const userController = new AbortController()
  const systemController = new AbortController()
  const timeoutSignal = AbortSignal.timeout(8000)
 
  // Create a combined signal that aborts if any source aborts
  const combinedSignal = AbortSignal.any([
    userController.signal,
    systemController.signal,
    timeoutSignal,
  ])
 
  // Start the operation using the combined signal
  const operationPromise = fetch('/api/resource', {
    signal: combinedSignal,
  })
    .then((res) => res.json())
    .catch((error) => {
      if (error.name === 'AbortError') {
        // We can inspect combinedSignal.reason to determine the source
        return {
          cancelled: true,
          source: determineCancellationSource(combinedSignal.reason),
        }
      }
      throw error
    })
 
  // Helper to determine which controller triggered the abort
  function determineCancellationSource(reason) {
    if (userController.signal.aborted) return 'user'
    if (systemController.signal.aborted) return 'system'
    if (timeoutSignal.aborted) return 'timeout'
    return 'unknown'
  }
 
  return {
    result: operationPromise,
    cancelTriggers: {
      userCancel: () => userController.abort('User requested cancellation'),
      systemCancel: () => systemController.abort('System initiated cancellation'),
    },
  }
}

function executeConditionally(condition, operationFn) {
  // Create a controller - might be immediately aborted
  const controller = new AbortController()
 
  // If condition fails, abort immediately
  if (!condition) {
    controller.abort('Condition not met, operation skipped')
  }
 
  // Execute the operation with the signal
  try {
    return operationFn(controller.signal)
  } catch (error) {
    if (error.name === 'AbortError') {
      return { skipped: true, reason: error.message }
    }
    throw error
  }
}
 
// Usage
const result = executeConditionally(userHasPermission, (signal) =>
  fetch('/api/restricted-data', { signal })
)