diff --git a/.cursor/rules/headless-components.mdc b/.cursor/rules/headless-components.mdc
new file mode 100644
index 000000000..976630919
--- /dev/null
+++ b/.cursor/rules/headless-components.mdc
@@ -0,0 +1,114 @@
+---
+description: 
+globs: packages/@uppy/components/src/**
+alwaysApply: false
+---
+# Headless components
+
+You are an expert at making headless UI components in Preact, similar to libraries like shadcn, except we don't rely on packages like radix.
+
+## Goal
+
+Making headless components in Preact for the open source Uppy file uploader and framework specific hooks. We want to give flexbility to users of this library by rendering sensible UI defaults and hooks that abstract Uppy functionality to completely build your own UI.
+
+Another way to give flexibility is to add data attributes selectively to some HTML elements. These can be used with CSS selectors by users of this library to conditionally apply styles:
+
+```html
+<button
+  type="button"
+  data-uppy-element="upload-button"
+  data-state={ctx.status}
+></button>
+```
+
+## How to build these components
+
+It's important to understand that an automated build script (bin/build-components.mjs) generates framework-specific wrappers for these Preact components.
+
+Here is an example from the React wrapper created by the script.
+
+```tsx
+import { useEffect, useRef, useContext, createElement as h } from 'react'
+import {
+  Dropzone as PreactDropzone,
+  type DropzoneProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { UppyContext } from './UppyContextProvider.js'
+
+export default function Dropzone(props: Omit<DropzoneProps, 'ctx' | 'render'>) {
+  const ref = useRef(null)
+  const ctx = useContext(UppyContext)
+
+  useEffect(() => {
+    if (ref.current) {
+      preactRender(
+        preactH(PreactDropzone, {
+          ...props,
+          ctx,
+        } satisfies DropzoneProps),
+        ref.current,
+      )
+    }
+  }, [ctx, props])
+
+  return <div ref={ref} />
+}
+```
+
+You don't have to worry about how these wrappers are created but it's important to know when building the Preact components that you will always receive a `ctx` prop to work with. This is its type:
+
+```ts
+import type Uppy from '@uppy/core'
+export type UploadStatus =
+  | 'init'
+  | 'ready'
+  | 'uploading'
+  | 'paused'
+  | 'error'
+  | 'complete'
+export type UppyContext = {
+  uppy: Uppy | undefined
+  status: UploadStatus
+  progress: number
+}
+```
+
+## Styling
+
+Styling is done with Tailwind CSS 4.x. There is no Tailwind config file.
+
+**IMPORTANT**: all classes have the `uppy:` prefix. Example: `bg-red-500` should become `uppy:bg-red-500`.
+
+Use `clsx` for conditional styles.
+
+```js
+import clsx from 'clsx';
+// or
+import { clsx } from 'clsx';
+
+// Strings (variadic)
+clsx('foo', true && 'bar', 'baz');
+//=> 'foo bar baz'
+
+// Objects
+clsx({ foo:true, bar:false, baz:isTrue() });
+//=> 'foo baz'
+
+// Objects (variadic)
+clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
+//=> 'foo --foobar'
+
+// Arrays
+clsx(['foo', 0, false, 'bar']);
+//=> 'foo bar'
+
+// Arrays (variadic)
+clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
+//=> 'foo bar baz hello there'
+
+// Kitchen sink (with nesting)
+clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
+//=> 'foo bar hello world cya'
+```
\ No newline at end of file
diff --git a/.cursor/rules/svelte.mdc b/.cursor/rules/svelte.mdc
new file mode 100644
index 000000000..15f07d627
--- /dev/null
+++ b/.cursor/rules/svelte.mdc
@@ -0,0 +1,78 @@
+---
+description: 
+globs: packages/@uppy/svelte/**,examples/sveltekit/**
+alwaysApply: false
+---
+I'm using svelte 5 instead of svelte 4 here is an overview of the changes.
+
+## Overview of Changes
+
+Svelte 5 introduces runes, a set of advanced primitives for controlling reactivity. The runes replace certain non-runes features and provide more explicit control over state and effects.
+
+Snippets, along with render tags, help create reusable chunks of markup inside your components, reducing duplication and enhancing maintainability.
+
+## Event Handlers in Svelte 5
+
+In Svelte 5, event handlers are treated as standard HTML properties rather than Svelte-specific directives, simplifying their use and integrating them more closely with the rest of the properties in the component.
+
+### Svelte 4 vs. Svelte 5:
+
+**Before (Svelte 4):**
+```html
+<script>
+  let count = 0;
+  $: double = count * 2;
+  $: {
+    if (count > 10) alert('Too high!');
+  }
+</script>
+<button on:click={() => count++}> {count} / {double}</button>
+```
+
+**After (Svelte 5):**
+```html
+<script>
+  import { $state, $effect, $derived } from 'svelte';
+  
+  // Define state with runes
+  let count = $state(0);
+  
+  // Option 1: Using $derived for computed values
+  let double = $derived(count * 2);
+  
+  // Reactive effects using runes
+  $effect(() => {
+    if (count > 10) alert('Too high!');
+  });
+</script>
+
+<!-- Standard HTML event attributes instead of Svelte directives -->
+<button onclick={() => count++}>
+  {count} / {double}
+</button>
+
+<!-- Alternatively, you can compute values inline -->
+<!-- <button onclick={() => count++}>
+  {count} / {count * 2}
+</button> -->
+```
+
+## Key Differences:
+
+1. **Reactivity is Explicit**: 
+   - Svelte 5 uses `$state()` to explicitly mark reactive variables
+   - `$derived()` replaces `$:` for computed values 
+   - `$effect()` replaces `$: {}` blocks for side effects
+
+2. **Event Handling is Standardized**:
+   - Svelte 4: `on:click={handler}`
+   - Svelte 5: `onclick={handler}`
+
+3. **Import Runes**: 
+   - All runes must be imported from 'svelte': `import { $state, $effect, $derived, $props, $slots } from 'svelte';`
+
+4. **No More Event Modifiers**:
+   - Svelte 4: `on:click|preventDefault={handler}`
+   - Svelte 5: `onclick={e => { e.preventDefault(); handler(e); }}`
+
+This creates clearer, more maintainable components compared to Svelte 4's previous syntax by making reactivity explicit and using standardized web platform features.
\ No newline at end of file
diff --git a/.cursor/rules/uppy-core.mdc b/.cursor/rules/uppy-core.mdc
new file mode 100644
index 000000000..862b6dab0
--- /dev/null
+++ b/.cursor/rules/uppy-core.mdc
@@ -0,0 +1,149 @@
+---
+description: Read this when you are about to use the Uppy class from @uppy/core
+globs: 
+alwaysApply: false
+---
+# Uppy Core Summary
+
+If you need to reference or work with the `Uppy` class from `@uppy/core`, here is an high-level overview of the class.
+
+## `Uppy<M extends Meta, B extends Body>` Class
+
+A modular file uploader. Manages plugins, state, events, and file handling.
+
+**Generics:**
+
+*   `M`: Metadata object shape associated with files (`Meta`).
+*   `B`: Body object shape associated with files (`Body`).
+
+**Key Public Properties:**
+
+*   `opts: NonNullableUppyOptions<M, B>`: The fully resolved Uppy options.
+*   `store: Store<State<M, B>>`: The state management store (defaults to `DefaultStore`).
+*   `i18n: I18n`: The translation function.
+*   `i18nArray: Translator['translateArray']`: The array translation function.
+*   `locale: Locale`: The active locale object.
+
+**Constructor:**
+
+*   `constructor(opts?: UppyOptionsWithOptionalRestrictions<M, B>)`
+
+**Core Public Methods:**
+
+*   `use<T extends typeof BasePlugin<any, M, B>>(Plugin: T, ...args: OmitFirstArg<ConstructorParameters<T>>): this`: Adds a plugin instance.
+*   `getPlugin<T extends UnknownPlugin<M, B> = UnknownPlugin<M, B>>(id: string): T | undefined`: Retrieves a plugin instance by ID.
+*   `iteratePlugins(method: (plugin: UnknownPlugin<M, B>) => void): void`: Executes a function on all installed plugins.
+*   `removePlugin(instance: UnknownPlugin<M, B>): void`: Removes a plugin instance.
+*   `addFile(file: File | MinimalRequiredUppyFile<M, B>): UppyFile<M, B>['id']`: Adds a single file.
+*   `addFiles(fileDescriptors: MinimalRequiredUppyFile<M, B>[]): void`: Adds multiple files.
+*   `removeFile(fileID: string): void`: Removes a file by ID.
+*   `removeFiles(fileIDs: string[]): void`: Removes multiple files by ID.
+*   `getFile(fileID: string): UppyFile<M, B>`: Retrieves a file object by ID.
+*   `getFiles(): UppyFile<M, B>[]`: Retrieves all file objects as an array.
+*   `setOptions(newOpts: MinimalRequiredOptions<M, B>): void`: Updates Uppy options.
+*   `setState(patch?: Partial<State<M, B>>): void`: Updates the Uppy state.
+*   `getState(): State<M, B>`: Retrieves the current Uppy state.
+*   `setFileState(fileID: string, state: Partial<UppyFile<M, B>>): void`: Updates the state for a specific file.
+*   `setMeta(data: Partial<M>): void`: Merges metadata into the global `state.meta` and all file `meta` objects.
+*   `setFileMeta(fileID: string, data: Partial<M>): void`: Merges metadata into a specific file's `meta` object.
+*   `upload(): Promise<NonNullable<UploadResult<M, B>> | undefined>`: Starts the upload process for all new files.
+*   `retryUpload(fileID: string): Promise<UploadResult<M, B> | undefined>`: Retries a failed upload for a specific file.
+*   `retryAll(): Promise<UploadResult<M, B> | undefined>`: Retries all failed uploads.
+*   `cancelAll(): void`: Cancels all uploads and removes all files.
+*   `pauseResume(fileID: string): boolean | undefined`: Toggles pause/resume state for a resumable upload.
+*   `pauseAll(): void`: Pauses all resumable uploads.
+*   `resumeAll(): void`: Resumes all paused uploads.
+*   `info(message: string | { message: string; details?: string | Record<string, string> }, type?: LogLevel, duration?: number): void`: Displays an informational message via UI plugins.
+*   `hideInfo(): void`: Hides the oldest info message.
+*   `log(message: unknown, type?: 'error' | 'warning'): void`: Logs a message using the configured logger.
+*   `on<K extends keyof UppyEventMap<M, B>>(event: K, callback: UppyEventMap<M, B>[K]): this`: Registers an event listener.
+*   `off<K extends keyof UppyEventMap<M, B>>(event: K, callback: UppyEventMap<M, B>[K]): this`: Unregisters an event listener.
+*   `emit<T extends keyof UppyEventMap<M, B>>(event: T, ...args: Parameters<UppyEventMap<M, B>[T]>): void`: Emits an event.
+*   `destroy(): void`: Uninstalls all plugins and cleans up the Uppy instance.
+
+**Internal Lifecycle Methods (Called by Uppy):**
+
+*   `addPreProcessor(fn: Processor): void`
+*   `removePreProcessor(fn: Processor): boolean`
+*   `addPostProcessor(fn: Processor): void`
+*   `removePostProcessor(fn: Processor): boolean`
+*   `addUploader(fn: Processor): void`
+*   `removeUploader(fn: Processor): boolean`
+
+---
+
+## Key Associated Types
+
+*   **`UppyFile<M extends Meta, B extends Body>`**: Represents a file within Uppy.
+    *   `id: string`: Unique file ID.
+    *   `source?: string`: Source plugin ID.
+    *   `name: string`: File name.
+    *   `type?: string`: MIME type.
+    *   `data: Blob | File`: The actual file data.
+    *   `meta: M & { name: string, type: string }`: User and Uppy metadata.
+    *   `size: number | null`: File size in bytes.
+    *   `isRemote: boolean`: If the file is from a remote source (Companion).
+    *   `remote?: { requestClientId: string, ... }`: Remote source details.
+    *   `progress: FileProgressStarted | FileProgressNotStarted`: Upload progress state.
+    *   `error?: string`: Error message if upload failed.
+    *   `isPaused?: boolean`: If upload is paused (for resumable uploads).
+    *   `isGhost?: boolean`: If file is restored without data (Golden Retriever).
+    *   `response?: { status: number, body: B, uploadURL?: string, ... }`: Upload response details.
+    *   `preview?: string`: URL to a preview image.
+    *   `[key: string]: any`: Extensible with plugin-specific state.
+
+*   **`State<M extends Meta, B extends Body>`**: The main Uppy state object.
+    *   `files: { [fileID: string]: UppyFile<M, B> }`: Object map of files by ID.
+    *   `currentUploads: { [uploadID: string]: CurrentUpload<M, B> }`: Map of active uploads.
+    *   `capabilities: { uploadProgress: boolean, individualCancellation: boolean, resumableUploads: boolean, ... }`: Detected/configured capabilities.
+    *   `totalProgress: number`: Overall upload progress (0-100).
+    *   `meta: M`: Global metadata.
+    *   `info: Array<{ type: LogLevel, message: string, details?: string | Record<string, string> }>`: Info messages for UI display.
+    *   `error: string | null`: Global error message.
+    *   `allowNewUpload: boolean`: Whether new uploads can be started.
+    *   `plugins: { [pluginID: string]: Record<string, unknown> }`: State managed by plugins.
+    *   `recoveredState: null | { files: ..., currentUploads: ... }`: State recovered by Golden Retriever.
+
+*   **`UppyOptions<M extends Meta, B extends Body>`**: Options for the Uppy constructor.
+    *   `id?: string`: Instance ID (default: 'uppy').
+    *   `autoProceed?: boolean`: Start upload automatically after files are added (default: false).
+    *   `allowMultipleUploadBatches?: boolean`: Allow adding files while an upload is in progress (default: true).
+    *   `debug?: boolean`: Enable debug logging (default: false).
+    *   `restrictions: Restrictions`: File restrictions (type, size, number).
+    *   `meta?: M`: Initial global metadata.
+    *   `onBeforeFileAdded?: (currentFile: UppyFile<M, B>, files: { ... }) => UppyFile<M, B> | boolean | undefined`: Hook before a file is added.
+    *   `onBeforeUpload?: (files: { ... }) => { ... } | boolean`: Hook before an upload starts.
+    *   `locale?: Locale`: Custom locale strings.
+    *   `store?: Store<State<M, B>>`: Custom state store.
+    *   `logger?: { debug, warn, error }`: Custom logger.
+    *   `infoTimeout?: number`: Duration for info messages (ms).
+
+*   **`Restrictions`**: File restriction options.
+    *   `maxFileSize?: number | null`: Max individual file size (bytes).
+    *   `minFileSize?: number | null`: Min individual file size (bytes).
+    *   `maxTotalFileSize?: number | null`: Max total size of all files (bytes).
+    *   `maxNumberOfFiles?: number | null`: Max number of files allowed.
+    *   `minNumberOfFiles?: number | null`: Min number of files required.
+    *   `allowedFileTypes?: string[] | null`: Allowed MIME types or extensions (e.g., `['image/*', '.pdf']`).
+    *   `requiredMetaFields?: string[]`: Meta fields that must be present before upload.
+
+*   **`UppyEventMap<M extends Meta, B extends Body>`**: Map of event names to their callback signatures (includes events like `file-added`, `upload-progress`, `upload-success`, `complete`, `error`, `restriction-failed`, etc.).
+
+*   **`UploadResult<M extends Meta, B extends Body>`**: The object returned when an upload completes.
+    *   `successful?: UppyFile<M, B>[]`: Array of successfully uploaded files.
+    *   `failed?: UppyFile<M, B>[]`: Array of files that failed to upload.
+    *   `uploadID?: string`: The ID of the upload batch.
+
+*   **`BasePlugin<...> `**: The base class for all Uppy plugins.
+    *   `id: string`: Unique plugin ID.
+    *   `type: string`: Plugin type ('acquirer', 'modifier', 'uploader', 'presenter', 'orchestrator', 'logger').
+    *   `uppy: Uppy<M, B>`: Reference to the Uppy instance.
+    *   `install(): void`: Called when the plugin is added.
+    *   `uninstall(): void`: Called when the plugin is removed.
+    *   `update(state: Partial<State<M, B>>): void`: Called on every Uppy state update.
+
+*   **`Processor`**: Type for pre/post/upload processor functions `(fileIDs: string[], uploadID: string) => Promise<unknown> | void`.
+
+*   **`LogLevel`**: `'info' | 'warning' | 'error' | 'success'`.
+
+*   **`PartialTree`**: Type used by Provider plugins (like Google Drive) to represent folder structures (`(PartialTreeFile | PartialTreeFolder)[]`).
diff --git a/.eslintrc.js b/.eslintrc.js
index a4b2692da..51e03ad1c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -288,6 +288,7 @@ module.exports = {
         // TODO: update those to more modern code when switch to ESM is complete
         'examples/react-native-expo/*.js',
         'examples/svelte-example/**/*.js',
+        'examples/sveltekit/**/*.js',
         'examples/vue/**/*.js',
         'examples/vue3/**/*.js',
       ],
diff --git a/.gitignore b/.gitignore
index a15816862..5aeaa7447 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@ yarn-error.log
 .env
 tsconfig.tsbuildinfo
 tsconfig.build.tsbuildinfo
+.svelte-kit
 
 dist/
 lib/
diff --git a/bin/build-components.mjs b/bin/build-components.mjs
new file mode 100644
index 000000000..c0d37243a
--- /dev/null
+++ b/bin/build-components.mjs
@@ -0,0 +1,266 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// Get the directory of this script
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(scriptDir, '..')
+
+// Define paths
+const COMPONENTS_DIR = path.join(rootDir, 'packages/@uppy/components/src')
+const REACT_DIR = path.join(rootDir, 'packages/@uppy/react/src/headless')
+const VUE_DIR = path.join(rootDir, 'packages/@uppy/vue/src/headless')
+const SVELTE_DIR = path.join(
+  rootDir,
+  'packages/@uppy/svelte/src/lib/components/headless',
+)
+
+// Templates
+const REACT_TEMPLATE = `import { useEffect, useRef, useContext, createElement as h } from 'react'
+import {
+  %%ComponentName%% as %%PreactComponentName%%,
+  type %%PropsTypeName%%,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { UppyContext } from './UppyContextProvider.js'
+
+export default function %%ComponentName%%(props: Omit<%%PropsTypeName%%, 'ctx'>) {
+  const ref = useRef(null)
+  const ctx = useContext(UppyContext)
+
+  useEffect(() => {
+    if (ref.current) {
+      preactRender(
+        preactH(%%PreactComponentName%%, {
+          ...props,
+          ctx,
+        } satisfies %%PropsTypeName%%),
+        ref.current,
+      )
+    }
+  }, [ctx, props])
+
+  return <div ref={ref} />
+}
+`
+
+const VUE_TEMPLATE = `import { defineComponent, ref, watch, onMounted, h } from 'vue'
+import {
+  %%ComponentName%% as %%PreactComponentName%%,
+  type %%PropsTypeName%%,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { shallowEqualObjects } from 'shallow-equal'
+import { useUppyContext } from './useUppyContext.js'
+
+export default defineComponent<Omit<%%PropsTypeName%%, 'ctx'>>({
+  name: '%%ComponentName%%',
+  setup(props, { attrs }) {
+    const containerRef = ref<HTMLElement | null>(null)
+    const ctx = useUppyContext()
+
+    function render%%ComponentName%%() {
+      if (containerRef.value) {
+        preactRender(
+          preactH(%%PreactComponentName%%, {
+            ...(attrs as %%PropsTypeName%%),
+            ctx,
+          } satisfies %%PropsTypeName%%),
+          containerRef.value,
+        )
+      }
+    }
+
+    onMounted(() => {
+      render%%ComponentName%%()
+    })
+
+    watch(ctx, () => {
+      render%%ComponentName%%()
+    })
+
+    watch(
+      () => props,
+      (current, old) => {
+        if (!shallowEqualObjects(current, old)) {
+          render%%ComponentName%%()
+        }
+      },
+    )
+
+    return () => h('div', { ref: containerRef })
+  },
+})
+`
+
+const SVELTE_TEMPLATE = `<script lang="ts">
+  import { getContext, mount } from 'svelte'
+  import {
+    %%ComponentName%% as %%PreactComponentName%%,
+    type %%PropsTypeName%%,
+    type UppyContext,
+  } from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+  import { UppyContextKey } from './UppyContextProvider.svelte'
+
+  const props: Omit<%%PropsTypeName%%, 'ctx'> = $props()
+  const ctx = getContext<UppyContext>(UppyContextKey)
+  let container: HTMLElement
+
+  $effect(() => {
+    if (container) {
+      preactRender(
+        preactH(%%PreactComponentName%%, {
+          ...props,
+          ctx,
+        } satisfies %%PropsTypeName%%),
+        container,
+      )
+    }
+  })
+</script>
+
+<div bind:this={container}></div>
+`
+
+try {
+  // Check if components directory exists
+  await fs.access(COMPONENTS_DIR).catch(() => {
+    throw new Error(`Components directory not found: ${COMPONENTS_DIR}`)
+  })
+  await Promise.all(
+    [REACT_DIR, VUE_DIR, SVELTE_DIR].map(async (dir) => {
+      if (!existsSync(dir)) {
+        await fs.mkdir(dir, { recursive: true })
+      }
+    }),
+  )
+
+  // Read all files in components directory
+  const files = await fs.readdir(COMPONENTS_DIR)
+
+  // Filter for .tsx files
+  const tsxFiles = files.filter((file) => file.endsWith('.tsx'))
+
+  console.log(`Found ${tsxFiles.length} Preact component(s) to process\n`)
+
+  // Track generated components for index files
+  const reactComponents = []
+  const vueComponents = []
+  const svelteComponents = []
+
+  // Process each tsx file
+  for (const file of tsxFiles) {
+    try {
+      const componentName = path.basename(file, '.tsx')
+      const propsTypeName = `${componentName}Props`
+      const preactComponentName = `Preact${componentName}`
+
+      // Generate React wrapper
+      const reactContent = REACT_TEMPLATE.replace(
+        /%%ComponentName%%/g,
+        componentName,
+      )
+        .replace(/%%PreactComponentName%%/g, preactComponentName)
+        .replace(/%%PropsTypeName%%/g, propsTypeName)
+
+      // Generate Vue wrapper
+      const vueContent = VUE_TEMPLATE.replace(
+        /%%ComponentName%%/g,
+        componentName,
+      )
+        .replace(/%%PreactComponentName%%/g, preactComponentName)
+        .replace(/%%PropsTypeName%%/g, propsTypeName)
+
+      // Generate Svelte wrapper
+      const svelteContent = SVELTE_TEMPLATE.replace(
+        /%%ComponentName%%/g,
+        componentName,
+      )
+        .replace(/%%PreactComponentName%%/g, preactComponentName)
+        .replace(/%%PropsTypeName%%/g, propsTypeName)
+
+      // Write files
+      const reactFilePath = path.join(REACT_DIR, `${componentName}.tsx`)
+      const vueFilePath = path.join(VUE_DIR, `${componentName}.ts`)
+      const svelteFilePath = path.join(SVELTE_DIR, `${componentName}.svelte`)
+
+      await fs.writeFile(reactFilePath, reactContent)
+      await fs.writeFile(vueFilePath, vueContent)
+      await fs.writeFile(svelteFilePath, svelteContent)
+
+      // Add to component lists for index files
+      reactComponents.push(componentName)
+      vueComponents.push(componentName)
+      svelteComponents.push(componentName)
+
+      console.log(`✔︎ ${componentName}`)
+    } catch (error) {
+      console.error(`Error processing component ${file}:`, error)
+    }
+  }
+
+  // Generate index files
+  if (reactComponents.length > 0) {
+    const reactIndexContent = reactComponents
+      .map((name) => `export { default as ${name} } from './${name}.js'`)
+      .join('\n')
+    await fs.writeFile(path.join(REACT_DIR, 'index.ts'), reactIndexContent)
+    console.log(`\nExporting React components from ${REACT_DIR}`)
+  }
+
+  if (vueComponents.length > 0) {
+    const vueIndexContent = vueComponents
+      .map((name) => `export { default as ${name} } from './${name}.js'`)
+      .join('\n')
+    await fs.writeFile(path.join(VUE_DIR, 'index.ts'), vueIndexContent)
+    console.log(`Exporting Vue components from ${VUE_DIR}`)
+  }
+
+  if (svelteComponents.length > 0) {
+    const svelteIndexContent = svelteComponents
+      .map((name) => `export { default as ${name} } from './${name}.svelte'`)
+      .join('\n')
+    await fs.writeFile(path.join(SVELTE_DIR, 'index.ts'), svelteIndexContent)
+    console.log(`Exporting Svelte components from ${SVELTE_DIR}`)
+  }
+
+  // Copy CSS file
+  const CSS_SOURCE_PATH = path.join(
+    rootDir,
+    'packages/@uppy/components/dist/styles.css',
+  )
+  const FRAMEWORK_DIRS_FOR_CSS = [
+    path.join(rootDir, 'packages/@uppy/react/dist'),
+    path.join(rootDir, 'packages/@uppy/vue/dist'),
+    path.join(rootDir, 'packages/@uppy/svelte/dist'),
+  ]
+
+  try {
+    await fs.access(CSS_SOURCE_PATH) // Check if source CSS exists
+    await Promise.all(
+      FRAMEWORK_DIRS_FOR_CSS.map(async (destDir) => {
+        if (!existsSync(destDir)) {
+          await fs.mkdir(destDir, { recursive: true })
+        }
+        const destPath = path.join(destDir, 'styles.css')
+        await fs.copyFile(CSS_SOURCE_PATH, destPath)
+      }),
+    )
+  } catch (cssError) {
+    console.error(
+      `${CSS_SOURCE_PATH} does not exist yet. Run \`yarn build\` first.`,
+    )
+  }
+
+  console.log('\nAll wrappers and index files generated successfully!')
+} catch (error) {
+  console.error('Error generating wrappers:', error)
+  process.exit(1)
+}
diff --git a/e2e/clients/dashboard-vue/App.vue b/e2e/clients/dashboard-vue/App.vue
index 96fad8b78..e727f934c 100644
--- a/e2e/clients/dashboard-vue/App.vue
+++ b/e2e/clients/dashboard-vue/App.vue
@@ -1,22 +1,53 @@
 <template>
-  <dashboard :uppy="uppy" />
+  <UppyContextProvider :uppy="uppy">
+    <main>
+      <h1>Vue Headless Components Test</h1>
+
+      <article id="files-list">
+        <h2>With list</h2>
+        <Dropzone />
+        <FilesList />
+        <UploadButton />
+      </article>
+
+      <article id="files-grid">
+        <h2>With grid</h2>
+        <Dropzone />
+        <FilesGrid :columns="2" />
+        <UploadButton />
+      </article>
+    </main>
+  </UppyContextProvider>
 </template>
 
 <script>
 import Vue from 'vue'
 import Uppy from '@uppy/core'
-import { Dashboard } from '@uppy/vue'
+import Tus from '@uppy/tus'
+import {
+  UppyContextProvider,
+  Dropzone,
+  FilesList,
+  FilesGrid,
+  UploadButton,
+} from '@uppy/vue'
 
 export default {
   name: 'App',
   components: {
-    Dashboard,
+    UppyContextProvider,
+    Dropzone,
+    FilesList,
+    FilesGrid,
+    UploadButton,
   },
   computed: {
-    uppy: () => new Uppy(),
+    uppy: () =>
+      new Uppy().use(Tus, {
+        endpoint: 'https://tusd.tusdemo.net/files/',
+      }),
   },
 }
 </script>
 
-<style src="@uppy/core/dist/style.css"></style>
-<style src="@uppy/dashboard/dist/style.css"></style>
+<style src="@uppy/vue/dist/styles.css"></style>
diff --git a/e2e/cypress/integration/dashboard-vue.spec.ts b/e2e/cypress/integration/dashboard-vue.spec.ts
index 57d51b01f..79ff71d46 100644
--- a/e2e/cypress/integration/dashboard-vue.spec.ts
+++ b/e2e/cypress/integration/dashboard-vue.spec.ts
@@ -1,11 +1,10 @@
-describe('dashboard-vue', () => {
+describe('@uppy/vue', () => {
   beforeEach(() => {
     cy.visit('/dashboard-vue')
+    cy.get('input[type="file"]').first().as('file-input')
   })
 
-  // Only Vue 3 works in Parcel if you use SFC's but Vue 3 is broken in Uppy:
-  // https://github.com/transloadit/uppy/issues/2877
-  xit('should render in Vue 3 and show thumbnails', () => {
+  it('should render headless components in Vue 3 correctly', () => {
     cy.get('@file-input').selectFile(
       [
         'cypress/fixtures/images/cat.jpg',
@@ -13,8 +12,38 @@ describe('dashboard-vue', () => {
       ],
       { force: true },
     )
-    cy.get('.uppy-Dashboard-Item-previewImg')
-      .should('have.length', 2)
-      .each((element) => expect(element).attr('src').to.include('blob:'))
+
+    // Test FilesList shows files correctly
+    cy.get('ul[data-uppy-element="files-list"]').should('exist')
+    cy.get('ul[data-uppy-element="files-list"] li').should('have.length', 2)
+
+    // Test FilesGrid shows files correctly
+    cy.get('div[data-uppy-element="files-grid"]').should('exist')
+    cy.get('div[data-uppy-element="files-grid"] div.uppy-reset').should(
+      'have.length',
+      2,
+    )
+
+    // Test UploadButton is functional
+    cy.get('#files-grid button[data-uppy-element="upload-button"]')
+      .should('exist')
+      .and('contain', 'Upload')
+      .and('not.be.disabled')
+      .click()
+
+    // Check if button shows progress during upload
+    cy.get('#files-grid button[data-uppy-element="upload-button"] span').should(
+      'contain',
+      'Uploaded',
+    )
+    // Check if cancel button appears during upload
+    cy.get('#files-grid button[data-uppy-element="cancel-button"]')
+      .should('exist')
+      .and('contain', 'Cancel')
+
+    cy.get('#files-grid button[data-uppy-element="upload-button"] span').should(
+      'contain',
+      'Complete',
+    )
   })
 })
diff --git a/examples/react-example/App.tsx b/examples/react-example/App.tsx
deleted file mode 100644
index 3387e8045..000000000
--- a/examples/react-example/App.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/* eslint-disable */
-import React from 'react'
-import { createRoot } from 'react-dom/client'
-import Uppy, {
-  UIPlugin,
-  type Meta,
-  type Body,
-  type UIPluginOptions,
-  type State,
-} from '@uppy/core'
-import Tus from '@uppy/tus'
-import Webcam from '@uppy/webcam'
-import { Dashboard, useUppyState } from '@uppy/react'
-
-import '@uppy/core/dist/style.css'
-import '@uppy/dashboard/dist/style.css'
-import '@uppy/webcam/dist/style.css'
-
-interface MyPluginOptions extends UIPluginOptions {}
-
-interface MyPluginState extends Record<string, unknown> {}
-
-// Custom plugin example inside React
-class MyPlugin<M extends Meta, B extends Body> extends UIPlugin<
-  MyPluginOptions,
-  M,
-  B,
-  MyPluginState
-> {
-  container!: HTMLElement
-
-  constructor(uppy: Uppy<M, B>, opts?: MyPluginOptions) {
-    super(uppy, opts)
-    this.type = 'acquirer'
-    this.id = this.opts.id || 'TEST'
-    this.title = 'Test'
-  }
-
-  override install() {
-    const { target } = this.opts
-    if (target) {
-      this.mount(target, this)
-    }
-  }
-
-  override uninstall() {
-    this.unmount()
-  }
-
-  override render(state: State<M, B>, container: HTMLElement) {
-    // Important: during the initial render is not defined. Safely return.
-    if (!container) return
-    createRoot(container).render(
-      <h2>React component inside Uppy's Preact UI</h2>,
-    )
-  }
-}
-
-const metaFields = [
-  { id: 'license', name: 'License', placeholder: 'specify license' },
-]
-
-function createUppy() {
-  return new Uppy({ restrictions: { requiredMetaFields: ['license'] } })
-    .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
-    .use(Webcam)
-    .use(MyPlugin)
-}
-
-export default function App() {
-  // IMPORTANT: passing an initaliser function to useState
-  // to prevent creating a new Uppy instance on every render.
-  // useMemo is a performance hint, not a guarantee.
-  const [uppy] = React.useState(createUppy)
-  // You can access state reactively with useUppyState
-  const fileCount = useUppyState(
-    uppy,
-    (state) => Object.keys(state.files).length,
-  )
-  const totalProgress = useUppyState(uppy, (state) => state.totalProgress)
-  // Also possible to get the state of all plugins.
-  const plugins = useUppyState(uppy, (state) => state.plugins)
-
-  return (
-    <>
-      <p>File count: {fileCount}</p>
-      <p>Total progress: {totalProgress}</p>
-      <Dashboard uppy={uppy} metaFields={metaFields} />
-    </>
-  )
-}
diff --git a/examples/react-example/README.md b/examples/react-example/README.md
deleted file mode 100644
index 8ecd1a362..000000000
--- a/examples/react-example/README.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# React example
-
-This is minimal example created to demonstrate how to integrate Uppy in your
-React app.
-
-To spawn the demo, use the following commands:
-
-```sh
-corepack yarn install
-corepack yarn build
-corepack yarn workspace @uppy-example/react dev
-```
-
-If you'd like to use a different package manager than Yarn (e.g. npm) to work
-with this example, you can extract it from the workspace like this:
-
-```sh
-corepack yarn workspace @uppy-example/react pack
-
-# The above command should have create a .tgz file, we're going to extract it to
-# a new directory outside of the Uppy workspace.
-mkdir ../react-example
-tar -xzf examples/react-example/package.tgz -C ../react-example --strip-components 1
-rm -f examples/react-example/package.tgz
-
-# Now you can leave the Uppy workspace and use the example as a standalone JS project:
-cd ../react-example
-npm i
-npm run dev
-```
diff --git a/examples/react-example/index.html b/examples/react-example/index.html
deleted file mode 100644
index c1ea87c94..000000000
--- a/examples/react-example/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Uppy React Example</title>
-    <link href="uppy.min.css" rel="stylesheet" />
-  </head>
-  <body>
-    <div id="app"></div>
-    <script src="./main.tsx" type="module"></script>
-  </body>
-</html>
diff --git a/examples/react-example/main.tsx b/examples/react-example/main.tsx
deleted file mode 100644
index 5969f2d93..000000000
--- a/examples/react-example/main.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-/* eslint-disable */
-import React from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-
-createRoot(document.querySelector('#app')!).render(<App />)
diff --git a/examples/react-example/package.json b/examples/react-example/package.json
deleted file mode 100644
index 6900707dc..000000000
--- a/examples/react-example/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "@uppy-example/react",
-  "version": "0.0.0",
-  "type": "module",
-  "dependencies": {
-    "@uppy/core": "workspace:*",
-    "@uppy/dashboard": "workspace:*",
-    "@uppy/react": "workspace:*",
-    "@uppy/remote-sources": "workspace:*",
-    "@uppy/tus": "workspace:*",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview --port 5050"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.0.0",
-    "vite": "^5.4.17"
-  }
-}
diff --git a/examples/react-example/tsconfig.json b/examples/react-example/tsconfig.json
deleted file mode 100644
index ca9e45c59..000000000
--- a/examples/react-example/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "jsxImportSource": "react",
-    "jsx": "react-jsx",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "target": "es2022",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "moduleDetection": "force",
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "noImplicitOverride": true,
-    "module": "NodeNext",
-    "outDir": "dist",
-    "sourceMap": true,
-    "lib": ["es2022", "dom", "dom.iterable"],
-  },
-}
diff --git a/examples/react-example/vite.config.js b/examples/react-example/vite.config.js
deleted file mode 100644
index 5a33944a9..000000000
--- a/examples/react-example/vite.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})
diff --git a/examples/react/index.html b/examples/react/index.html
new file mode 100644
index 000000000..ba530a2c7
--- /dev/null
+++ b/examples/react/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/package.json b/examples/react/package.json
new file mode 100644
index 000000000..001d1252b
--- /dev/null
+++ b/examples/react/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@uppy-example/react",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.9",
+    "@uppy/core": "^4.4.2",
+    "@uppy/react": "workspace:^",
+    "@uppy/tus": "^4.2.2",
+    "@uppy/webcam": "^4.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.9"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.3",
+    "vite": "^6.2.0"
+  }
+}
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
new file mode 100644
index 000000000..d65cc621f
--- /dev/null
+++ b/examples/react/src/App.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { useState } from 'react'
+import {
+  Dropzone,
+  FilesGrid,
+  FilesList,
+  UploadButton,
+  UppyContextProvider,
+} from '@uppy/react'
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
+
+import './app.css'
+import '@uppy/react/dist/styles.css'
+
+function App() {
+  const [uppy] = useState(() =>
+    new Uppy().use(Tus, {
+      endpoint: 'https://tusd.tusdemo.net/files/',
+    }),
+  )
+
+  return (
+    <UppyContextProvider uppy={uppy}>
+      <main className="p-5 max-w-xl mx-auto">
+        <h1 className="text-4xl font-bold">Welcome to React.</h1>
+
+        <article>
+          <h2 className="text-2xl my-4">With list</h2>
+          <Dropzone />
+
+          <FilesList />
+          <UploadButton />
+        </article>
+
+        <article>
+          <h2 className="text-2xl my-4">With grid</h2>
+          <Dropzone />
+          <FilesGrid columns={2} />
+          <UploadButton />
+        </article>
+      </main>
+    </UppyContextProvider>
+  )
+}
+
+export default App
diff --git a/examples/react/src/app.css b/examples/react/src/app.css
new file mode 100644
index 000000000..675792965
--- /dev/null
+++ b/examples/react/src/app.css
@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+
+/* example how to use the data attributes to apply custom styles */
+/* button[data-uppy-element="upload-button"][data-state="uploading"] {
+  background-color: red;
+} */
diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
new file mode 100644
index 000000000..a83b06572
--- /dev/null
+++ b/examples/react/src/main.tsx
@@ -0,0 +1,10 @@
+/* eslint-disable react/react-in-jsx-scope */
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.js'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/examples/react/src/vite-env.d.ts b/examples/react/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/examples/react/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json
new file mode 100644
index 000000000..4df86fb6a
--- /dev/null
+++ b/examples/react/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+  },
+  "include": ["src", "src/**/*.tsx"],
+  "references": [{ "path": "./tsconfig.node.json" }],
+}
diff --git a/examples/react/tsconfig.node.json b/examples/react/tsconfig.node.json
new file mode 100644
index 000000000..e993792cb
--- /dev/null
+++ b/examples/react/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/react/vite.config.ts b/examples/react/vite.config.ts
new file mode 100644
index 000000000..e55a9ebda
--- /dev/null
+++ b/examples/react/vite.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// @ts-expect-error untyped for some reason but fine
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
diff --git a/examples/svelte-example/.gitignore b/examples/svelte-example/.gitignore
deleted file mode 100644
index 8c39b2ae7..000000000
--- a/examples/svelte-example/.gitignore
+++ /dev/null
@@ -1,12 +0,0 @@
-/node_modules/
-/uploads/
-
-.DS_Store
-/build/
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
diff --git a/examples/svelte-example/README.md b/examples/svelte-example/README.md
deleted file mode 100644
index 957e96796..000000000
--- a/examples/svelte-example/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Uppy with Svelte
-
-## Run it
-
-To run this example, make sure you've correctly installed the **repository
-root**:
-
-```sh
-corepack yarn install
-corepack yarn build
-```
-
-Then, again in the **repository root**, start this example by doing:
-
-```sh
-corepack yarn workspace @uppy-example/svelte-app dev
-```
diff --git a/examples/svelte-example/package.json b/examples/svelte-example/package.json
deleted file mode 100644
index 506d8435c..000000000
--- a/examples/svelte-example/package.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "name": "@uppy-example/svelte-app",
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "npm-run-all --parallel dev:frontend dev:backend",
-    "dev:frontend": "vite dev",
-    "dev:backend": "node --watch ./server.js",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.8.3",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/formidable": "^3",
-    "npm-run-all": "^4.1.5",
-    "svelte": "^4.2.19",
-    "svelte-check": "^3.6.0",
-    "tslib": "^2.4.1",
-    "typescript": "~5.4",
-    "vite": "^5.4.17"
-  },
-  "dependencies": {
-    "@uppy/core": "workspace:*",
-    "@uppy/dashboard": "workspace:*",
-    "@uppy/drag-drop": "workspace:*",
-    "@uppy/progress-bar": "workspace:*",
-    "@uppy/svelte": "workspace:*",
-    "@uppy/webcam": "workspace:*",
-    "@uppy/xhr-upload": "workspace:*",
-    "formidable": "^3.5.1"
-  },
-  "type": "module",
-  "private": true
-}
diff --git a/examples/svelte-example/server.js b/examples/svelte-example/server.js
deleted file mode 100755
index c86090335..000000000
--- a/examples/svelte-example/server.js
+++ /dev/null
@@ -1,64 +0,0 @@
-#!/usr/bin/env node
-
-/* eslint-disable no-console */
-
-import http from 'node:http'
-import { fileURLToPath } from 'node:url'
-import { mkdir } from 'node:fs/promises'
-
-import formidable from 'formidable'
-
-const UPLOAD_DIR = new URL('./uploads/', import.meta.url)
-
-await mkdir(UPLOAD_DIR, { recursive: true })
-
-http
-  .createServer((req, res) => {
-    const headers = {
-      'Content-Type': 'application/json',
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
-      'Access-Control-Max-Age': 2592000, // 30 days
-      /** add other headers as per requirement */
-    }
-
-    if (req.method === 'OPTIONS') {
-      res.writeHead(204, headers)
-      res.end()
-      return
-    }
-    if (req.url === '/upload' && req.method.toLowerCase() === 'post') {
-      // parse a file upload
-      const form = formidable({
-        keepExtensions: true,
-        uploadDir: fileURLToPath(UPLOAD_DIR),
-      })
-
-      form.parse(req, (err, fields, files) => {
-        res.writeHead(200, headers)
-        if (err) {
-          console.log('some error', err)
-          res.write(JSON.stringify(err))
-        } else {
-          for (const {
-            filepath,
-            originalFilename,
-            mimetype,
-            size,
-          } of files.files) {
-            console.log('saved file', {
-              filepath,
-              originalFilename,
-              mimetype,
-              size,
-            })
-          }
-          res.write(JSON.stringify({ fields, files }))
-        }
-        res.end()
-      })
-    }
-  })
-  .listen(9967, () => {
-    console.log('server started')
-  })
diff --git a/examples/svelte-example/src/routes/+layout.ts b/examples/svelte-example/src/routes/+layout.ts
deleted file mode 100644
index 7f52afb88..000000000
--- a/examples/svelte-example/src/routes/+layout.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import '@uppy/core/dist/style.min.css'
-import '@uppy/dashboard/dist/style.min.css'
-import '@uppy/drag-drop/dist/style.min.css'
-import '@uppy/progress-bar/dist/style.min.css'
-
-export const ssr = false
diff --git a/examples/svelte-example/src/routes/+page.svelte b/examples/svelte-example/src/routes/+page.svelte
deleted file mode 100644
index 90c2753d0..000000000
--- a/examples/svelte-example/src/routes/+page.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-	import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/svelte'
-	import Uppy from '@uppy/core'
-	import Webcam from '@uppy/webcam'
-	import XHRUpload from '@uppy/xhr-upload'
-
-	const createUppy = () => {
-		return new Uppy().use(Webcam).use(XHRUpload, {
-			bundle: true,
-			endpoint: 'http://localhost:9967/upload',
-			allowedMetaFields: ['something'],
-			fieldName: 'files',
-		})
-	}
-
-	let uppy1 = createUppy()
-	let uppy2 = createUppy()
-
-	let open = false;
-	let showInlineDashboard = true;
-</script>
-
-<main>
-	<h1>Welcome to the <code>@uppy/svelte</code> demo!</h1>
-	<h2>Inline Dashboard</h2>
-	<label>
-      <input
-        type="checkbox"
-				bind:checked={showInlineDashboard}
-			/>
-      Show Dashboard
-	</label>
-	{#if showInlineDashboard}
-		<Dashboard
-			uppy={uppy1}
-			plugins={['Webcam']}
-		/>
-	{/if}
-	<h2>Modal Dashboard</h2>
-	<div>
-		<button on:click={() => open = true}>Show Dashboard</button>
-		<DashboardModal
-			uppy={uppy2}
-			open={open}
-			props={{
-				onRequestCloseModal: () => open = false,
-				plugins: ['Webcam']
-			}}
-		/>
-	</div>
-
-	<h2>Drag Drop Area</h2>
-	<DragDrop
-		uppy={uppy1}
-	/>
-
-	<h2>Progress Bar</h2>
-	<ProgressBar
-		uppy={uppy1}
-		props={{
-			hideAfterFinish: false
-		}}
-	/>
-</main>
-<style global>
-	input[type="checkbox"] {
-		user-select: none;
-	}
-</style>
\ No newline at end of file
diff --git a/examples/svelte-example/svelte.config.js b/examples/svelte-example/svelte.config.js
deleted file mode 100644
index 1ee77a771..000000000
--- a/examples/svelte-example/svelte.config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import adapter from '@sveltejs/adapter-static'
-// eslint-disable-next-line import/no-unresolved
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
-
-  kit: {
-    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-    adapter: adapter(),
-  },
-}
-
-export default config
diff --git a/examples/sveltekit/.gitignore b/examples/sveltekit/.gitignore
new file mode 100644
index 000000000..3b462cb0c
--- /dev/null
+++ b/examples/sveltekit/.gitignore
@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/examples/sveltekit/.npmrc b/examples/sveltekit/.npmrc
new file mode 100644
index 000000000..b6f27f135
--- /dev/null
+++ b/examples/sveltekit/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/examples/sveltekit/README.md b/examples/sveltekit/README.md
new file mode 100644
index 000000000..ff0d9bde6
--- /dev/null
+++ b/examples/sveltekit/README.md
@@ -0,0 +1,41 @@
+# sv
+
+Everything you need to build a Svelte project, powered by
+[`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or
+`pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an
+> [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
diff --git a/examples/sveltekit/package.json b/examples/sveltekit/package.json
new file mode 100644
index 000000000..9fa0fb63d
--- /dev/null
+++ b/examples/sveltekit/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@uppy-example/sveltekit",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "dependencies": {
+    "@uppy/core": "workspace:*",
+    "@uppy/dashboard": "workspace:*",
+    "@uppy/drag-drop": "workspace:*",
+    "@uppy/progress-bar": "workspace:*",
+    "@uppy/svelte": "workspace:*",
+    "@uppy/tus": "workspace:*",
+    "@uppy/webcam": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.2.5"
+  }
+}
diff --git a/examples/sveltekit/src/app.css b/examples/sveltekit/src/app.css
new file mode 100644
index 000000000..d4b507858
--- /dev/null
+++ b/examples/sveltekit/src/app.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/examples/svelte-example/src/app.d.ts b/examples/sveltekit/src/app.d.ts
similarity index 82%
rename from examples/svelte-example/src/app.d.ts
rename to examples/sveltekit/src/app.d.ts
index 367926a58..c0c081684 100644
--- a/examples/svelte-example/src/app.d.ts
+++ b/examples/sveltekit/src/app.d.ts
@@ -1,4 +1,4 @@
-// See https://kit.svelte.dev/docs/types#app
+// See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
   namespace App {
diff --git a/examples/svelte-example/src/app.html b/examples/sveltekit/src/app.html
similarity index 66%
rename from examples/svelte-example/src/app.html
rename to examples/sveltekit/src/app.html
index e39ebf140..84ffad166 100644
--- a/examples/svelte-example/src/app.html
+++ b/examples/sveltekit/src/app.html
@@ -2,10 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
-    <app style="display: contents">%sveltekit.body%</app>
+    <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/examples/sveltekit/src/routes/+layout.svelte b/examples/sveltekit/src/routes/+layout.svelte
new file mode 100644
index 000000000..3153e95d8
--- /dev/null
+++ b/examples/sveltekit/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import '../app.css';
+	
+	let { children } = $props();
+</script>
+
+{@render children()}
diff --git a/examples/sveltekit/src/routes/+page.svelte b/examples/sveltekit/src/routes/+page.svelte
new file mode 100644
index 000000000..6a0d7b34a
--- /dev/null
+++ b/examples/sveltekit/src/routes/+page.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Uppy from '@uppy/core'
+  import Tus from '@uppy/tus'
+  import {
+    UppyContextProvider,
+    Dropzone,
+    FilesList,
+    FilesGrid,
+    UploadButton,
+  } from '@uppy/svelte'
+  import '@uppy/svelte/dist/styles.css'
+
+  const uppy = new Uppy().use(Tus, {
+    endpoint: 'https://tusd.tusdemo.net/files/',
+  })
+</script>
+
+<UppyContextProvider {uppy}>
+  <main class="p-5 max-w-xl mx-auto">
+    <h1 class="text-4xl font-bold">Welcome to SvelteKit.</h1>
+
+    <article>
+      <h2 class="text-2xl my-4">With list</h2>
+      <Dropzone />
+      <FilesList />
+      <UploadButton />
+    </article>
+
+    <article>
+      <h2 class="text-2xl my-4">With grid</h2>
+      <Dropzone />
+      <FilesGrid columns={2} />
+      <UploadButton />
+    </article>
+  </main>
+</UppyContextProvider>
diff --git a/examples/sveltekit/static/favicon.png b/examples/sveltekit/static/favicon.png
new file mode 100644
index 000000000..825b9e65a
Binary files /dev/null and b/examples/sveltekit/static/favicon.png differ
diff --git a/examples/sveltekit/svelte.config.js b/examples/sveltekit/svelte.config.js
new file mode 100644
index 000000000..1295460d1
--- /dev/null
+++ b/examples/sveltekit/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;
diff --git a/examples/svelte-example/tsconfig.json b/examples/sveltekit/tsconfig.json
similarity index 78%
rename from examples/svelte-example/tsconfig.json
rename to examples/sveltekit/tsconfig.json
index d42a3c13e..c2d46c7a3 100644
--- a/examples/svelte-example/tsconfig.json
+++ b/examples/sveltekit/tsconfig.json
@@ -9,11 +9,11 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "module": "ESNext",
+    "module": "preserve",
     "moduleResolution": "bundler",
   },
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-  // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
   //
   // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
   // from the referenced tsconfig.json - TypeScript does not merge them in
diff --git a/examples/svelte-example/vite.config.ts b/examples/sveltekit/vite.config.ts
similarity index 67%
rename from examples/svelte-example/vite.config.ts
rename to examples/sveltekit/vite.config.ts
index 67c0dad1b..cecc075e2 100644
--- a/examples/svelte-example/vite.config.ts
+++ b/examples/sveltekit/vite.config.ts
@@ -1,8 +1,8 @@
-// eslint-disable-next-line import/no-unresolved
+import tailwindcss from '@tailwindcss/vite'
 import { sveltekit } from '@sveltejs/kit/vite'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [tailwindcss(), sveltekit()],
 })
diff --git a/examples/vue3/index.html b/examples/vue3/index.html
index e631329c1..ba1e2d74c 100644
--- a/examples/vue3/index.html
+++ b/examples/vue3/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/src/app.css" />
     <title>Vite App</title>
   </head>
   <body>
diff --git a/examples/vue3/package.json b/examples/vue3/package.json
index d0a4b63f6..4db66946d 100644
--- a/examples/vue3/package.json
+++ b/examples/vue3/package.json
@@ -2,6 +2,7 @@
   "name": "@uppy-example/vue3",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -18,7 +19,9 @@
     "vue": "^3.2.33"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-vue": "^5.0.0",
-    "vite": "^5.4.17"
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.2.0"
   }
 }
diff --git a/examples/vue3/src/App.vue b/examples/vue3/src/App.vue
index f99f38f49..25f7255b8 100644
--- a/examples/vue3/src/App.vue
+++ b/examples/vue3/src/App.vue
@@ -1,115 +1,42 @@
 <template>
-  <div id="app">
-    <!-- <HelloWorld msg="Welcome to Uppy Vue Demo"/> -->
-    <h1>Welcome to Uppy Vue Demo!</h1>
-    <h2>Inline Dashboard</h2>
-    <label>
-      <input
-        type="checkbox"
-        :checked="showInlineDashboard"
-        @change="
-          (event) => {
-            showInlineDashboard = event.target.checked
-          }
-        "
-      />
-      Show Dashboard
-    </label>
-    <Dashboard
-      v-if="showInlineDashboard"
-      :uppy="uppy"
-      :props="{
-        metaFields: [{ id: 'name', name: 'Name', placeholder: 'File name' }],
-      }"
-    />
-    <h2>Modal Dashboard</h2>
-    <div>
-      <button @click="open = true">Show Dashboard</button>
-      <DashboardModal
-        :uppy="uppy2"
-        :open="open"
-        :props="{
-          onRequestCloseModal: handleClose,
-        }"
-      />
-    </div>
+  <UppyContextProvider :uppy="uppy">
+    <main class="p-5 max-w-xl mx-auto">
+      <h1 class="text-4xl font-bold">Welcome to Vue.</h1>
 
-    <h2>Drag Drop Area</h2>
-    <DragDrop
-      :uppy="uppy"
-      :props="{
-        locale: {
-          strings: {
-            chooseFile: 'Boop a file',
-            orDragDrop: 'or yoink it here',
-          },
-        },
-      }"
-    />
+      <article>
+        <h2 class="text-2xl my-4">With list</h2>
+        <Dropzone />
+        <FilesList />
+        <UploadButton />
+      </article>
 
-    <h2>Progress Bar</h2>
-    <ProgressBar
-      :uppy="uppy"
-      :props="{
-        hideAfterFinish: false,
-      }"
-    />
-  </div>
+      <article>
+        <h2 class="text-2xl my-4">With grid</h2>
+        <Dropzone />
+        <FilesGrid :columns="2" />
+        <UploadButton />
+      </article>
+    </main>
+  </UppyContextProvider>
 </template>
 
-<script setup>
-import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
-</script>
-
-<script>
+<script setup lang="ts">
+import { computed } from 'vue'
 import Uppy from '@uppy/core'
 import Tus from '@uppy/tus'
-import Webcam from '@uppy/webcam'
-import { defineComponent } from 'vue'
+import {
+  UppyContextProvider,
+  Dropzone,
+  FilesList,
+  FilesGrid,
+  UploadButton,
+} from '@uppy/vue'
 
-const { VITE_TUS_ENDPOINT: TUS_ENDPOINT } = import.meta.env
-
-export default defineComponent({
-  computed: {
-    uppy: () =>
-      new Uppy({ id: 'uppy1', autoProceed: true, debug: true })
-        .use(Tus, {
-          endpoint: TUS_ENDPOINT,
-        })
-        .use(Webcam),
-    uppy2: () =>
-      new Uppy({ id: 'uppy2', autoProceed: false, debug: true })
-        .use(Tus, {
-          endpoint: TUS_ENDPOINT,
-        })
-        .use(Webcam),
-  },
-  data() {
-    return {
-      open: false,
-      showInlineDashboard: false,
-    }
-  },
-  methods: {
-    handleClose() {
-      this.open = false
-    },
-  },
-})
+const uppy = computed(() =>
+  new Uppy().use(Tus, {
+    endpoint: 'https://tusd.tusdemo.net/files/',
+  }),
+)
 </script>
 
-<style src="@uppy/core/dist/style.css"></style>
-<style src="@uppy/dashboard/dist/style.css"></style>
-<style src="@uppy/drag-drop/dist/style.css"></style>
-<style src="@uppy/progress-bar/dist/style.css"></style>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<style src="@uppy/vue/dist/styles.css"></style>
diff --git a/examples/vue3/src/app.css b/examples/vue3/src/app.css
new file mode 100644
index 000000000..d4b507858
--- /dev/null
+++ b/examples/vue3/src/app.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/examples/vue3/vite.config.js b/examples/vue3/vite.config.js
index 169461f57..718a91c95 100644
--- a/examples/vue3/vite.config.js
+++ b/examples/vue3/vite.config.js
@@ -1,11 +1,12 @@
 import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
 
 const ROOT = new URL('../../', import.meta.url)
 
 // https://vitejs.dev/config/
 export default defineConfig({
   envDir: fileURLToPath(ROOT),
-  plugins: [vue()],
+  plugins: [vue(), tailwindcss()],
 })
diff --git a/package.json b/package.json
index 323148bf0..ebd53be48 100644
--- a/package.json
+++ b/package.json
@@ -111,10 +111,11 @@
   "scripts": {
     "start:companion": "bash bin/companion.sh",
     "start:companion:with-loadbalancer": "e2e/start-companion-with-load-balancer.mjs",
+    "build:components": "node bin/build-components.mjs",
     "build:bundle": "yarn node ./bin/build-bundle.mjs",
     "build:clean": "cp .gitignore .gitignore.bak && printf '!node_modules\n!**/node_modules/**/*\n' >> .gitignore; git clean -Xfd packages e2e .parcel-cache coverage; mv .gitignore.bak .gitignore",
     "build:companion": "yarn workspace @uppy/companion build",
-    "build:css": "yarn node ./bin/build-css.js",
+    "build:css": "yarn node ./bin/build-css.js && yarn workspace @uppy/components build:tailwind",
     "build:svelte": "yarn workspace @uppy/svelte build",
     "build:angular": "yarn workspace angular build",
     "build:js:typeless": "npm-run-all build:lib build:companion build:svelte",
@@ -122,7 +123,7 @@
     "build:ts": "yarn tsc -b tsconfig.build.json && yarn workspace @uppy/svelte build",
     "build:lib": "yarn node ./bin/build-lib.mjs",
     "build:locale-pack": "yarn workspace @uppy-dev/locale-pack build && eslint packages/@uppy/locales/src/en_US.ts --fix && yarn workspace @uppy-dev/locale-pack test unused",
-    "build": "npm-run-all --serial build:ts --parallel build:js build:css --serial size",
+    "build": "npm-run-all --serial build:ts --parallel build:js build:css --serial build:components size",
     "contributors:save": "yarn node ./bin/update-contributors.mjs",
     "dev:with-companion": "npm-run-all --parallel start:companion dev",
     "dev": "yarn workspace @uppy-dev/dev dev",
@@ -156,7 +157,7 @@
     "test": "npm-run-all lint test:locale-packs:unused test:unit test:companion",
     "uploadcdn": "yarn node ./private/upload-to-cdn/index.js",
     "version": "yarn node ./bin/after-version-bump.js",
-    "watch:css": "onchange 'packages/{@uppy/,}*/src/*.scss' --initial --verbose -- yarn run build:css",
+    "watch:css": "onchange 'packages/{@uppy/,}*/src/*.{scss,css}' --initial --verbose -- yarn run build:css",
     "watch:js:bundle": "onchange 'packages/{@uppy/,}*/src/**/*.{js,ts,jsx,tsx}' --initial --verbose -- yarn run build:bundle",
     "watch:js:lib": "onchange 'packages/{@uppy/,}*/src/**/*.{js,ts,jsx,tsx}' --initial --verbose -- yarn run build:lib",
     "watch:js": "npm-run-all --parallel watch:js:bundle watch:js:lib",
diff --git a/packages/@uppy/companion/tsconfig.json b/packages/@uppy/companion/tsconfig.json
index 05c120966..8211511c2 100644
--- a/packages/@uppy/companion/tsconfig.json
+++ b/packages/@uppy/companion/tsconfig.json
@@ -9,6 +9,7 @@
     "sourceMap": false,
     "allowJs": true,
     "checkJs": true,
+    "skipLibCheck": true,
     "noEmitOnError": true,
     "skipLibCheck": true,
   },
diff --git a/packages/@uppy/components/package.json b/packages/@uppy/components/package.json
new file mode 100644
index 000000000..0d1a2899e
--- /dev/null
+++ b/packages/@uppy/components/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@uppy/components",
+  "description": "Headless Uppy components, made in Preact",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "type": "module",
+  "keywords": [
+    "uppy",
+    "uppy-plugin",
+    "headless",
+    "components",
+    "preact"
+  ],
+  "homepage": "https://uppy.io",
+  "bugs": {
+    "url": "https://github.com/transloadit/uppy/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/transloadit/uppy.git"
+  },
+  "scripts": {
+    "build:tailwind": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/styles.css"
+  },
+  "dependencies": {
+    "@tailwindcss/cli": "^4.0.6",
+    "clsx": "^2.1.1",
+    "preact": "^10.5.13",
+    "pretty-bytes": "^6.1.1",
+    "tailwindcss": "^4.0.6"
+  },
+  "peerDependencies": {
+    "@uppy/audio": "workspace:^",
+    "@uppy/core": "workspace:^",
+    "@uppy/image-editor": "workspace:^",
+    "@uppy/screen-capture": "workspace:^",
+    "@uppy/webcam": "workspace:^"
+  },
+  "peerDependenciesMeta": {
+    "@uppy/audio": {
+      "optional": true
+    },
+    "@uppy/google-drive-picker": {
+      "optional": true
+    },
+    "@uppy/image-editor": {
+      "optional": true
+    },
+    "@uppy/screen-capture": {
+      "optional": true
+    },
+    "@uppy/webcam": {
+      "optional": true
+    }
+  }
+}
diff --git a/packages/@uppy/components/src/Dropzone.tsx b/packages/@uppy/components/src/Dropzone.tsx
new file mode 100644
index 000000000..40a1f8ad1
--- /dev/null
+++ b/packages/@uppy/components/src/Dropzone.tsx
@@ -0,0 +1,119 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { h } from 'preact'
+import { useState, useRef } from 'preact/hooks'
+import { clsx } from 'clsx'
+import type { UppyContext } from './types.js'
+
+export type DropzoneProps = {
+  width?: string
+  height?: string
+  note?: string
+  noClick?: boolean
+  ctx: UppyContext
+}
+
+export default function Dropzone(props: DropzoneProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [isDragging, setIsDragging] = useState(() => false)
+  const { width, height, note, noClick, ctx } = props
+
+  function handleDrop(event: DragEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    setIsDragging(false)
+    const files = Array.from(event.dataTransfer?.files || [])
+    if (!files.length) return
+    ctx.uppy?.addFiles(
+      files.map((file) => ({
+        source: 'drag-drop',
+        name: file.name,
+        type: file.type,
+        data: file,
+      })),
+    )
+  }
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  function handleDragEnter(event: DragEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    setIsDragging(true)
+  }
+
+  function handleDragLeave(event: DragEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    setIsDragging(false)
+  }
+
+  function handleClick() {
+    if (noClick) return
+    fileInputRef.current?.click()
+  }
+
+  function handleFileInputChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    const files = Array.from(input.files || [])
+    if (!files.length) return
+    ctx.uppy?.addFiles(
+      files.map((file) => ({
+        source: 'drag-drop',
+        name: file.name,
+        type: file.type,
+        data: file,
+      })),
+    )
+
+    // Reset the input value so the same file can be selected again
+    input.value = ''
+  }
+
+  return (
+    <div className="uppy-reset" data-uppy-element="dropzone">
+      <input
+        type="file"
+        className="uppy:hidden"
+        ref={fileInputRef}
+        multiple
+        onChange={handleFileInputChange}
+      />
+      <div
+        role="button"
+        tabIndex={0}
+        style={{
+          width: width || '100%',
+          height: height || '100%',
+        }}
+        className={clsx(
+          'uppy:border-2 uppy:border-dashed uppy:border-gray-300',
+          'uppy:rounded-lg uppy:p-6 uppy:bg-gray-50',
+          'uppy:transition-colors uppy:duration-200',
+          {
+            'uppy:bg-blue-50': isDragging,
+          },
+          {
+            'uppy:cursor-pointer uppy:hover:bg-blue-50': !noClick,
+          },
+        )}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onClick={handleClick}
+      >
+        <div className="uppy:flex uppy:flex-col uppy:items-center uppy:justify-center uppy:h-full uppy:space-y-3">
+          <p className="uppy:text-gray-600">
+            Drop files here or click to add them
+          </p>
+        </div>
+        {note ?
+          <div className="uppy:text-sm uppy:text-gray-500">{note}</div>
+        : null}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/@uppy/components/src/FilesGrid.tsx b/packages/@uppy/components/src/FilesGrid.tsx
new file mode 100644
index 000000000..af464a805
--- /dev/null
+++ b/packages/@uppy/components/src/FilesGrid.tsx
@@ -0,0 +1,102 @@
+/* eslint-disable react/destructuring-assignment */
+import { Fragment, h } from 'preact'
+import { useState, useEffect } from 'preact/hooks'
+
+import type { Body, Meta, UppyEventMap, UppyFile } from '@uppy/core'
+import prettyBytes from 'pretty-bytes'
+import { clsx } from 'clsx'
+import { Thumbnail } from './index.js'
+import type { UppyContext } from './types.js'
+
+export type FilesGridProps = {
+  editFile?: (file: UppyFile<Meta, Body>) => void
+  columns?: number
+  ctx: UppyContext
+}
+
+export default function FilesGrid(props: FilesGridProps) {
+  const [files, setFiles] = useState<UppyFile<Meta, Body>[]>(() => [])
+  const { ctx, editFile } = props
+
+  function gridColsClass() {
+    return (
+      {
+        1: 'uppy:grid-cols-1',
+        2: 'uppy:grid-cols-2',
+        3: 'uppy:grid-cols-3',
+        4: 'uppy:grid-cols-4',
+        5: 'uppy:grid-cols-5',
+        6: 'uppy:grid-cols-6',
+      }[props.columns || 2] || 'uppy:grid-cols-2'
+    )
+  }
+
+  useEffect(() => {
+    const onStateUpdate: UppyEventMap<any, any>['state-update'] = (
+      prev,
+      next,
+      patch,
+    ) => {
+      if (patch?.files) {
+        setFiles(Object.values(patch.files))
+      }
+    }
+    ctx.uppy?.on('state-update', onStateUpdate)
+    return () => {
+      ctx.uppy?.off('state-update', onStateUpdate)
+    }
+  }, [ctx.uppy])
+
+  return (
+    <div
+      data-uppy-element="files-grid"
+      className={clsx(
+        'uppy:reset uppy:my-4 uppy:grid uppy:gap-4',
+        gridColsClass(),
+      )}
+    >
+      {files?.map((file) => (
+        <div
+          className="uppy:flex uppy:flex-col uppy:items-center uppy:gap-2"
+          key={file.id}
+        >
+          <Fragment>
+            <Thumbnail images file={file} />
+            <div className="uppy:w-full uppy-reset">
+              <p className="uppy:font-medium uppy:truncate" title={file.name}>
+                {file.name}
+              </p>
+              <div className="uppy:flex uppy:items-center uppy:gap-2">
+                <p className=" uppy:text-gray-500 uppy:tabular-nums ">
+                  {prettyBytes(file.size || 0)}
+                </p>
+
+                {editFile && (
+                  <button
+                    type="button"
+                    className="uppy:flex uppy:rounded uppy:text-blue-500 uppy:hover:text-blue-700 uppy:bg-transparent uppy:transition-colors"
+                    onClick={() => {
+                      editFile(file)
+                    }}
+                  >
+                    edit
+                  </button>
+                )}
+
+                <button
+                  type="button"
+                  className="uppy:flex uppy:rounded uppy:text-blue-500 uppy:hover:text-blue-700 uppy:bg-transparent uppy:transition-colors"
+                  onClick={() => {
+                    ctx.uppy?.removeFile(file.id)
+                  }}
+                >
+                  remove
+                </button>
+              </div>
+            </div>
+          </Fragment>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/packages/@uppy/components/src/FilesList.tsx b/packages/@uppy/components/src/FilesList.tsx
new file mode 100644
index 000000000..031b0371e
--- /dev/null
+++ b/packages/@uppy/components/src/FilesList.tsx
@@ -0,0 +1,93 @@
+/* eslint-disable react/destructuring-assignment */
+import { Fragment, h } from 'preact'
+import { useState, useEffect } from 'preact/hooks'
+
+import type { Meta, Body, UppyEventMap, UppyFile } from '@uppy/core'
+import prettyBytes from 'pretty-bytes'
+import { clsx } from 'clsx'
+import { Thumbnail, type UppyContext } from './index.js'
+
+export type FilesListProps = {
+  editFile?: (file: UppyFile<Meta, Body>) => void
+  ctx: UppyContext
+}
+
+export default function FilesList(props: FilesListProps) {
+  const [files, setFiles] = useState<UppyFile<any, any>[]>(() => [])
+  const { ctx, editFile } = props
+
+  useEffect(() => {
+    const onStateUpdate: UppyEventMap<any, any>['state-update'] = (
+      prev,
+      next,
+      patch,
+    ) => {
+      if (patch?.files) {
+        setFiles(Object.values(patch.files))
+      }
+    }
+    ctx.uppy?.on('state-update', onStateUpdate)
+    return () => {
+      ctx.uppy?.off('state-update', onStateUpdate)
+    }
+  }, [ctx.uppy])
+
+  return (
+    <ul data-uppy-element="files-list" className="uppy-reset uppy:my-4">
+      {files?.map((file) => (
+        <li key={file.id}>
+          <Fragment>
+            <div className="uppy:flex uppy:items-center uppy:gap-2">
+              <div className="uppy:w-[32px] uppy:h-[32px]">
+                <Thumbnail width="32px" height="32px" file={file} />
+              </div>
+
+              <p className="uppy:truncate">{file.name}</p>
+              <p className="uppy:text-gray-500 uppy:tabular-nums uppy:min-w-18 uppy:text-right uppy:ml-auto">
+                {prettyBytes(file.size || 0)}
+              </p>
+
+              <Fragment>
+                {editFile && (
+                  <button
+                    type="button"
+                    className="uppy:flex uppy:rounded uppy:text-blue-500 uppy:hover:text-blue-700 uppy:bg-transparent uppy:transition-colors"
+                    onClick={() => {
+                      editFile(file)
+                    }}
+                  >
+                    edit
+                  </button>
+                )}
+                <button
+                  type="button"
+                  className="uppy:flex uppy:rounded uppy:text-blue-500 uppy:hover:text-blue-700 uppy:bg-transparent uppy:transition-colors"
+                  onClick={() => {
+                    ctx.uppy?.removeFile(file.id)
+                  }}
+                >
+                  remove
+                </button>
+              </Fragment>
+            </div>
+            <progress
+              max="100"
+              className={clsx(
+                'uppy:w-full uppy:h-[2px] uppy:appearance-none uppy:bg-gray-100 uppy:rounded-full uppy:overflow-hidden uppy:[&::-webkit-progress-bar]:bg-gray-100 uppy:block uppy:my-2',
+                {
+                  'uppy:[&::-webkit-progress-value]:bg-green-500 uppy:[&::-moz-progress-bar]:bg-green-500':
+                    file.progress?.uploadComplete,
+                  'uppy:[&::-webkit-progress-value]:bg-red-500 uppy:[&::-moz-progress-bar]:bg-red-500':
+                    file.error,
+                  'uppy:[&::-webkit-progress-value]:bg-blue-500 uppy:[&::-moz-progress-bar]:bg-blue-500':
+                    !file.progress?.uploadComplete && !file.error,
+                },
+              )}
+              value={file.progress?.percentage || 0}
+            />
+          </Fragment>
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/packages/@uppy/components/src/ProviderIcon.tsx b/packages/@uppy/components/src/ProviderIcon.tsx
new file mode 100644
index 000000000..f82a2b6ef
--- /dev/null
+++ b/packages/@uppy/components/src/ProviderIcon.tsx
@@ -0,0 +1,231 @@
+/* eslint-disable react/destructuring-assignment */
+import { h } from 'preact'
+import type { UppyContext } from './types'
+
+export type ProviderIconProps = {
+  provider:
+    | 'device'
+    | 'camera'
+    | 'screen-capture'
+    | 'audio'
+    | 'dropbox'
+    | 'facebook'
+    | 'instagram'
+    | 'onedrive'
+    | 'googlephotos'
+    | 'googledrive'
+  fill?: string
+  // eslint-disable-next-line react/no-unused-prop-types
+  ctx?: UppyContext
+}
+
+export default function ProviderIcon(props: ProviderIconProps) {
+  switch (props.provider) {
+    case 'device':
+      return (
+        <svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32">
+          <path
+            d="M8.45 22.087l-1.305-6.674h17.678l-1.572 6.674H8.45zm4.975-12.412l1.083 1.765a.823.823 0 00.715.386h7.951V13.5H8.587V9.675h4.838zM26.043 13.5h-1.195v-2.598c0-.463-.336-.75-.798-.75h-8.356l-1.082-1.766A.823.823 0 0013.897 8H7.728c-.462 0-.815.256-.815.718V13.5h-.956a.97.97 0 00-.746.37.972.972 0 00-.19.81l1.724 8.565c.095.44.484.755.933.755H24c.44 0 .824-.3.929-.727l2.043-8.568a.972.972 0 00-.176-.825.967.967 0 00-.753-.38z"
+            fill-rule="evenodd"
+            fill={props.fill || 'currentcolor'}
+          />
+        </svg>
+      )
+    case 'camera':
+      return (
+        <svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32">
+          <path
+            d="M23.5 9.5c1.417 0 2.5 1.083 2.5 2.5v9.167c0 1.416-1.083 2.5-2.5 2.5h-15c-1.417 0-2.5-1.084-2.5-2.5V12c0-1.417 1.083-2.5 2.5-2.5h2.917l1.416-2.167C13 7.167 13.25 7 13.5 7h5c.25 0 .5.167.667.333L20.583 9.5H23.5zM16 11.417a4.706 4.706 0 00-4.75 4.75 4.704 4.704 0 004.75 4.75 4.703 4.703 0 004.75-4.75c0-2.663-2.09-4.75-4.75-4.75zm0 7.825c-1.744 0-3.076-1.332-3.076-3.074 0-1.745 1.333-3.077 3.076-3.077 1.744 0 3.074 1.333 3.074 3.076s-1.33 3.075-3.074 3.075z"
+            fill-rule="nonzero"
+            fill={props.fill || '#02B383'}
+          />
+        </svg>
+      )
+    case 'screen-capture':
+      return (
+        <svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32">
+          <g fill="currentcolor" fill-rule="evenodd">
+            <path d="M24.182 9H7.818C6.81 9 6 9.742 6 10.667v10c0 .916.81 1.666 1.818 1.666h4.546V24h7.272v-1.667h4.546c1 0 1.809-.75 1.809-1.666l.009-10C26 9.742 25.182 9 24.182 9zM24 21H8V11h16v10z" />
+            <circle cx="16" cy="16" r="2" />
+          </g>
+        </svg>
+      )
+    case 'audio':
+      return (
+        <svg aria-hidden="true" width="32px" height="32px" viewBox="0 0 32 32">
+          <path
+            d="M21.143 12.297c.473 0 .857.383.857.857v2.572c0 3.016-2.24 5.513-5.143 5.931v2.64h2.572a.857.857 0 110 1.714H12.57a.857.857 0 110-1.714h2.572v-2.64C12.24 21.24 10 18.742 10 15.726v-2.572a.857.857 0 111.714 0v2.572A4.29 4.29 0 0016 20.01a4.29 4.29 0 004.286-4.285v-2.572c0-.474.384-.857.857-.857zM16 6.5a3 3 0 013 3v6a3 3 0 01-6 0v-6a3 3 0 013-3z"
+            fill="currentcolor"
+            fill-rule="nonzero"
+          />
+        </svg>
+      )
+    case 'dropbox':
+      return (
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M10.5 7.5L5 10.955l5.5 3.454 5.5-3.454 5.5 3.454 5.5-3.454L21.5 7.5 16 10.955zM10.5 21.319L5 17.864l5.5-3.455 5.5 3.455zM16 17.864l5.5-3.455 5.5 3.455-5.5 3.455zM16 25.925l-5.5-3.455 5.5-3.454 5.5 3.454z"
+            fill={props.fill || 'currentcolor'}
+            fillRule="nonzero"
+          />
+        </svg>
+      )
+    case 'facebook':
+      return (
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M27 16c0-6.075-4.925-11-11-11S5 9.925 5 16c0 5.49 4.023 10.041 9.281 10.866V19.18h-2.793V16h2.793v-2.423c0-2.757 1.642-4.28 4.155-4.28 1.204 0 2.462.215 2.462.215v2.707h-1.387c-1.366 0-1.792.848-1.792 1.718V16h3.05l-.487 3.18h-2.563v7.686C22.977 26.041 27 21.49 27 16"
+              fill="#1777F2"
+            />
+            <path
+              d="M20.282 19.18L20.77 16h-3.051v-2.063c0-.87.426-1.718 1.792-1.718h1.387V9.512s-1.258-.215-2.462-.215c-2.513 0-4.155 1.523-4.155 4.28V16h-2.793v3.18h2.793v7.686a11.082 11.082 0 003.438 0V19.18h2.563"
+              fill="#FFFFFE"
+            />
+          </g>
+        </svg>
+      )
+    case 'instagram':
+      return (
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <defs>
+            <path
+              d="M16.825 5l.483-.001.799.002c1.168.005 1.598.021 2.407.057 1.17.05 1.97.235 2.67.506.725.28 1.34.655 1.951 1.265.613.61.99 1.223 1.273 1.946.273.7.46 1.498.516 2.67l.025.552.008.205c.029.748.037 1.51.042 3.777l.001.846v.703l-.001.398a50.82 50.82 0 01-.058 2.588c-.05 1.17-.235 1.97-.506 2.67a5.394 5.394 0 01-1.265 1.951c-.61.613-1.222.99-1.946 1.273-.699.273-1.498.46-2.668.516-.243.012-.451.022-.656.03l-.204.007c-.719.026-1.512.034-3.676.038l-.847.001h-1.1a50.279 50.279 0 01-2.587-.059c-1.171-.05-1.971-.235-2.671-.506a5.394 5.394 0 01-1.951-1.265 5.385 5.385 0 01-1.272-1.946c-.274-.699-.46-1.498-.517-2.668a88.15 88.15 0 01-.03-.656l-.007-.205c-.026-.718-.034-1.512-.038-3.674v-2.129c.006-1.168.022-1.597.058-2.406.051-1.171.235-1.971.506-2.672a5.39 5.39 0 011.265-1.95 5.381 5.381 0 011.946-1.272c.699-.274 1.498-.462 2.669-.517l.656-.03.204-.007c.718-.026 1.511-.034 3.674-.038zm.678 1.981h-1.226l-.295.001c-2.307.005-3.016.013-3.777.043l-.21.009-.457.02c-1.072.052-1.654.232-2.042.383-.513.2-.879.44-1.263.825a3.413 3.413 0 00-.82 1.267c-.15.388-.33.97-.375 2.043a48.89 48.89 0 00-.056 2.482v.398 1.565c.006 2.937.018 3.285.073 4.444.05 1.073.231 1.654.382 2.043.2.512.44.878.825 1.263.386.383.753.621 1.267.82.388.15.97.328 2.043.374.207.01.388.017.563.024l.208.007a63.28 63.28 0 002.109.026h1.564c2.938-.006 3.286-.019 4.446-.073 1.071-.051 1.654-.232 2.04-.383.514-.2.88-.44 1.264-.825.384-.386.622-.753.82-1.266.15-.389.328-.971.375-2.044.039-.88.054-1.292.057-2.723v-1.15-.572c-.006-2.936-.019-3.284-.074-4.445-.05-1.071-.23-1.654-.382-2.04-.2-.515-.44-.88-.825-1.264a3.405 3.405 0 00-1.267-.82c-.388-.15-.97-.328-2.042-.375a48.987 48.987 0 00-2.535-.056zm-1.515 3.37a5.65 5.65 0 11.021 11.299 5.65 5.65 0 01-.02-11.3zm.004 1.982a3.667 3.667 0 10.015 7.334 3.667 3.667 0 00-.015-7.334zm5.865-3.536a1.32 1.32 0 11.005 2.64 1.32 1.32 0 01-.005-2.64z"
+              id="a"
+            />
+          </defs>
+          <g fill="none" fill-rule="evenodd">
+            <mask id="b" fill="#fff">
+              <use xlinkHref="#a" />
+            </mask>
+            <image
+              mask="url(#b)"
+              x="4"
+              y="4"
+              width="24"
+              height="24"
+              xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAALKADAAQAAAABAAAALAAAAAD8buejAAALZklEQVRYCVWZC2LbNhAFCRKykvP0bD1506SxRKIzbwHJoU3jv5h9WICU3P7+6zlG2zZvr8s/rW1tN7U0rMll8aDYufdzbLfc1JHmpv3jpPy8tsO+3O2s/O6YMSjTl/qdCds4mIIG60m8vdq2Z+phm2V4vAb9+o7BbZeuoM0NyYazvTvbvlN1MGjHUAesZ/IWWOsCeF0BOwAK4ITR0WYd/QKHEPv2DEymmorZtiubjOHEMYEzXmC9GMxu+95Kz+kuwxjDBKb8iUoCAdqZoAeyALreW6ZNx9Y4Jz8cLwjTZOEoR+HU05k2RzgP2iafGgfZiEdZbEr94zpX/xkPtDtGAxF+LRcgTsp9CAZg0rnEnXmPqFshY5vLnVWxLXO/bah2sZQgBZppGSe8NbjNPN5kc/WbIYEn8U+jXCOezT4zfgS1eoVEhceVeK74Fe4N6CoYEoLWykzHsd+GMAUqdTTVvvqT1uWqB3lVCLb12/ORAe8/5Zu9mp7lqoEFUCAFDIxqz7i1bq2AY1U9jqq2QK/7DYl+1AeZlAFcEc+U/jkRUqsvCHQ/nyGvjrOl6EuZWRWVGCKUMCkntQ5o+u2AZ3OxakbTcoBZnY0xhgGCUM4Kp1xtBTnBnXM5ASRms/Fs7d9OpX8bXN45pibQY/ML1MmA5G9CINBuCpdftexr6i2c5qd9J441LNJm3zk1GVusJ7v6mPJ7HPxJR0Li/vg9O1XHTEgvsQoSgExU0NnlLF0paK+6d06aOMKE2nCKV0ofNw4WsWmLsWrv6lPLnhGpr9E137QkHOMB/jh/T8MOqOadXarR44zPBW5NvDccnBxVmdK81+7RQ5p6qnQoRDZPh9+xWj0N2XpqxX1HzMty9UlFnKya/h3gulziAsyxwkSmpTIPB8vagKLyktRdDuBEHNGZMm4oCFWgjq31WPHpaC93gGNqpOpP4Ez4spa+nMNvhTWcuPKAJ79fqIxVoUvdjEG9qSy2WhpQlz61yG/gnKEA25IrIOYK6DIsQs2EE9LR/sTKq38Nd1y/X//FXG0QDHkEqSz3EYVV2dhb00rgLPSDcqmrScs55NNOD2zVqKmYnYTFnkACp520dkW5vBxK99BVzr792/iZ+VVo92UkKU2oG5WFTb6mNiA1H2C8KC0E44qaQleR3EQvQNwLrECOVAiSwM5gpF7nvDND0lZvYuQ9JbZfqdTrqCgwMcVrRS0z9QkLu9NWmkgEHb8p2zDRylj9VWA3lXD2vObEdWpT3w5MiFqQ1W/lteG4eipastxv2w+TeTBP0ypK84HiOW9fUzLcjRDwCW2b2VxmnGSKTX6uRSwMnC9YX4l05Mh2uwI+QVWdWUOSTWd5Xjjf7/tPYk2stSh053XTGN5RJMCMSajMcS8Trn3j/E1ajthlxCkmJXVi47PSUsyyq+jyexsayQNuv5GVYJaszprNsQD3RkgYiy49kFl2JlJJxlf8Uu/lpkq7+aWqzEzjr5cTVpFaJvSVr8AKRtiTlVPFk5t1nO30W+o6jrbAk76kxFa/tX+dom4C1wDPk03gqCw8HTBSxx4FHxIA+mh2pM3rKu5SNqBAuOSZnHzsB9JwW7DV/ge8dlVsOh375PvH8YO8EALU1HuecIC6qQgXifNuSx9XAoLaoGIYDjkWFrawX1U1XrknuMFw7QBSPtg79XovmBvwqnDICrhClEO6wgKFj9vPqJWlthUvdgH1DOA8+wFMexzQc5BUS1d1IsdBSjEv4Fe1LgBO1CpFPTpV1JuPSFNt4y/trzbtaUfwBWwM3/6JsrL6MSQYwLKXAm9YJBxsM8992MblZ63Gami0+rnwOMyPykVpQsyl9eYNOfVC6kRBkwaop//LgcAKWivkHF791g0JK5kMmCgKPas2QRkUFQsuTvm6R1946Wg95k764ZRLW59yO5UVGsawwELupCfAbdCuAwvcz5Xk18rIVEdgSRBRgO77R206QdXHuA2goaGiCQ0GmUfN1JlmFayjv0IcKGkfYt4HAj0yuQBRGDjzuS/rTmAf29Gov1S+FF7QBayNcpoBOEsMt3vFcIUC7VxOnE+pxmkgqEzduzwsPykrjBszCusgdarsRIAL6CM/KqsqcAf1vj8P1TXFyN6e5G8ao48fjKfDQJYizIdIfb+Xwp6Z2fE2C7mUfUEzMKqSBp4VUV1A49Sz1M2LzVzahEfyHUAcQNltR0nADYkBvHXDZQo8H9dQvHF7qhjPtSolBJ0A/vaLwdRz5YFFGoWBy8E/4aKcjqimaUBXXnjBpzOZnMlIVXsTVEBBUa+dD0BR0xVopgAD70psY0KjMHpmHB2kApea9o23NS83mpsref5OZet4U/0CMhSEDpwnxB9lVKSfk5djllXRFPizQmKcqMpnyZ3ycPntf96Ym9ChzU8vCQnhgWZ2UuySArw+cVBG4gqNCS6YoSEEziRWVStKUpe4FfCd91V0XA/qgOJuF7FpGjjyQgsFoNDtibp8cm+cyXxbB6zh4pMUO4H06yzsv4E/A6rg/uRJRnMRmrhMDIhyOjABX9CMDFhBFxx19KujjqWeim5PwVFU6IBiewfyk7IPETcg52kjXN7nsbaoEykKf/cjUgVxpTZZVtnqFMgv4FHa8oSOisawinMLHfUBzJcK1j8BeqquedKDtgcgnA4bym4P6gBWYVM3W/pn41ku5L4RElFWtlk5SXHEThhOWDiIyVROlQNM+wyHimlgATI/PPIm4BB8qfqwHnhgL89gzs+Ww1xQb4821SZ/4IwOJiRqH/X9u7Hj08JLSZfawOQcpRzwgk1oBNzzcgLn1FBNHspMENik9OG4awIDaUjw9rKNT1KXPl9neua6sSbkgqfs/CNfBdNfDDhQuL4AKXEXeOgZID91eOiRUnEFOIA5rnTkBU0/IT05gByoq5KBJF4Hym4Pxh3UcxZ7HjdhEhKWURbhavNR9rjLBwk3ryDcrGzfvk9I69b1yhMGWQ4bqMwv/RMSplQkjjVKXzZX8wESVcuB7QG0YUCMjk/aOmWgc/vC4oMCVYfghIGP6MT1zpeUhM1rQzOnGxmFKwTCir1Xaj5vN7T7nDZvnbDGHbCKnwji2zofNsOvbold3zlUtKGosBun3PbJSrrReHEaCQVCIDEMaCCBs+P+AbybkbIhmbNecGwF+E5/L2ECuPKCWsUESQkKnyyJ93TGACk7OrAY9P8XG//fGCoM7DAEUGnj5Mw7aQfelySWOm9iPuFyvrL8rKQR6mM6qdCUDQsfNPVu4yv/HaPOT1e/yDaviMKmTkg/I/F7MUG9OlrmDrBLRVd3c8KBJlPEKoVRcIJuhoQAmZDUkPC00W5OI1dOpQ1F61kFNqr9SmFcaHdBheOaDHF6QZMOP6QyiZ804oj98wLiAMIgcWw4UDYkDAWfR+4d5s0zP2GgUZX04i+NeSgYGokvbDhIZYUWHgd9K8zZzir264NxZUFbsfM1jdqpV2naA48tx6hsvBSabE4IMtlcOGgq8PqCjoly2rw2soqy4RJWQtPZl6PUCU14ZUWENuZV2Honn3f+k6R6wrkqgTStyQ0bFY+XAaafMRFgUlVeXxXFUcpLEYfZz3FrVUzZrOOJK+4B/wnIZ8TGRvb9OB8EUM0w8uNYj/oa9iK9AMoy6gA72o02srMxpAPUD+EDnVEF7P5xw896VyAbFk8MgnpVpR3gfLnt/wECq3rYFvYLcKCpqvcI+/hVl8AumXDeApklDRRKJSS+KOaq1Rgg4igOYtiQK1hJy46TBtDjznDp3iqJff5j0/LfSZbYVdauqXccJ9W+czupp0sU9gMlqkQ52lU1E6tUwoDUukAD6YRpAwqDrAErzA8QCRvXm98KEep0xIdY1CN1ye27IP0IHvvYIW18qGz8S7VWUZuMkUOb3P8DHTl67ur/i1UAAAAASUVORK5CYII="
+            />
+          </g>
+        </svg>
+      )
+    case 'onedrive':
+      return (
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <g fill="none" fillRule="nonzero">
+            <path
+              d="M13.39 12.888l4.618 2.747 2.752-1.15a4.478 4.478 0 012.073-.352 6.858 6.858 0 00-5.527-5.04 6.895 6.895 0 00-6.876 2.982l.07-.002a5.5 5.5 0 012.89.815z"
+              fill="#0364B8"
+            />
+            <path
+              d="M13.39 12.887v.001a5.5 5.5 0 00-2.89-.815l-.07.002a5.502 5.502 0 00-4.822 2.964 5.43 5.43 0 00.38 5.62l4.073-1.702 1.81-.757 4.032-1.685 2.105-.88-4.619-2.748z"
+              fill="#0078D4"
+            />
+            <path
+              d="M22.833 14.133a4.479 4.479 0 00-2.073.352l-2.752 1.15.798.475 2.616 1.556 1.141.68 3.902 2.321a4.413 4.413 0 00-.022-4.25 4.471 4.471 0 00-3.61-2.284z"
+              fill="#1490DF"
+            />
+            <path
+              d="M22.563 18.346l-1.141-.68-2.616-1.556-.798-.475-2.105.88L11.87 18.2l-1.81.757-4.073 1.702A5.503 5.503 0 0010.5 23h12.031a4.472 4.472 0 003.934-2.333l-3.902-2.321z"
+              fill="#28A8EA"
+            />
+          </g>
+        </svg>
+      )
+    case 'googlephotos':
+      return (
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          width="32"
+          height="32"
+          viewBox="-7 -7 73 73"
+        >
+          <g fill="none" fillRule="evenodd">
+            <path d="M-3-3h64v64H-3z" />
+            <g fillRule="nonzero">
+              <path
+                fill="#FBBC04"
+                d="M14.8 13.4c8.1 0 14.7 6.6 14.7 14.8v1.3H1.3c-.7 0-1.3-.6-1.3-1.3C0 20 6.6 13.4 14.8 13.4z"
+              />
+              <path
+                fill="#EA4335"
+                d="M45.6 14.8c0 8.1-6.6 14.7-14.8 14.7h-1.3V1.3c0-.7.6-1.3 1.3-1.3C39 0 45.6 6.6 45.6 14.8z"
+              />
+              <path
+                fill="#4285F4"
+                d="M44.3 45.6c-8.2 0-14.8-6.6-14.8-14.8v-1.3h28.2c.7 0 1.3.6 1.3 1.3 0 8.2-6.6 14.8-14.8 14.8z"
+              />
+              <path
+                fill="#34A853"
+                d="M13.4 44.3c0-8.2 6.6-14.8 14.8-14.8h1.3v28.2c0 .7-.6 1.3-1.3 1.3-8.2 0-14.8-6.6-14.8-14.8z"
+              />
+            </g>
+          </g>
+        </svg>
+      )
+    case 'googledrive':
+      return (
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <g fillRule="nonzero" fill="none">
+            <path
+              d="M6.663 22.284l.97 1.62c.202.34.492.609.832.804l3.465-5.798H5c0 .378.1.755.302 1.096l1.361 2.278z"
+              fill="#0066DA"
+            />
+            <path
+              d="M16 12.09l-3.465-5.798c-.34.195-.63.463-.832.804l-6.4 10.718A2.15 2.15 0 005 18.91h6.93L16 12.09z"
+              fill="#00AC47"
+            />
+            <path
+              d="M23.535 24.708c.34-.195.63-.463.832-.804l.403-.67 1.928-3.228c.201-.34.302-.718.302-1.096h-6.93l1.474 2.802 1.991 2.996z"
+              fill="#EA4335"
+            />
+            <path
+              d="M16 12.09l3.465-5.798A2.274 2.274 0 0018.331 6h-4.662c-.403 0-.794.11-1.134.292L16 12.09z"
+              fill="#00832D"
+            />
+            <path
+              d="M20.07 18.91h-8.14l-3.465 5.798c.34.195.73.292 1.134.292h12.802c.403 0 .794-.11 1.134-.292L20.07 18.91z"
+              fill="#2684FC"
+            />
+            <path
+              d="M23.497 12.455l-3.2-5.359a2.252 2.252 0 00-.832-.804L16 12.09l4.07 6.82h6.917c0-.377-.1-.755-.302-1.096l-3.188-5.359z"
+              fill="#FFBA00"
+            />
+          </g>
+        </svg>
+      )
+    default:
+      return null
+  }
+}
diff --git a/packages/@uppy/components/src/Thumbnail.tsx b/packages/@uppy/components/src/Thumbnail.tsx
new file mode 100644
index 000000000..27d2c38fc
--- /dev/null
+++ b/packages/@uppy/components/src/Thumbnail.tsx
@@ -0,0 +1,182 @@
+/* eslint-disable react/destructuring-assignment */
+import { h } from 'preact'
+import { useMemo, useEffect } from 'preact/hooks'
+import type { Body, Meta, UppyFile } from '@uppy/core'
+import type { UppyContext } from './types'
+
+export type ThumbnailProps = {
+  file: UppyFile<Meta, Body>
+  width?: string
+  height?: string
+  images?: boolean
+  // eslint-disable-next-line react/no-unused-prop-types
+  ctx?: UppyContext
+}
+
+export default function Thumbnail(props: ThumbnailProps) {
+  const width = props.width || '100%'
+  const height = props.height || '100%'
+  const fileTypeGeneral = props.file.type?.split('/')[0] || ''
+  const fileTypeSpecific = props.file.type?.split('/')[1] || ''
+  const isImage = props.file.type.startsWith('image/')
+  const isArchive =
+    fileTypeGeneral === 'application' &&
+    [
+      'zip',
+      'x-7z-compressed',
+      'x-zip-compressed',
+      'x-rar-compressed',
+      'x-tar',
+      'x-gzip',
+      'x-apple-diskimage',
+    ].includes(fileTypeSpecific)
+  const isPDF = fileTypeGeneral === 'application' && fileTypeSpecific === 'pdf'
+
+  const objectUrl = useMemo(() => {
+    if (!props.images) return ''
+    return URL.createObjectURL(props.file.data)
+  }, [props.file.data, props.images])
+  const showThumbnail = props.images && isImage && objectUrl
+
+  useEffect(() => {
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl)
+      }
+    }
+  }, [objectUrl])
+
+  return (
+    <div
+      data-uppy-element="thumbnail"
+      className="uppy:relative uppy:overflow-hidden uppy:bg-gray-100 uppy:rounded-lg uppy:flex uppy:items-center uppy:justify-center"
+      style={{
+        width,
+        height,
+        aspectRatio: '1',
+      }}
+    >
+      {showThumbnail ?
+        <img
+          className="uppy:w-full uppy:h-full uppy:object-cover"
+          src={objectUrl}
+          alt={props.file.name}
+        />
+      : null}
+      {!showThumbnail ?
+        <div className="uppy:flex uppy:flex-col uppy:items-center uppy:justify-center uppy:w-full uppy:h-full">
+          <div className="uppy:flex-1 uppy:flex uppy:items-center uppy:justify-center uppy:w-full">
+            {!props.file.type ?
+              <svg
+                aria-hidden="true"
+                className="uppy:w-3/4 uppy:h-3/4"
+                viewBox="0 0 25 25"
+              >
+                <g fill="#A7AFB7" fill-rule="nonzero">
+                  <path d="M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z" />
+                  <path d="M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z" />
+                </g>
+              </svg>
+            : null}
+            {fileTypeGeneral === 'text' ?
+              <svg
+                aria-hidden="true"
+                className="uppy:w-3/4 uppy:h-3/4"
+                viewBox="0 0 25 25"
+              >
+                <path
+                  d="M4.5 7h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1z"
+                  fill="#5A5E69"
+                  fill-rule="nonzero"
+                />
+              </svg>
+            : null}
+            {fileTypeGeneral === 'image' && !showThumbnail ?
+              <svg
+                aria-hidden="true"
+                className="uppy:w-3/4 uppy:h-3/4"
+                viewBox="0 0 25 25"
+              >
+                <g fill="#686DE0" fill-rule="evenodd">
+                  <path
+                    d="M5 7v10h15V7H5zm0-1h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z"
+                    fill-rule="nonzero"
+                  />
+                  <path
+                    d="M6.35 17.172l4.994-5.026a.5.5 0 0 1 .707 0l2.16 2.16 3.505-3.505a.5.5 0 0 1 .707 0l2.336 2.31-.707.72-1.983-1.97-3.505 3.505a.5.5 0 0 1-.707 0l-2.16-2.159-3.938 3.939-1.409.026z"
+                    fill-rule="nonzero"
+                  />
+                  <circle cx="7.5" cy="9.5" r="1.5" />
+                </g>
+              </svg>
+            : null}
+            {fileTypeGeneral === 'audio' ?
+              <svg
+                aria-hidden="true"
+                className="uppy:w-3/4 uppy:h-3/4"
+                viewBox="0 0 25 25"
+              >
+                <path
+                  d="M9.5 18.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V7.25a.5.5 0 0 1 .379-.485l9-2.25A.5.5 0 0 1 18.5 5v11.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V8.67l-8 2v7.97zm8-11v-2l-8 2v2l8-2zM7 19.64c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1zm9-2c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1z"
+                  fill="#049BCF"
+                  fill-rule="nonzero"
+                />
+              </svg>
+            : null}
+            {fileTypeGeneral === 'video' ?
+              <svg
+                aria-hidden="true"
+                className="uppy:w-3/4 uppy:h-3/4"
+                viewBox="0 0 25 25"
+              >
+                <path
+                  d="M16 11.834l4.486-2.691A1 1 0 0 1 22 10v6a1 1 0 0 1-1.514.857L16 14.167V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.834zM15 9H5v8h10V9zm1 4l5 3v-6l-5 3z"
+                  fill="#19AF67"
+                  fill-rule="nonzero"
+                />
+              </svg>
+            : null}
+            {isPDF ?
+              <svg
+                aria-hidden="true"
+                className="uppy:w-3/4 uppy:h-3/4"
+                viewBox="0 0 25 25"
+              >
+                <path
+                  d="M9.766 8.295c-.691-1.843-.539-3.401.747-3.726 1.643-.414 2.505.938 2.39 3.299-.039.79-.194 1.662-.537 3.148.324.49.66.967 1.055 1.51.17.231.382.488.629.757 1.866-.128 3.653.114 4.918.655 1.487.635 2.192 1.685 1.614 2.84-.566 1.133-1.839 1.084-3.416.249-1.141-.604-2.457-1.634-3.51-2.707a13.467 13.467 0 0 0-2.238.426c-1.392 4.051-4.534 6.453-5.707 4.572-.986-1.58 1.38-4.206 4.914-5.375.097-.322.185-.656.264-1.001.08-.353.306-1.31.407-1.737-.678-1.059-1.2-2.031-1.53-2.91zm2.098 4.87c-.033.144-.068.287-.104.427l.033-.01-.012.038a14.065 14.065 0 0 1 1.02-.197l-.032-.033.052-.004a7.902 7.902 0 0 1-.208-.271c-.197-.27-.38-.526-.555-.775l-.006.028-.002-.003c-.076.323-.148.632-.186.8zm5.77 2.978c1.143.605 1.832.632 2.054.187.26-.519-.087-1.034-1.113-1.473-.911-.39-2.175-.608-3.55-.608.845.766 1.787 1.459 2.609 1.894zM6.559 18.789c.14.223.693.16 1.425-.413.827-.648 1.61-1.747 2.208-3.206-2.563 1.064-4.102 2.867-3.633 3.62zm5.345-10.97c.088-1.793-.351-2.48-1.146-2.28-.473.119-.564 1.05-.056 2.405.213.566.52 1.188.908 1.859.18-.858.268-1.453.294-1.984z"
+                  fill="#E2514A"
+                  fill-rule="nonzero"
+                />
+              </svg>
+            : null}
+            {isArchive ?
+              <svg
+                aria-hidden="true"
+                className="uppy:w-3/4 uppy:h-3/4"
+                viewBox="0 0 25 25"
+              >
+                <path
+                  d="M10.45 2.05h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V2.55a.5.5 0 0 1 .5-.5zm2.05 1.024h1.05a.5.5 0 0 1 .5.5V3.6a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5v-.001zM10.45 0h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 3.074h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 1.024h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm-2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm-2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-1.656 3.074l-.82 5.946c.52.302 1.174.458 1.976.458.803 0 1.455-.156 1.975-.458l-.82-5.946h-2.311zm0-1.025h2.312c.512 0 .946.378 1.015.885l.82 5.946c.056.412-.142.817-.501 1.026-.686.398-1.515.597-2.49.597-.974 0-1.804-.199-2.49-.597a1.025 1.025 0 0 1-.5-1.026l.819-5.946c.07-.507.503-.885 1.015-.885zm.545 6.6a.5.5 0 0 1-.397-.561l.143-.999a.5.5 0 0 1 .495-.429h.74a.5.5 0 0 1 .495.43l.143.998a.5.5 0 0 1-.397.561c-.404.08-.819.08-1.222 0z"
+                  fill="#00C469"
+                  fill-rule="nonzero"
+                />
+              </svg>
+            : null}
+            {props.file.type && !fileTypeGeneral && !isPDF && !isArchive ?
+              <svg
+                aria-hidden="true"
+                className="uppy:w-3/4 uppy:h-3/4"
+                viewBox="0 0 25 25"
+              >
+                <g fill="#A7AFB7" fill-rule="nonzero">
+                  <path d="M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z" />
+                  <path d="M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z" />
+                </g>
+              </svg>
+            : null}
+          </div>
+        </div>
+      : null}
+    </div>
+  )
+}
diff --git a/packages/@uppy/components/src/UploadButton.tsx b/packages/@uppy/components/src/UploadButton.tsx
new file mode 100644
index 000000000..27994e318
--- /dev/null
+++ b/packages/@uppy/components/src/UploadButton.tsx
@@ -0,0 +1,105 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/destructuring-assignment */
+import { h } from 'preact'
+import { clsx } from 'clsx'
+import type { UppyContext } from './types'
+
+export type UploadButtonProps = {
+  ctx: UppyContext
+}
+
+export default function UploadButton(props: UploadButtonProps) {
+  const { ctx } = props
+
+  return (
+    <div className="uppy-reset uppy:space-y-2">
+      <button
+        type="button"
+        data-uppy-element="upload-button"
+        data-state={ctx.status}
+        onClick={() => {
+          if (ctx.status === 'ready') {
+            ctx.uppy?.upload()
+          }
+        }}
+        className={clsx(
+          'uppy:relative uppy:w-full uppy:p-2 uppy:rounded-lg',
+          'uppy:text-white uppy:font-medium',
+          'uppy:transition-all uppy:overflow-hidden',
+          'uppy:bg-blue-500 uppy:hover:bg-blue-600',
+          {
+            'uppy:bg-red-500 uppy:hover:bg-red-600': ctx.status === 'error',
+            'uppy:bg-green-500 uppy:hover:bg-green-600':
+              ctx.status === 'complete',
+          },
+          'uppy:disabled:hover:bg-blue-500 uppy:disabled:cursor-not-allowed',
+        )}
+        disabled={
+          ctx.status === 'init' ||
+          ctx.status === 'uploading' ||
+          ctx.status === 'paused'
+        }
+      >
+        <div
+          className={clsx(
+            'uppy:absolute uppy:inset-0 uppy:origin-left uppy:transition-all',
+            {
+              'uppy:bg-red-700': ctx.status === 'error',
+              'uppy:bg-green-700': ctx.status === 'complete',
+              'uppy:bg-blue-700':
+                ctx.status !== 'error' && ctx.status !== 'complete',
+            },
+          )}
+          style={{
+            transform: `scaleX(${ctx.progress / 100})`,
+          }}
+        />
+        <span className="uppy:relative uppy:z-10">
+          {ctx.status === 'uploading' || ctx.status === 'paused' ?
+            `Uploaded ${Math.round(ctx.progress)}%`
+          : ctx.status === 'error' ?
+            'Retry'
+          : ctx.status === 'complete' ?
+            'Complete'
+          : 'Upload'}
+        </span>
+      </button>
+      {ctx.status === 'uploading' || ctx.status === 'paused' ?
+        <div className="uppy:flex uppy:gap-2">
+          {ctx.uppy?.getState().capabilities.resumableUploads ?
+            <button
+              type="button"
+              data-uppy-element="pause-button"
+              data-state={ctx.status}
+              onClick={() => {
+                if (ctx.status === 'paused') {
+                  ctx.uppy?.resumeAll()
+                } else {
+                  ctx.uppy?.pauseAll()
+                }
+              }}
+              className={clsx(
+                'uppy:w-full uppy:p-2 uppy:rounded-lg uppy:text-amber-500 uppy:bg-gray-50 uppy:hover:bg-amber-50 uppy:font-medium uppy:transition-all',
+                {
+                  'uppy:text-green-500 uppy:hover:bg-green-50':
+                    ctx.status === 'paused',
+                },
+              )}
+            >
+              {ctx.status === 'paused' ? 'Resume' : 'Pause'}
+            </button>
+          : null}
+          <button
+            type="button"
+            data-uppy-element="cancel-button"
+            className="uppy:w-full uppy:p-2 uppy:rounded-lg uppy:text-red-500 uppy:bg-gray-50 uppy:hover:bg-red-50 uppy:font-medium uppy:transition-all"
+            data-state={ctx.status}
+            onClick={() => ctx.uppy?.cancelAll()}
+          >
+            Cancel
+          </button>
+        </div>
+      : null}
+    </div>
+  )
+}
diff --git a/packages/@uppy/components/src/index.ts b/packages/@uppy/components/src/index.ts
new file mode 100644
index 000000000..ef096d31f
--- /dev/null
+++ b/packages/@uppy/components/src/index.ts
@@ -0,0 +1,17 @@
+export { default as Thumbnail, type ThumbnailProps } from './Thumbnail.js'
+export { default as FilesList, type FilesListProps } from './FilesList.js'
+export { default as FilesGrid, type FilesGridProps } from './FilesGrid.js'
+export { default as Dropzone, type DropzoneProps } from './Dropzone.js'
+export {
+  default as UploadButton,
+  type UploadButtonProps,
+} from './UploadButton.js'
+export {
+  default as ProviderIcon,
+  type ProviderIconProps,
+} from './ProviderIcon.js'
+
+export type { UppyContext } from './types.js'
+
+export { createUppyEventAdapter } from './uppyEventAdapter.js'
+export type { UploadStatus } from './types.js'
diff --git a/packages/@uppy/components/src/input.css b/packages/@uppy/components/src/input.css
new file mode 100644
index 000000000..b54f28365
--- /dev/null
+++ b/packages/@uppy/components/src/input.css
@@ -0,0 +1,66 @@
+@layer theme, base, components, utilities;
+
+/*
+* Split up tailwind imports to not import the preflight styles
+* as we don't want our components to affect the entire website of the user.
+*/
+@import 'tailwindcss/theme.css' layer(theme) prefix(uppy);
+@import 'tailwindcss/utilities.css' layer(utilities) prefix(uppy);
+
+@import '@uppy/core/dist/style.min.css';
+@import '@uppy/image-editor/dist/style.min.css';
+@import '@uppy/webcam/dist/style.min.css';
+@import '@uppy/audio/dist/style.min.css';
+@import '@uppy/screen-capture/dist/style.min.css';
+
+/*
+* Instead we took the preflight styles from tailwind and apply it under a .uppy-reset class
+* so we can enjoy the benefits of preflight styles without affecting the rest of the website.
+* Put under a @layer to prevent specificity issues.
+*/
+@layer components {
+  .uppy-reset,
+  .uppy-reset * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  .uppy-reset {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .uppy-reset h1,
+  .uppy-reset h2,
+  .uppy-reset h3,
+  .uppy-reset h4,
+  .uppy-reset h5,
+  .uppy-reset h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  .uppy-reset ol,
+  .uppy-reset ul,
+  .uppy-reset menu {
+    list-style: none;
+  }
+
+  .uppy-reset img,
+  .uppy-reset video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .uppy-reset button,
+  .uppy-reset input,
+  .uppy-reset select,
+  .uppy-reset textarea {
+    font: inherit;
+    color: inherit;
+  }
+}
diff --git a/packages/@uppy/components/src/types.ts b/packages/@uppy/components/src/types.ts
new file mode 100644
index 000000000..2d23e7321
--- /dev/null
+++ b/packages/@uppy/components/src/types.ts
@@ -0,0 +1,15 @@
+import type Uppy from '@uppy/core'
+
+export type UploadStatus =
+  | 'init'
+  | 'ready'
+  | 'uploading'
+  | 'paused'
+  | 'error'
+  | 'complete'
+
+export type UppyContext = {
+  uppy: Uppy | undefined
+  status: UploadStatus
+  progress: number
+}
diff --git a/packages/@uppy/components/src/uppyEventAdapter.ts b/packages/@uppy/components/src/uppyEventAdapter.ts
new file mode 100644
index 000000000..381c44a0c
--- /dev/null
+++ b/packages/@uppy/components/src/uppyEventAdapter.ts
@@ -0,0 +1,62 @@
+import Uppy from '@uppy/core'
+import type { UploadStatus } from './types'
+
+export function createUppyEventAdapter({
+  uppy,
+  onStatusChange,
+  onProgressChange,
+}: {
+  uppy: Uppy
+  onStatusChange: (status: UploadStatus) => void
+  onProgressChange: (progress: number) => void
+}): { cleanup: () => void } {
+  const onFileAdded = () => {
+    onStatusChange('ready')
+  }
+  const onUploadStarted = () => {
+    onStatusChange('uploading')
+  }
+  const onResumeAll = () => {
+    onStatusChange('uploading')
+  }
+  const onComplete = () => {
+    onStatusChange('complete')
+    onProgressChange(0)
+  }
+  const onError = () => {
+    onStatusChange('error')
+    onProgressChange(0)
+  }
+  const onCancelAll = () => {
+    onStatusChange('init')
+    onProgressChange(0)
+  }
+  const onPauseAll = () => {
+    onStatusChange('paused')
+  }
+  const onProgress = (p: number) => {
+    onProgressChange(p)
+  }
+
+  uppy.on('file-added', onFileAdded)
+  uppy.on('progress', onProgress)
+  uppy.on('upload', onUploadStarted)
+  uppy.on('complete', onComplete)
+  uppy.on('error', onError)
+  uppy.on('cancel-all', onCancelAll)
+  uppy.on('pause-all', onPauseAll)
+  uppy.on('resume-all', onResumeAll)
+
+  return {
+    cleanup: () => {
+      uppy.off('file-added', onFileAdded)
+      uppy.off('progress', onProgress)
+      uppy.off('upload', onUploadStarted)
+      uppy.off('complete', onComplete)
+      uppy.off('error', onError)
+      uppy.off('cancel-all', onCancelAll)
+      uppy.off('pause-all', onPauseAll)
+      uppy.off('resume-all', onResumeAll)
+    },
+  }
+}
diff --git a/packages/@uppy/components/tsconfig.build.json b/packages/@uppy/components/tsconfig.build.json
new file mode 100644
index 000000000..b34629f00
--- /dev/null
+++ b/packages/@uppy/components/tsconfig.build.json
@@ -0,0 +1,30 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "resolveJsonModule": false,
+    "rootDir": "./src"
+  },
+  "include": ["./src/**/*.*"],
+  "exclude": ["./src/**/*.test.ts"],
+  "references": [
+    {
+      "path": "../audio/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    },
+    {
+      "path": "../google-drive-picker/tsconfig.build.json"
+    },
+    {
+      "path": "../image-editor/tsconfig.build.json"
+    },
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}
diff --git a/packages/@uppy/components/tsconfig.json b/packages/@uppy/components/tsconfig.json
new file mode 100644
index 000000000..dde76ddbf
--- /dev/null
+++ b/packages/@uppy/components/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "noEmit": true,
+  },
+  "include": ["./package.json", "./src/**/*.*"],
+  "references": [
+    {
+      "path": "../audio/tsconfig.build.json",
+    },
+    {
+      "path": "../core/tsconfig.build.json",
+    },
+    {
+      "path": "../google-drive-picker/tsconfig.build.json",
+    },
+    {
+      "path": "../image-editor/tsconfig.build.json",
+    },
+    {
+      "path": "../utils/tsconfig.build.json",
+    },
+    {
+      "path": "../core/tsconfig.build.json",
+    },
+  ],
+}
diff --git a/packages/@uppy/core/src/UIPlugin.ts b/packages/@uppy/core/src/UIPlugin.ts
index b6be19d09..2e9d55066 100644
--- a/packages/@uppy/core/src/UIPlugin.ts
+++ b/packages/@uppy/core/src/UIPlugin.ts
@@ -1,5 +1,5 @@
 /* eslint-disable class-methods-use-this */
-import { render } from 'preact'
+import { render } from 'preact/compat'
 import findDOMElement from '@uppy/utils/lib/findDOMElement'
 import getTextDirection from '@uppy/utils/lib/getTextDirection'
 
diff --git a/packages/@uppy/react/package.json b/packages/@uppy/react/package.json
index 50a3f7ead..b5125ed6f 100644
--- a/packages/@uppy/react/package.json
+++ b/packages/@uppy/react/package.json
@@ -21,7 +21,9 @@
     "url": "git+https://github.com/transloadit/uppy.git"
   },
   "dependencies": {
+    "@uppy/components": "workspace:^",
     "@uppy/utils": "workspace:^",
+    "preact": "^10.5.13",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
@@ -38,8 +40,11 @@
     "@uppy/drag-drop": "workspace:^",
     "@uppy/file-input": "workspace:^",
     "@uppy/progress-bar": "workspace:^",
+    "@uppy/screen-capture": "workspace:^",
     "@uppy/status-bar": "workspace:^",
-    "react": "^18.0.0 || ^19.0.0"
+    "@uppy/webcam": "workspace:^",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@uppy/dashboard": {
@@ -54,8 +59,14 @@
     "@uppy/progress-bar": {
       "optional": true
     },
+    "@uppy/screen-capture": {
+      "optional": true
+    },
     "@uppy/status-bar": {
       "optional": true
+    },
+    "@uppy/webcam": {
+      "optional": true
     }
   }
 }
diff --git a/packages/@uppy/react/src/headless/Dropzone.tsx b/packages/@uppy/react/src/headless/Dropzone.tsx
new file mode 100644
index 000000000..c871df8e9
--- /dev/null
+++ b/packages/@uppy/react/src/headless/Dropzone.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useRef, useContext, createElement as h } from 'react'
+import {
+  Dropzone as PreactDropzone,
+  type DropzoneProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { UppyContext } from './UppyContextProvider.js'
+
+export default function Dropzone(props: Omit<DropzoneProps, 'ctx'>) {
+  const ref = useRef(null)
+  const ctx = useContext(UppyContext)
+
+  useEffect(() => {
+    if (ref.current) {
+      preactRender(
+        preactH(PreactDropzone, {
+          ...props,
+          ctx,
+        } satisfies DropzoneProps),
+        ref.current,
+      )
+    }
+  }, [ctx, props])
+
+  return <div ref={ref} />
+}
diff --git a/packages/@uppy/react/src/headless/FilesGrid.tsx b/packages/@uppy/react/src/headless/FilesGrid.tsx
new file mode 100644
index 000000000..063f55482
--- /dev/null
+++ b/packages/@uppy/react/src/headless/FilesGrid.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useRef, useContext, createElement as h } from 'react'
+import {
+  FilesGrid as PreactFilesGrid,
+  type FilesGridProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { UppyContext } from './UppyContextProvider.js'
+
+export default function FilesGrid(props: Omit<FilesGridProps, 'ctx'>) {
+  const ref = useRef(null)
+  const ctx = useContext(UppyContext)
+
+  useEffect(() => {
+    if (ref.current) {
+      preactRender(
+        preactH(PreactFilesGrid, {
+          ...props,
+          ctx,
+        } satisfies FilesGridProps),
+        ref.current,
+      )
+    }
+  }, [ctx, props])
+
+  return <div ref={ref} />
+}
diff --git a/packages/@uppy/react/src/headless/FilesList.tsx b/packages/@uppy/react/src/headless/FilesList.tsx
new file mode 100644
index 000000000..77df7c11b
--- /dev/null
+++ b/packages/@uppy/react/src/headless/FilesList.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useRef, useContext, createElement as h } from 'react'
+import {
+  FilesList as PreactFilesList,
+  type FilesListProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { UppyContext } from './UppyContextProvider.js'
+
+export default function FilesList(props: Omit<FilesListProps, 'ctx'>) {
+  const ref = useRef(null)
+  const ctx = useContext(UppyContext)
+
+  useEffect(() => {
+    if (ref.current) {
+      preactRender(
+        preactH(PreactFilesList, {
+          ...props,
+          ctx,
+        } satisfies FilesListProps),
+        ref.current,
+      )
+    }
+  }, [ctx, props])
+
+  return <div ref={ref} />
+}
diff --git a/packages/@uppy/react/src/headless/ProviderIcon.tsx b/packages/@uppy/react/src/headless/ProviderIcon.tsx
new file mode 100644
index 000000000..86e31ac26
--- /dev/null
+++ b/packages/@uppy/react/src/headless/ProviderIcon.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useRef, useContext, createElement as h } from 'react'
+import {
+  ProviderIcon as PreactProviderIcon,
+  type ProviderIconProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { UppyContext } from './UppyContextProvider.js'
+
+export default function ProviderIcon(props: Omit<ProviderIconProps, 'ctx'>) {
+  const ref = useRef(null)
+  const ctx = useContext(UppyContext)
+
+  useEffect(() => {
+    if (ref.current) {
+      preactRender(
+        preactH(PreactProviderIcon, {
+          ...props,
+          ctx,
+        } satisfies ProviderIconProps),
+        ref.current,
+      )
+    }
+  }, [ctx, props])
+
+  return <div ref={ref} />
+}
diff --git a/packages/@uppy/react/src/headless/Thumbnail.tsx b/packages/@uppy/react/src/headless/Thumbnail.tsx
new file mode 100644
index 000000000..9db3c4347
--- /dev/null
+++ b/packages/@uppy/react/src/headless/Thumbnail.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useRef, useContext, createElement as h } from 'react'
+import {
+  Thumbnail as PreactThumbnail,
+  type ThumbnailProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { UppyContext } from './UppyContextProvider.js'
+
+export default function Thumbnail(props: Omit<ThumbnailProps, 'ctx'>) {
+  const ref = useRef(null)
+  const ctx = useContext(UppyContext)
+
+  useEffect(() => {
+    if (ref.current) {
+      preactRender(
+        preactH(PreactThumbnail, {
+          ...props,
+          ctx,
+        } satisfies ThumbnailProps),
+        ref.current,
+      )
+    }
+  }, [ctx, props])
+
+  return <div ref={ref} />
+}
diff --git a/packages/@uppy/react/src/headless/UploadButton.tsx b/packages/@uppy/react/src/headless/UploadButton.tsx
new file mode 100644
index 000000000..cae759dce
--- /dev/null
+++ b/packages/@uppy/react/src/headless/UploadButton.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useRef, useContext, createElement as h } from 'react'
+import {
+  UploadButton as PreactUploadButton,
+  type UploadButtonProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { UppyContext } from './UppyContextProvider.js'
+
+export default function UploadButton(props: Omit<UploadButtonProps, 'ctx'>) {
+  const ref = useRef(null)
+  const ctx = useContext(UppyContext)
+
+  useEffect(() => {
+    if (ref.current) {
+      preactRender(
+        preactH(PreactUploadButton, {
+          ...props,
+          ctx,
+        } satisfies UploadButtonProps),
+        ref.current,
+      )
+    }
+  }, [ctx, props])
+
+  return <div ref={ref} />
+}
diff --git a/packages/@uppy/react/src/headless/UppyContextProvider.tsx b/packages/@uppy/react/src/headless/UppyContextProvider.tsx
new file mode 100644
index 000000000..351f9596f
--- /dev/null
+++ b/packages/@uppy/react/src/headless/UppyContextProvider.tsx
@@ -0,0 +1,64 @@
+import React, {
+  createContext,
+  useState,
+  useEffect,
+  createElement as h,
+} from 'react'
+import type Uppy from '@uppy/core'
+import { createUppyEventAdapter, type UploadStatus } from '@uppy/components'
+
+interface UppyContextValue {
+  uppy: Uppy | undefined
+  status: UploadStatus
+  progress: number
+}
+
+export const UppyContext = createContext<UppyContextValue>({
+  uppy: undefined,
+  status: 'init',
+  progress: 0,
+})
+
+interface Props {
+  uppy: Uppy
+  children: React.ReactNode
+}
+
+export function UppyContextProvider({ uppy, children }: Props) {
+  const [status, setStatus] = useState<UploadStatus>('init')
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    if (!uppy) {
+      throw new Error(
+        'UppyContextProvider: passing `uppy` as a prop is required',
+      )
+    }
+
+    const uppyEventAdapter = createUppyEventAdapter({
+      uppy,
+      onStatusChange: (newStatus: UploadStatus) => {
+        setStatus(newStatus)
+      },
+      onProgressChange: (newProgress: number) => {
+        setProgress(newProgress)
+      },
+    })
+
+    return () => uppyEventAdapter.cleanup()
+  }, [uppy])
+
+  return (
+    <UppyContext.Provider
+      value={{
+        uppy,
+        status,
+        progress,
+      }}
+    >
+      {children}
+    </UppyContext.Provider>
+  )
+}
+
+export default UppyContextProvider
diff --git a/packages/@uppy/react/src/headless/index.ts b/packages/@uppy/react/src/headless/index.ts
new file mode 100644
index 000000000..dd7fcf9d1
--- /dev/null
+++ b/packages/@uppy/react/src/headless/index.ts
@@ -0,0 +1,6 @@
+export { default as Dropzone } from './Dropzone.js'
+export { default as FilesGrid } from './FilesGrid.js'
+export { default as FilesList } from './FilesList.js'
+export { default as ProviderIcon } from './ProviderIcon.js'
+export { default as Thumbnail } from './Thumbnail.js'
+export { default as UploadButton } from './UploadButton.js'
diff --git a/packages/@uppy/react/src/index.ts b/packages/@uppy/react/src/index.ts
index bea50afd8..7329c62e9 100644
--- a/packages/@uppy/react/src/index.ts
+++ b/packages/@uppy/react/src/index.ts
@@ -6,3 +6,10 @@ export { default as StatusBar } from './StatusBar.js'
 export { default as FileInput } from './FileInput.js'
 export { default as useUppyState } from './useUppyState.js'
 export { default as useUppyEvent } from './useUppyEvent.js'
+
+// Headless components
+export {
+  UppyContext,
+  UppyContextProvider,
+} from './headless/UppyContextProvider.js'
+export * from './headless/index.js'
diff --git a/packages/@uppy/react/tsconfig.build.json b/packages/@uppy/react/tsconfig.build.json
index 6eb2612c7..42b660dd2 100644
--- a/packages/@uppy/react/tsconfig.build.json
+++ b/packages/@uppy/react/tsconfig.build.json
@@ -16,6 +16,9 @@
     {
       "path": "../core/tsconfig.build.json"
     },
+    {
+      "path": "../components/tsconfig.build.json"
+    },
     {
       "path": "../dashboard/tsconfig.build.json"
     },
@@ -30,6 +33,12 @@
     },
     {
       "path": "../status-bar/tsconfig.build.json"
+    },
+    {
+      "path": "../screen-capture/tsconfig.build.json"
+    },
+    {
+      "path": "../webcam/tsconfig.build.json"
     }
   ]
 }
diff --git a/packages/@uppy/react/tsconfig.json b/packages/@uppy/react/tsconfig.json
index 02a3cc5f4..e66468106 100644
--- a/packages/@uppy/react/tsconfig.json
+++ b/packages/@uppy/react/tsconfig.json
@@ -14,6 +14,9 @@
     {
       "path": "../core/tsconfig.build.json",
     },
+    {
+      "path": "../components/tsconfig.build.json",
+    },
     {
       "path": "../dashboard/tsconfig.build.json",
     },
@@ -29,5 +32,11 @@
     {
       "path": "../status-bar/tsconfig.build.json",
     },
+    {
+      "path": "../screen-capture/tsconfig.build.json",
+    },
+    {
+      "path": "../webcam/tsconfig.build.json",
+    },
   ],
 }
diff --git a/packages/@uppy/svelte/.gitignore b/packages/@uppy/svelte/.gitignore
index 2a53a910e..d141300ef 100644
--- a/packages/@uppy/svelte/.gitignore
+++ b/packages/@uppy/svelte/.gitignore
@@ -1,5 +1,4 @@
 .DS_Store
 /dist/
 /src/empty.*
-.svelte-kit
 !src/lib
diff --git a/packages/@uppy/svelte/package.json b/packages/@uppy/svelte/package.json
index 5ad87a896..269dd42f0 100644
--- a/packages/@uppy/svelte/package.json
+++ b/packages/@uppy/svelte/package.json
@@ -25,6 +25,7 @@
     "dist"
   ],
   "exports": {
+    "./dist/styles.css": "./dist/styles.css",
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
@@ -35,16 +36,20 @@
     "prepublishOnly": "yarn run package",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
+  "dependencies": {
+    "@uppy/components": "workspace:^",
+    "preact": "^10.26.5"
+  },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.8.3",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.4.17"
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.20.7",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.27.0",
+    "svelte-check": "^4.1.6",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.0"
   },
   "peerDependencies": {
     "@uppy/core": "workspace:^",
diff --git a/packages/@uppy/svelte/src/lib/components/headless/Dropzone.svelte b/packages/@uppy/svelte/src/lib/components/headless/Dropzone.svelte
new file mode 100644
index 000000000..8a14c7873
--- /dev/null
+++ b/packages/@uppy/svelte/src/lib/components/headless/Dropzone.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getContext, mount } from 'svelte'
+  import {
+    Dropzone as PreactDropzone,
+    type DropzoneProps,
+    type UppyContext,
+  } from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+  import { UppyContextKey } from './UppyContextProvider.svelte'
+
+  const props: Omit<DropzoneProps, 'ctx'> = $props()
+  const ctx = getContext<UppyContext>(UppyContextKey)
+  let container: HTMLElement
+
+  $effect(() => {
+    if (container) {
+      preactRender(
+        preactH(PreactDropzone, {
+          ...props,
+          ctx,
+        } satisfies DropzoneProps),
+        container,
+      )
+    }
+  })
+</script>
+
+<div bind:this={container}></div>
diff --git a/packages/@uppy/svelte/src/lib/components/headless/FilesGrid.svelte b/packages/@uppy/svelte/src/lib/components/headless/FilesGrid.svelte
new file mode 100644
index 000000000..d5223b34d
--- /dev/null
+++ b/packages/@uppy/svelte/src/lib/components/headless/FilesGrid.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getContext, mount } from 'svelte'
+  import {
+    FilesGrid as PreactFilesGrid,
+    type FilesGridProps,
+    type UppyContext,
+  } from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+  import { UppyContextKey } from './UppyContextProvider.svelte'
+
+  const props: Omit<FilesGridProps, 'ctx'> = $props()
+  const ctx = getContext<UppyContext>(UppyContextKey)
+  let container: HTMLElement
+
+  $effect(() => {
+    if (container) {
+      preactRender(
+        preactH(PreactFilesGrid, {
+          ...props,
+          ctx,
+        } satisfies FilesGridProps),
+        container,
+      )
+    }
+  })
+</script>
+
+<div bind:this={container}></div>
diff --git a/packages/@uppy/svelte/src/lib/components/headless/FilesList.svelte b/packages/@uppy/svelte/src/lib/components/headless/FilesList.svelte
new file mode 100644
index 000000000..a93028193
--- /dev/null
+++ b/packages/@uppy/svelte/src/lib/components/headless/FilesList.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getContext, mount } from 'svelte'
+  import {
+    FilesList as PreactFilesList,
+    type FilesListProps,
+    type UppyContext,
+  } from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+  import { UppyContextKey } from './UppyContextProvider.svelte'
+
+  const props: Omit<FilesListProps, 'ctx'> = $props()
+  const ctx = getContext<UppyContext>(UppyContextKey)
+  let container: HTMLElement
+
+  $effect(() => {
+    if (container) {
+      preactRender(
+        preactH(PreactFilesList, {
+          ...props,
+          ctx,
+        } satisfies FilesListProps),
+        container,
+      )
+    }
+  })
+</script>
+
+<div bind:this={container}></div>
diff --git a/packages/@uppy/svelte/src/lib/components/headless/ProviderIcon.svelte b/packages/@uppy/svelte/src/lib/components/headless/ProviderIcon.svelte
new file mode 100644
index 000000000..4021ec0ca
--- /dev/null
+++ b/packages/@uppy/svelte/src/lib/components/headless/ProviderIcon.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getContext, mount } from 'svelte'
+  import {
+    ProviderIcon as PreactProviderIcon,
+    type ProviderIconProps,
+    type UppyContext,
+  } from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+  import { UppyContextKey } from './UppyContextProvider.svelte'
+
+  const props: Omit<ProviderIconProps, 'ctx'> = $props()
+  const ctx = getContext<UppyContext>(UppyContextKey)
+  let container: HTMLElement
+
+  $effect(() => {
+    if (container) {
+      preactRender(
+        preactH(PreactProviderIcon, {
+          ...props,
+          ctx,
+        } satisfies ProviderIconProps),
+        container,
+      )
+    }
+  })
+</script>
+
+<div bind:this={container}></div>
diff --git a/packages/@uppy/svelte/src/lib/components/headless/Thumbnail.svelte b/packages/@uppy/svelte/src/lib/components/headless/Thumbnail.svelte
new file mode 100644
index 000000000..30536759a
--- /dev/null
+++ b/packages/@uppy/svelte/src/lib/components/headless/Thumbnail.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getContext, mount } from 'svelte'
+  import {
+    Thumbnail as PreactThumbnail,
+    type ThumbnailProps,
+    type UppyContext,
+  } from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+  import { UppyContextKey } from './UppyContextProvider.svelte'
+
+  const props: Omit<ThumbnailProps, 'ctx'> = $props()
+  const ctx = getContext<UppyContext>(UppyContextKey)
+  let container: HTMLElement
+
+  $effect(() => {
+    if (container) {
+      preactRender(
+        preactH(PreactThumbnail, {
+          ...props,
+          ctx,
+        } satisfies ThumbnailProps),
+        container,
+      )
+    }
+  })
+</script>
+
+<div bind:this={container}></div>
diff --git a/packages/@uppy/svelte/src/lib/components/headless/UploadButton.svelte b/packages/@uppy/svelte/src/lib/components/headless/UploadButton.svelte
new file mode 100644
index 000000000..89eda2ff1
--- /dev/null
+++ b/packages/@uppy/svelte/src/lib/components/headless/UploadButton.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getContext, mount } from 'svelte'
+  import {
+    UploadButton as PreactUploadButton,
+    type UploadButtonProps,
+    type UppyContext,
+  } from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+  import { UppyContextKey } from './UppyContextProvider.svelte'
+
+  const props: Omit<UploadButtonProps, 'ctx'> = $props()
+  const ctx = getContext<UppyContext>(UppyContextKey)
+  let container: HTMLElement
+
+  $effect(() => {
+    if (container) {
+      preactRender(
+        preactH(PreactUploadButton, {
+          ...props,
+          ctx,
+        } satisfies UploadButtonProps),
+        container,
+      )
+    }
+  })
+</script>
+
+<div bind:this={container}></div>
diff --git a/packages/@uppy/svelte/src/lib/components/headless/UppyContextProvider.svelte b/packages/@uppy/svelte/src/lib/components/headless/UppyContextProvider.svelte
new file mode 100644
index 000000000..66456ba6a
--- /dev/null
+++ b/packages/@uppy/svelte/src/lib/components/headless/UppyContextProvider.svelte
@@ -0,0 +1,48 @@
+<script context="module" lang="ts">
+  import type Uppy from '@uppy/core';
+  import { createUppyEventAdapter, type UploadStatus } from '@uppy/components'
+
+  export const UppyContextKey = 'uppy-context';
+  export type { UppyContext } from '@uppy/components';
+</script>
+
+<script lang="ts">
+  import { setContext, onMount } from 'svelte';
+
+  export let uppy: Uppy;
+
+  let status: UploadStatus = 'init';
+  let progress = 0;
+
+  onMount(() => {
+    if (!uppy) {
+      throw new Error(
+        'ContextProvider: passing `uppy` as a prop is required',
+      );
+    }
+
+    const uppyEventAdapter = createUppyEventAdapter({
+      uppy,
+      onStatusChange: (newStatus: UploadStatus) => {
+        status = newStatus
+      },
+      onProgressChange: (newProgress: number) => {
+        progress = newProgress
+      },
+    })
+
+    return () => uppyEventAdapter.cleanup()
+  });
+
+  // Create a reactive store from our context values
+  $: contextValue = {
+    uppy,
+    status,
+    progress,
+  };
+
+  // Set the context for child components to use
+  $: setContext(UppyContextKey, contextValue);
+</script>
+
+<slot />
diff --git a/packages/@uppy/svelte/src/lib/components/headless/index.ts b/packages/@uppy/svelte/src/lib/components/headless/index.ts
new file mode 100644
index 000000000..e9d4ae37c
--- /dev/null
+++ b/packages/@uppy/svelte/src/lib/components/headless/index.ts
@@ -0,0 +1,6 @@
+export { default as Dropzone } from './Dropzone.svelte'
+export { default as FilesGrid } from './FilesGrid.svelte'
+export { default as FilesList } from './FilesList.svelte'
+export { default as ProviderIcon } from './ProviderIcon.svelte'
+export { default as Thumbnail } from './Thumbnail.svelte'
+export { default as UploadButton } from './UploadButton.svelte'
\ No newline at end of file
diff --git a/packages/@uppy/svelte/src/lib/index.ts b/packages/@uppy/svelte/src/lib/index.ts
index 9987023a2..840e1fe87 100644
--- a/packages/@uppy/svelte/src/lib/index.ts
+++ b/packages/@uppy/svelte/src/lib/index.ts
@@ -3,3 +3,7 @@ export { default as DashboardModal } from './components/DashboardModal.svelte'
 export { default as DragDrop } from './components/DragDrop.svelte'
 export { default as ProgressBar } from './components/ProgressBar.svelte'
 export { default as StatusBar } from './components/StatusBar.svelte'
+
+// Headless components
+export { default as UppyContextProvider } from './components/headless/UppyContextProvider.svelte'
+export * from './components/headless/index.js'
\ No newline at end of file
diff --git a/packages/@uppy/svelte/svelte.config.js b/packages/@uppy/svelte/svelte.config.js
index 4698292e1..c350e4d97 100644
--- a/packages/@uppy/svelte/svelte.config.js
+++ b/packages/@uppy/svelte/svelte.config.js
@@ -1,6 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import adapter from '@sveltejs/adapter-auto'
-// eslint-disable-next-line import/no-unresolved
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
diff --git a/packages/@uppy/svelte/vite.config.js b/packages/@uppy/svelte/vite.config.js
index 67c0dad1b..26394ef67 100644
--- a/packages/@uppy/svelte/vite.config.js
+++ b/packages/@uppy/svelte/vite.config.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-unresolved
 import { sveltekit } from '@sveltejs/kit/vite'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig } from 'vite'
diff --git a/packages/@uppy/vue/package.json b/packages/@uppy/vue/package.json
index 6e0d67967..47a084a04 100644
--- a/packages/@uppy/vue/package.json
+++ b/packages/@uppy/vue/package.json
@@ -5,6 +5,8 @@
   "type": "module",
   "main": "lib/index.js",
   "dependencies": {
+    "@uppy/components": "workspace:^",
+    "preact": "^10.5.13",
     "shallow-equal": "^3.0.0"
   },
   "devDependencies": {
diff --git a/packages/@uppy/vue/src/headless/Dropzone.ts b/packages/@uppy/vue/src/headless/Dropzone.ts
new file mode 100644
index 000000000..2e56fa6b3
--- /dev/null
+++ b/packages/@uppy/vue/src/headless/Dropzone.ts
@@ -0,0 +1,48 @@
+import { defineComponent, ref, watch, onMounted, h } from 'vue'
+import {
+  Dropzone as PreactDropzone,
+  type DropzoneProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { shallowEqualObjects } from 'shallow-equal'
+import { useUppyContext } from './useUppyContext.js'
+
+export default defineComponent<Omit<DropzoneProps, 'ctx'>>({
+  name: 'Dropzone',
+  setup(props, { attrs }) {
+    const containerRef = ref<HTMLElement | null>(null)
+    const ctx = useUppyContext()
+
+    function renderDropzone() {
+      if (containerRef.value) {
+        preactRender(
+          preactH(PreactDropzone, {
+            ...(attrs as DropzoneProps),
+            ctx,
+          } satisfies DropzoneProps),
+          containerRef.value,
+        )
+      }
+    }
+
+    onMounted(() => {
+      renderDropzone()
+    })
+
+    watch(ctx, () => {
+      renderDropzone()
+    })
+
+    watch(
+      () => props,
+      (current, old) => {
+        if (!shallowEqualObjects(current, old)) {
+          renderDropzone()
+        }
+      },
+    )
+
+    return () => h('div', { ref: containerRef })
+  },
+})
diff --git a/packages/@uppy/vue/src/headless/FilesGrid.ts b/packages/@uppy/vue/src/headless/FilesGrid.ts
new file mode 100644
index 000000000..066c2786a
--- /dev/null
+++ b/packages/@uppy/vue/src/headless/FilesGrid.ts
@@ -0,0 +1,48 @@
+import { defineComponent, ref, watch, onMounted, h } from 'vue'
+import {
+  FilesGrid as PreactFilesGrid,
+  type FilesGridProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { shallowEqualObjects } from 'shallow-equal'
+import { useUppyContext } from './useUppyContext.js'
+
+export default defineComponent<Omit<FilesGridProps, 'ctx'>>({
+  name: 'FilesGrid',
+  setup(props, { attrs }) {
+    const containerRef = ref<HTMLElement | null>(null)
+    const ctx = useUppyContext()
+
+    function renderFilesGrid() {
+      if (containerRef.value) {
+        preactRender(
+          preactH(PreactFilesGrid, {
+            ...(attrs as FilesGridProps),
+            ctx,
+          } satisfies FilesGridProps),
+          containerRef.value,
+        )
+      }
+    }
+
+    onMounted(() => {
+      renderFilesGrid()
+    })
+
+    watch(ctx, () => {
+      renderFilesGrid()
+    })
+
+    watch(
+      () => props,
+      (current, old) => {
+        if (!shallowEqualObjects(current, old)) {
+          renderFilesGrid()
+        }
+      },
+    )
+
+    return () => h('div', { ref: containerRef })
+  },
+})
diff --git a/packages/@uppy/vue/src/headless/FilesList.ts b/packages/@uppy/vue/src/headless/FilesList.ts
new file mode 100644
index 000000000..40f06bb0e
--- /dev/null
+++ b/packages/@uppy/vue/src/headless/FilesList.ts
@@ -0,0 +1,48 @@
+import { defineComponent, ref, watch, onMounted, h } from 'vue'
+import {
+  FilesList as PreactFilesList,
+  type FilesListProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { shallowEqualObjects } from 'shallow-equal'
+import { useUppyContext } from './useUppyContext.js'
+
+export default defineComponent<Omit<FilesListProps, 'ctx'>>({
+  name: 'FilesList',
+  setup(props, { attrs }) {
+    const containerRef = ref<HTMLElement | null>(null)
+    const ctx = useUppyContext()
+
+    function renderFilesList() {
+      if (containerRef.value) {
+        preactRender(
+          preactH(PreactFilesList, {
+            ...(attrs as FilesListProps),
+            ctx,
+          } satisfies FilesListProps),
+          containerRef.value,
+        )
+      }
+    }
+
+    onMounted(() => {
+      renderFilesList()
+    })
+
+    watch(ctx, () => {
+      renderFilesList()
+    })
+
+    watch(
+      () => props,
+      (current, old) => {
+        if (!shallowEqualObjects(current, old)) {
+          renderFilesList()
+        }
+      },
+    )
+
+    return () => h('div', { ref: containerRef })
+  },
+})
diff --git a/packages/@uppy/vue/src/headless/ProviderIcon.ts b/packages/@uppy/vue/src/headless/ProviderIcon.ts
new file mode 100644
index 000000000..a15d709fe
--- /dev/null
+++ b/packages/@uppy/vue/src/headless/ProviderIcon.ts
@@ -0,0 +1,48 @@
+import { defineComponent, ref, watch, onMounted, h } from 'vue'
+import {
+  ProviderIcon as PreactProviderIcon,
+  type ProviderIconProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { shallowEqualObjects } from 'shallow-equal'
+import { useUppyContext } from './useUppyContext.js'
+
+export default defineComponent<Omit<ProviderIconProps, 'ctx'>>({
+  name: 'ProviderIcon',
+  setup(props, { attrs }) {
+    const containerRef = ref<HTMLElement | null>(null)
+    const ctx = useUppyContext()
+
+    function renderProviderIcon() {
+      if (containerRef.value) {
+        preactRender(
+          preactH(PreactProviderIcon, {
+            ...(attrs as ProviderIconProps),
+            ctx,
+          } satisfies ProviderIconProps),
+          containerRef.value,
+        )
+      }
+    }
+
+    onMounted(() => {
+      renderProviderIcon()
+    })
+
+    watch(ctx, () => {
+      renderProviderIcon()
+    })
+
+    watch(
+      () => props,
+      (current, old) => {
+        if (!shallowEqualObjects(current, old)) {
+          renderProviderIcon()
+        }
+      },
+    )
+
+    return () => h('div', { ref: containerRef })
+  },
+})
diff --git a/packages/@uppy/vue/src/headless/Thumbnail.ts b/packages/@uppy/vue/src/headless/Thumbnail.ts
new file mode 100644
index 000000000..48cdc0d27
--- /dev/null
+++ b/packages/@uppy/vue/src/headless/Thumbnail.ts
@@ -0,0 +1,48 @@
+import { defineComponent, ref, watch, onMounted, h } from 'vue'
+import {
+  Thumbnail as PreactThumbnail,
+  type ThumbnailProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { shallowEqualObjects } from 'shallow-equal'
+import { useUppyContext } from './useUppyContext.js'
+
+export default defineComponent<Omit<ThumbnailProps, 'ctx'>>({
+  name: 'Thumbnail',
+  setup(props, { attrs }) {
+    const containerRef = ref<HTMLElement | null>(null)
+    const ctx = useUppyContext()
+
+    function renderThumbnail() {
+      if (containerRef.value) {
+        preactRender(
+          preactH(PreactThumbnail, {
+            ...(attrs as ThumbnailProps),
+            ctx,
+          } satisfies ThumbnailProps),
+          containerRef.value,
+        )
+      }
+    }
+
+    onMounted(() => {
+      renderThumbnail()
+    })
+
+    watch(ctx, () => {
+      renderThumbnail()
+    })
+
+    watch(
+      () => props,
+      (current, old) => {
+        if (!shallowEqualObjects(current, old)) {
+          renderThumbnail()
+        }
+      },
+    )
+
+    return () => h('div', { ref: containerRef })
+  },
+})
diff --git a/packages/@uppy/vue/src/headless/UploadButton.ts b/packages/@uppy/vue/src/headless/UploadButton.ts
new file mode 100644
index 000000000..23d8af028
--- /dev/null
+++ b/packages/@uppy/vue/src/headless/UploadButton.ts
@@ -0,0 +1,48 @@
+import { defineComponent, ref, watch, onMounted, h } from 'vue'
+import {
+  UploadButton as PreactUploadButton,
+  type UploadButtonProps,
+} from '@uppy/components'
+import { h as preactH } from 'preact'
+import { render as preactRender } from 'preact/compat'
+import { shallowEqualObjects } from 'shallow-equal'
+import { useUppyContext } from './useUppyContext.js'
+
+export default defineComponent<Omit<UploadButtonProps, 'ctx'>>({
+  name: 'UploadButton',
+  setup(props, { attrs }) {
+    const containerRef = ref<HTMLElement | null>(null)
+    const ctx = useUppyContext()
+
+    function renderUploadButton() {
+      if (containerRef.value) {
+        preactRender(
+          preactH(PreactUploadButton, {
+            ...(attrs as UploadButtonProps),
+            ctx,
+          } satisfies UploadButtonProps),
+          containerRef.value,
+        )
+      }
+    }
+
+    onMounted(() => {
+      renderUploadButton()
+    })
+
+    watch(ctx, () => {
+      renderUploadButton()
+    })
+
+    watch(
+      () => props,
+      (current, old) => {
+        if (!shallowEqualObjects(current, old)) {
+          renderUploadButton()
+        }
+      },
+    )
+
+    return () => h('div', { ref: containerRef })
+  },
+})
diff --git a/packages/@uppy/vue/src/headless/context-provider.ts b/packages/@uppy/vue/src/headless/context-provider.ts
new file mode 100644
index 000000000..8176c0fd9
--- /dev/null
+++ b/packages/@uppy/vue/src/headless/context-provider.ts
@@ -0,0 +1,73 @@
+import {
+  defineComponent,
+  provide,
+  reactive,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
+import type { PropType } from 'vue'
+import type Uppy from '@uppy/core'
+import { createUppyEventAdapter } from '@uppy/components'
+import type { UploadStatus } from '@uppy/components'
+
+export interface UppyContext {
+  uppy: Uppy | undefined
+  status: UploadStatus
+  progress: number
+}
+
+export const UppyContextSymbol = Symbol('uppy')
+
+export const UppyContextProvider = defineComponent({
+  name: 'UppyContextProvider',
+  props: {
+    uppy: {
+      type: Object as PropType<Uppy>,
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const status = ref<UploadStatus>('init')
+    const progress = ref(0)
+
+    const uppyContext = reactive<UppyContext>({
+      uppy: props.uppy,
+      status: 'init',
+      progress: 0,
+    })
+
+    // Provide the context immediately instead of in onMounted
+    provide(UppyContextSymbol, uppyContext)
+
+    let uppyEventAdapter: ReturnType<typeof createUppyEventAdapter> | undefined
+
+    onMounted(() => {
+      if (!props.uppy) {
+        throw new Error(
+          'UppyContextProvider: passing `uppy` as a prop is required',
+        )
+      }
+
+      uppyEventAdapter = createUppyEventAdapter({
+        uppy: props.uppy,
+        onStatusChange: (newStatus: UploadStatus) => {
+          status.value = newStatus
+          uppyContext.status = newStatus
+        },
+        onProgressChange: (newProgress: number) => {
+          progress.value = newProgress
+          uppyContext.progress = newProgress
+        },
+      })
+    })
+
+    onBeforeUnmount(() => {
+      uppyEventAdapter?.cleanup()
+    })
+
+    return () => slots.default?.()
+  },
+})
+
+export default UppyContextProvider
diff --git a/packages/@uppy/vue/src/headless/index.ts b/packages/@uppy/vue/src/headless/index.ts
new file mode 100644
index 000000000..dd7fcf9d1
--- /dev/null
+++ b/packages/@uppy/vue/src/headless/index.ts
@@ -0,0 +1,6 @@
+export { default as Dropzone } from './Dropzone.js'
+export { default as FilesGrid } from './FilesGrid.js'
+export { default as FilesList } from './FilesList.js'
+export { default as ProviderIcon } from './ProviderIcon.js'
+export { default as Thumbnail } from './Thumbnail.js'
+export { default as UploadButton } from './UploadButton.js'
diff --git a/packages/@uppy/vue/src/headless/useUppyContext.ts b/packages/@uppy/vue/src/headless/useUppyContext.ts
new file mode 100644
index 000000000..06e992cd7
--- /dev/null
+++ b/packages/@uppy/vue/src/headless/useUppyContext.ts
@@ -0,0 +1,16 @@
+import { inject } from 'vue'
+import { UppyContextSymbol, type UppyContext } from './context-provider.js'
+
+export function useUppyContext(): UppyContext {
+  const context = inject<UppyContext>(UppyContextSymbol)
+
+  if (!context) {
+    return {
+      uppy: undefined,
+      status: 'init',
+      progress: 0,
+    }
+  }
+
+  return context
+}
diff --git a/packages/@uppy/vue/src/index.ts b/packages/@uppy/vue/src/index.ts
index 9123e0c44..987c18d45 100644
--- a/packages/@uppy/vue/src/index.ts
+++ b/packages/@uppy/vue/src/index.ts
@@ -4,3 +4,6 @@ export { default as DragDrop } from './drag-drop.js'
 export { default as ProgressBar } from './progress-bar.js'
 export { default as StatusBar } from './status-bar.js'
 export { default as FileInput } from './file-input.js'
+
+export { UppyContextProvider } from './headless/context-provider.js'
+export * from './headless/index.js'
diff --git a/packages/@uppy/vue/tsconfig.build.json b/packages/@uppy/vue/tsconfig.build.json
index f2cef03bf..d37c18417 100644
--- a/packages/@uppy/vue/tsconfig.build.json
+++ b/packages/@uppy/vue/tsconfig.build.json
@@ -11,6 +11,9 @@
     {
       "path": "../core/tsconfig.build.json"
     },
+    {
+      "path": "../components/tsconfig.build.json"
+    },
     {
       "path": "../dashboard/tsconfig.build.json"
     },
diff --git a/packages/@uppy/vue/tsconfig.json b/packages/@uppy/vue/tsconfig.json
index 9e33b3f4c..b6e4d0e29 100644
--- a/packages/@uppy/vue/tsconfig.json
+++ b/packages/@uppy/vue/tsconfig.json
@@ -9,6 +9,9 @@
     {
       "path": "../core/tsconfig.build.json",
     },
+    {
+      "path": "../components/tsconfig.build.json",
+    },
     {
       "path": "../dashboard/tsconfig.build.json",
     },
diff --git a/packages/@uppy/webcam/src/Webcam.tsx b/packages/@uppy/webcam/src/Webcam.tsx
index 855ec3ddd..f12801e0c 100644
--- a/packages/@uppy/webcam/src/Webcam.tsx
+++ b/packages/@uppy/webcam/src/Webcam.tsx
@@ -77,10 +77,10 @@ export interface WebcamOptions<M extends Meta, B extends Body>
   locale?: LocaleStrings<typeof locale>
 }
 
-interface WebcamState {
+export interface WebcamState {
   hasCamera: boolean
   cameraReady: boolean
-  cameraError: null
+  cameraError: null | Error
   recordingLengthSeconds: number
   videoSources: MediaDeviceInfo[]
   currentDeviceId: string | MediaStreamTrack | null | undefined
@@ -90,7 +90,7 @@ interface WebcamState {
 }
 
 // set default options
-const defaultOptions = {
+export const defaultOptions = {
   onBeforeSnapshot: () => Promise.resolve(),
   countdown: false,
   modes: ['video-audio', 'video-only', 'audio-only', 'picture'] as any,
@@ -127,9 +127,9 @@ export default class Webcam<M extends Meta, B extends Body> extends UIPlugin<
 
   private icon: () => h.JSX.Element
 
-  private webcamActive
+  public webcamActive
 
-  private stream: MediaStream | null = null
+  public stream: MediaStream | null = null
 
   private recorder: MediaRecorder | null = null
 
diff --git a/packages/@uppy/webcam/src/index.ts b/packages/@uppy/webcam/src/index.ts
index 6fa7cd695..b3f8cd13d 100644
--- a/packages/@uppy/webcam/src/index.ts
+++ b/packages/@uppy/webcam/src/index.ts
@@ -1,2 +1,3 @@
 export { default } from './Webcam.jsx'
-export type { WebcamOptions } from './Webcam.jsx'
+export type { WebcamOptions, WebcamState } from './Webcam.jsx'
+export { defaultOptions } from './Webcam.jsx'
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 0ab4830df..41fe8a5d1 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -73,9 +73,6 @@
     {
       "path": "./packages/@uppy/provider-views/tsconfig.build.json"
     },
-    {
-      "path": "./packages/@uppy/react/tsconfig.build.json"
-    },
     {
       "path": "./packages/@uppy/remote-sources/tsconfig.build.json"
     },
@@ -106,9 +103,6 @@
     {
       "path": "./packages/@uppy/utils/tsconfig.build.json"
     },
-    {
-      "path": "./packages/@uppy/vue/tsconfig.build.json"
-    },
     {
       "path": "./packages/@uppy/webcam/tsconfig.build.json"
     },
@@ -123,6 +117,18 @@
     },
     {
       "path": "./packages/uppy/tsconfig.build.json"
+    },
+
+    // The order matters. @uppy/components must come after all other packages
+    // Then the framework implementations must go after @uppy/components
+    {
+      "path": "./packages/@uppy/components/tsconfig.build.json"
+    },
+    {
+      "path": "./packages/@uppy/react/tsconfig.build.json"
+    },
+    {
+      "path": "./packages/@uppy/vue/tsconfig.build.json"
     }
   ]
 }
diff --git a/tsconfig.json b/tsconfig.json
index e4f8be90e..16dd1fba3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -73,9 +73,6 @@
     {
       "path": "./packages/@uppy/provider-views/tsconfig.json",
     },
-    {
-      "path": "./packages/@uppy/react/tsconfig.json",
-    },
     {
       "path": "./packages/@uppy/remote-sources/tsconfig.json",
     },
@@ -106,9 +103,6 @@
     {
       "path": "./packages/@uppy/utils/tsconfig.json",
     },
-    {
-      "path": "./packages/@uppy/vue/tsconfig.json",
-    },
     {
       "path": "./packages/@uppy/webcam/tsconfig.json",
     },
@@ -124,5 +118,16 @@
     {
       "path": "./packages/uppy/tsconfig.json",
     },
+    // The order matters. @uppy/components must come after all other packages
+    // Then the framework implementations must go after @uppy/components
+    {
+      "path": "./packages/@uppy/components/tsconfig.build.json",
+    },
+    {
+      "path": "./packages/@uppy/react/tsconfig.build.json",
+    },
+    {
+      "path": "./packages/@uppy/vue/tsconfig.build.json",
+    },
   ],
 }
diff --git a/yarn.lock b/yarn.lock
index a516b1da6..3d94c0d97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,7 +12,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ampproject/remapping@npm:2.3.0, @ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.2.1":
+"@ampproject/remapping@npm:2.3.0, @ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.3.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
   dependencies:
@@ -1734,7 +1734,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.26.10, @babel/core@npm:^7.0.0, @babel/core@npm:^7.1.6, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.12.9, @babel/core@npm:^7.14.6, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.5":
+"@babel/core@npm:7.26.10, @babel/core@npm:^7.0.0, @babel/core@npm:^7.1.6, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.12.9, @babel/core@npm:^7.14.6, @babel/core@npm:^7.23.9, @babel/core@npm:^7.26.0":
   version: 7.26.10
   resolution: "@babel/core@npm:7.26.10"
   dependencies:
@@ -3029,25 +3029,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-self@npm:^7.0.0, @babel/plugin-transform-react-jsx-self@npm:^7.24.5":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.24.7"
+"@babel/plugin-transform-react-jsx-self@npm:^7.0.0, @babel/plugin-transform-react-jsx-self@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/56115b4a6c006ce82846f1ab21e5ba713ee8f57a166c96c94fc632cdfbc8b9cebbf20b7cd9b8076439dabecdbf0f8ca4c2cb1bed1bf0b15cb44505a429f6a92f
+  checksum: 10/41c833cd7f91b1432710f91b1325706e57979b2e8da44e83d86312c78bbe96cd9ef778b4e79e4e17ab25fa32c72b909f2be7f28e876779ede28e27506c41f4ae
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-source@npm:^7.0.0, @babel/plugin-transform-react-jsx-source@npm:^7.24.1":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.24.7"
+"@babel/plugin-transform-react-jsx-source@npm:^7.0.0, @babel/plugin-transform-react-jsx-source@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.25.9"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/682e2ae15d788453d8ab34cf0dcc29c093faf7c7cf1d60110c43f33e6477f916cf301456b314fc496fadc07123f7978225f41ac286ed0bfbad9c8e76392fdb6d
+  checksum: 10/a3e0e5672e344e9d01fb20b504fe29a84918eaa70cec512c4d4b1b035f72803261257343d8e93673365b72c371f35cf34bb0d129720bf178a4c87812c8b9c662
   languageName: node
   linkType: hard
 
@@ -3674,6 +3674,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emnapi/core@npm:^1.4.0":
+  version: 1.4.3
+  resolution: "@emnapi/core@npm:1.4.3"
+  dependencies:
+    "@emnapi/wasi-threads": "npm:1.0.2"
+    tslib: "npm:^2.4.0"
+  checksum: 10/b511f66b897d2019835391544fdf11f4fa0ce06cc1181abfa17c7d4cf03aaaa4fc8a64fcd30bb3f901de488d0a6f370b53a8de2215a898f5a4ac98015265b3b7
+  languageName: node
+  linkType: hard
+
+"@emnapi/runtime@npm:^1.4.0":
+  version: 1.4.3
+  resolution: "@emnapi/runtime@npm:1.4.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/4f90852a1a5912982cc4e176b6420556971bcf6a85ee23e379e2455066d616219751367dcf43e6a6eaf41ea7e95ba9dc830665a52b5d979dfe074237d19578f8
+  languageName: node
+  linkType: hard
+
+"@emnapi/wasi-threads@npm:1.0.2, @emnapi/wasi-threads@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "@emnapi/wasi-threads@npm:1.0.2"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/e82941776665eb958c2084728191d6b15a94383449975c4621b67a1c8217e1c0ec11056a693906c76863cb96f782f8be500510ecec6874e3f5da35a8e7968cfd
+  languageName: node
+  linkType: hard
+
 "@es-joy/jsdoccomment@npm:~0.43.1":
   version: 0.43.1
   resolution: "@es-joy/jsdoccomment@npm:0.43.1"
@@ -5231,7 +5259,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
   version: 0.3.25
   resolution: "@jridgewell/trace-mapping@npm:0.3.25"
   dependencies:
@@ -5671,6 +5699,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@napi-rs/wasm-runtime@npm:^0.2.8":
+  version: 0.2.9
+  resolution: "@napi-rs/wasm-runtime@npm:0.2.9"
+  dependencies:
+    "@emnapi/core": "npm:^1.4.0"
+    "@emnapi/runtime": "npm:^1.4.0"
+    "@tybys/wasm-util": "npm:^0.9.0"
+  checksum: 10/8ebc7d85e11e1b8d71908d5615ff24b27ef7af8287d087fb5cff5a3e545915c7545998d976a9cd6a4315dab4ba0f609439fbe6408fec3afebd288efb0dbdc135
+  languageName: node
+  linkType: hard
+
 "@ngtools/webpack@npm:18.0.5":
   version: 18.0.5
   resolution: "@ngtools/webpack@npm:18.0.5"
@@ -6851,7 +6890,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@parcel/watcher@npm:^2.0.7, @parcel/watcher@npm:^2.4.1":
+"@parcel/watcher@npm:^2.0.7, @parcel/watcher@npm:^2.4.1, @parcel/watcher@npm:^2.5.1":
   version: 2.5.1
   resolution: "@parcel/watcher@npm:2.5.1"
   dependencies:
@@ -7174,9 +7213,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.39.0"
+"@rollup/rollup-android-arm-eabi@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.40.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
@@ -7188,9 +7227,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-android-arm64@npm:4.39.0"
+"@rollup/rollup-android-arm64@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.40.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
@@ -7202,9 +7241,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.39.0"
+"@rollup/rollup-darwin-arm64@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.40.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -7216,9 +7255,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-darwin-x64@npm:4.39.0"
+"@rollup/rollup-darwin-x64@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.40.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -7230,9 +7269,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-arm64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-freebsd-arm64@npm:4.39.0"
+"@rollup/rollup-freebsd-arm64@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.40.0"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -7244,9 +7283,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-x64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-freebsd-x64@npm:4.39.0"
+"@rollup/rollup-freebsd-x64@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.40.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
@@ -7258,9 +7297,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.39.0"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.40.0"
   conditions: os=linux & cpu=arm & libc=glibc
   languageName: node
   linkType: hard
@@ -7272,9 +7311,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-musleabihf@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.39.0"
+"@rollup/rollup-linux-arm-musleabihf@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.40.0"
   conditions: os=linux & cpu=arm & libc=musl
   languageName: node
   linkType: hard
@@ -7286,9 +7325,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.39.0"
+"@rollup/rollup-linux-arm64-gnu@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.40.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
@@ -7300,9 +7339,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.39.0"
+"@rollup/rollup-linux-arm64-musl@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.40.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
@@ -7314,9 +7353,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-loongarch64-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.39.0"
+"@rollup/rollup-linux-loongarch64-gnu@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.40.0"
   conditions: os=linux & cpu=loong64 & libc=glibc
   languageName: node
   linkType: hard
@@ -7328,9 +7367,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-powerpc64le-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.39.0"
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.40.0"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
@@ -7342,16 +7381,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.39.0"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.40.0"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-musl@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.39.0"
+"@rollup/rollup-linux-riscv64-musl@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.40.0"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
@@ -7363,9 +7402,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-s390x-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.39.0"
+"@rollup/rollup-linux-s390x-gnu@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.40.0"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
@@ -7377,9 +7416,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.39.0"
+"@rollup/rollup-linux-x64-gnu@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.40.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
@@ -7391,9 +7430,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.39.0"
+"@rollup/rollup-linux-x64-musl@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.40.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
@@ -7405,9 +7444,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.39.0"
+"@rollup/rollup-win32-arm64-msvc@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.40.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
@@ -7419,9 +7458,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.39.0"
+"@rollup/rollup-win32-ia32-msvc@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.40.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
@@ -7433,9 +7472,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.39.0"
+"@rollup/rollup-win32-x64-msvc@npm:4.40.0":
+  version: 4.40.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.40.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -8269,34 +8308,45 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sveltejs/adapter-auto@npm:^3.0.0":
-  version: 3.2.5
-  resolution: "@sveltejs/adapter-auto@npm:3.2.5"
+"@sveltejs/acorn-typescript@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@sveltejs/acorn-typescript@npm:1.0.5"
+  peerDependencies:
+    acorn: ^8.9.0
+  checksum: 10/23c4c58a0336f44802609dea5ac7ed71d2bc02b8a3b001b03a0accf96a70f2f3d357b1677fd50fbf195d5ed772afed8757451b11c3eda3319fe57925160865d8
+  languageName: node
+  linkType: hard
+
+"@sveltejs/adapter-auto@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@sveltejs/adapter-auto@npm:4.0.0"
   dependencies:
     import-meta-resolve: "npm:^4.1.0"
   peerDependencies:
     "@sveltejs/kit": ^2.0.0
-  checksum: 10/c5d669e2fabd926910a35147c79ebf2548d3beb1a45535aa59ff86b8be020318de98b3ff08f487ebb6fe89b420a82164edc72d6e077ae8c73a738a9478527921
+  checksum: 10/f12c558336aa08da1683da90f4e16e61daccbc0c91577a6ddb6b1821a4aa71850201149302c506ec8025aab6b79fa5a1d6d5a787ac22e5c58994d7d9268d946f
   languageName: node
   linkType: hard
 
-"@sveltejs/adapter-static@npm:^3.0.1":
-  version: 3.0.2
-  resolution: "@sveltejs/adapter-static@npm:3.0.2"
+"@sveltejs/adapter-auto@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "@sveltejs/adapter-auto@npm:6.0.0"
+  dependencies:
+    import-meta-resolve: "npm:^4.1.0"
   peerDependencies:
     "@sveltejs/kit": ^2.0.0
-  checksum: 10/d7a90f7c3ec1c86e0d779dcdca3914e8fae92d0d5a037a3b4eb44b3b730385261d031cccf17c618ff9e148838db26b03f635874b0d00f5b1d8161f32e5fd7d33
+  checksum: 10/3f35dddb8e129ae59f8f6e2b809d558f91c626b5de972a079ab73cc3fc698da883379027be665f446e1ce099f60b153193c030030477025aaaee1a46c35481d4
   languageName: node
   linkType: hard
 
-"@sveltejs/kit@npm:^2.8.3":
-  version: 2.8.3
-  resolution: "@sveltejs/kit@npm:2.8.3"
+"@sveltejs/kit@npm:^2.16.0, @sveltejs/kit@npm:^2.20.7":
+  version: 2.20.7
+  resolution: "@sveltejs/kit@npm:2.20.7"
   dependencies:
     "@types/cookie": "npm:^0.6.0"
     cookie: "npm:^0.6.0"
     devalue: "npm:^5.1.0"
-    esm-env: "npm:^1.0.0"
+    esm-env: "npm:^1.2.2"
     import-meta-resolve: "npm:^4.1.0"
     kleur: "npm:^4.1.5"
     magic-string: "npm:^0.30.5"
@@ -8304,62 +8354,60 @@ __metadata:
     sade: "npm:^1.8.1"
     set-cookie-parser: "npm:^2.6.0"
     sirv: "npm:^3.0.0"
-    tiny-glob: "npm:^0.2.9"
   peerDependencies:
-    "@sveltejs/vite-plugin-svelte": ^3.0.0 || ^4.0.0-next.1
+    "@sveltejs/vite-plugin-svelte": ^3.0.0 || ^4.0.0-next.1 || ^5.0.0
     svelte: ^4.0.0 || ^5.0.0-next.0
-    vite: ^5.0.3
+    vite: ^5.0.3 || ^6.0.0
   bin:
     svelte-kit: svelte-kit.js
-  checksum: 10/ec3e4d66888875497ffb8baded9155de6e02134227bf73bcd28e8501ef2d4222f2a5d4a1ad082a899c21630864ca65b674fb86c2c49c774c1024ea01cf1d1bef
+  checksum: 10/7c3d8e176be93b7af08fb6d4c65346301324575cf51654e18b02957c1539fd5ce3b5b907e8eaa4dcacc9d5c8e3b7dbcefa2704bb6f2e1e3ea1664375d667cbd4
   languageName: node
   linkType: hard
 
-"@sveltejs/package@npm:^2.0.0":
-  version: 2.3.5
-  resolution: "@sveltejs/package@npm:2.3.5"
+"@sveltejs/package@npm:^2.3.11":
+  version: 2.3.11
+  resolution: "@sveltejs/package@npm:2.3.11"
   dependencies:
-    chokidar: "npm:^4.0.0"
+    chokidar: "npm:^4.0.3"
     kleur: "npm:^4.1.5"
     sade: "npm:^1.8.1"
     semver: "npm:^7.5.4"
-    svelte2tsx: "npm:~0.7.16"
+    svelte2tsx: "npm:~0.7.33"
   peerDependencies:
     svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
   bin:
     svelte-package: svelte-package.js
-  checksum: 10/ce2df3cda527ff461d33b55508b0e09d1e779d1b5f4a23127f7438615460333ff9153448e101c80ee32dab90c5c376dde8e78a02c6d1ee5a85ace0a76c16b66d
+  checksum: 10/58e050641f0e87ed04aacf51131f03755844c8addec315e02c9c101fbb34220e9c2209e4526f3b1d3f0ed160cd86fd0e6e8604d771d0eb061bc922577aed77e9
   languageName: node
   linkType: hard
 
-"@sveltejs/vite-plugin-svelte-inspector@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:2.1.0"
+"@sveltejs/vite-plugin-svelte-inspector@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:4.0.1"
   dependencies:
-    debug: "npm:^4.3.4"
+    debug: "npm:^4.3.7"
   peerDependencies:
-    "@sveltejs/vite-plugin-svelte": ^3.0.0
-    svelte: ^4.0.0 || ^5.0.0-next.0
-    vite: ^5.0.0
-  checksum: 10/6abadb6b973d0951bfb15394b42f842a509985fbfcca070364774886bc7153113b932a89b745c3bab240a9e1cfcf2d2b97cb3529f550632901fbe37b4c88c386
+    "@sveltejs/vite-plugin-svelte": ^5.0.0
+    svelte: ^5.0.0
+    vite: ^6.0.0
+  checksum: 10/af851fbeeaa8fd014ab09bd2ff2960593c200ed4673180e44aff21253b5324218853b3782fff7c90755d3f95e8fb073ce2ea533d4acce3d71febf42451024e2d
   languageName: node
   linkType: hard
 
-"@sveltejs/vite-plugin-svelte@npm:^3.0.0":
-  version: 3.1.1
-  resolution: "@sveltejs/vite-plugin-svelte@npm:3.1.1"
+"@sveltejs/vite-plugin-svelte@npm:^5.0.0, @sveltejs/vite-plugin-svelte@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "@sveltejs/vite-plugin-svelte@npm:5.0.3"
   dependencies:
-    "@sveltejs/vite-plugin-svelte-inspector": "npm:^2.1.0"
-    debug: "npm:^4.3.4"
+    "@sveltejs/vite-plugin-svelte-inspector": "npm:^4.0.1"
+    debug: "npm:^4.4.0"
     deepmerge: "npm:^4.3.1"
     kleur: "npm:^4.1.5"
-    magic-string: "npm:^0.30.10"
-    svelte-hmr: "npm:^0.16.0"
-    vitefu: "npm:^0.2.5"
+    magic-string: "npm:^0.30.15"
+    vitefu: "npm:^1.0.4"
   peerDependencies:
-    svelte: ^4.0.0 || ^5.0.0-next.0
-    vite: ^5.0.0
-  checksum: 10/2fb4893f92249b3312d983670c632c5b96edc5d6f9e19c3b015bbf21479d54b9ebd9e9bdbccfa222c0345b7983df95fa592dca584ac8d64943e8f81a7c9eaf78
+    svelte: ^5.0.0
+    vite: ^6.0.0
+  checksum: 10/305757f173b5d7c01e2ab1cd1016fc3a78644ca2ccff2bdd670200cab723c68759c0490d915c1606717d749c472e5dd705abbe1863a9d88c5a3643cc4bbccdcd
   languageName: node
   linkType: hard
 
@@ -8513,6 +8561,315 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/cli@npm:^4.0.6":
+  version: 4.1.1
+  resolution: "@tailwindcss/cli@npm:4.1.1"
+  dependencies:
+    "@parcel/watcher": "npm:^2.5.1"
+    "@tailwindcss/node": "npm:4.1.1"
+    "@tailwindcss/oxide": "npm:4.1.1"
+    enhanced-resolve: "npm:^5.18.1"
+    mri: "npm:^1.2.0"
+    picocolors: "npm:^1.1.1"
+    tailwindcss: "npm:4.1.1"
+  bin:
+    tailwindcss: dist/index.mjs
+  checksum: 10/2c557c90584f0836b0c9dbde46223628bfed6bee06c14802aa0c53fb8d7557c159b641907e318d599cee965ce44f13c838706927330d05275925c22200453987
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/node@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/node@npm:4.1.1"
+  dependencies:
+    enhanced-resolve: "npm:^5.18.1"
+    jiti: "npm:^2.4.2"
+    lightningcss: "npm:1.29.2"
+    tailwindcss: "npm:4.1.1"
+  checksum: 10/88ac4d4443aeb9cbfce4663f557528b108a2abfd6536a39664808f2a8de12500d7501c39b1931e48b0759df25e735e6e9b8931341e81b32391c3475e24242d0f
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/node@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/node@npm:4.1.4"
+  dependencies:
+    enhanced-resolve: "npm:^5.18.1"
+    jiti: "npm:^2.4.2"
+    lightningcss: "npm:1.29.2"
+    tailwindcss: "npm:4.1.4"
+  checksum: 10/804cf7f423cfa543aa00deb35a53222b02ea3c39ac072aa598997297c9b2f190f8dcdd135a166a1949bdde8dbc83995849c40cf494ebb5d2f1fb6c22d22d9ed9
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.1.1"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.1.4"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.1.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.1.4"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.1.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.1.4"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.1.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.1.4"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.4"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.4"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.1.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.1.4"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.1.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.1.4"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.1.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.1.4"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-wasm32-wasi@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.1.4"
+  dependencies:
+    "@emnapi/core": "npm:^1.4.0"
+    "@emnapi/runtime": "npm:^1.4.0"
+    "@emnapi/wasi-threads": "npm:^1.0.1"
+    "@napi-rs/wasm-runtime": "npm:^0.2.8"
+    "@tybys/wasm-util": "npm:^0.9.0"
+    tslib: "npm:^2.8.0"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.4"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.1.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.1.4"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.1.1":
+  version: 4.1.1
+  resolution: "@tailwindcss/oxide@npm:4.1.1"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.1.1"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.1.1"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.1.1"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.1.1"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.1.1"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.1.1"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.1.1"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.1.1"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.1.1"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.1.1"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.1.1"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10/a56477e2a62a65454f2d92caa3170a1f0ea1462f4389d7b77b917284893c8dc0735d3c12ee159be60cf9d796215ceed73591a38dbf647ce7b61f0bcd00c380ba
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.1.4":
+  version: 4.1.4
+  resolution: "@tailwindcss/oxide@npm:4.1.4"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.1.4"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.1.4"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.1.4"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.1.4"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.1.4"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.1.4"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.1.4"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.1.4"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.1.4"
+    "@tailwindcss/oxide-wasm32-wasi": "npm:4.1.4"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.1.4"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.1.4"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-wasm32-wasi":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10/a0c49c2d3d44908864a5fc6d723da7f3b7e19eeb47e9f7d3af416672d1b474f016c8680f5ac38dcf09e5df696aaf0598c3ec1022ebcdfc80fb205beb0872bc38
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/vite@npm:^4.0.0, @tailwindcss/vite@npm:^4.0.9":
+  version: 4.1.4
+  resolution: "@tailwindcss/vite@npm:4.1.4"
+  dependencies:
+    "@tailwindcss/node": "npm:4.1.4"
+    "@tailwindcss/oxide": "npm:4.1.4"
+    tailwindcss: "npm:4.1.4"
+  peerDependencies:
+    vite: ^5.2.0 || ^6
+  checksum: 10/a004255caf3180861130a643c0aaffb7d23dfe2226abf8fbb6b4c58f8f59f2f26fc833b99c5af472d2c5e9dbce1809bafc97210626acebe7bb50888c68695043
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^9.0.0":
   version: 9.3.4
   resolution: "@testing-library/dom@npm:9.3.4"
@@ -8624,6 +8981,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tybys/wasm-util@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@tybys/wasm-util@npm:0.9.0"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/aa58e64753a420ad1eefaf7bacef3dda61d74f9336925943d9244132d5b48d9242f734f1e707fd5ccfa6dd1d8ec8e6debc234b4dedb3a5b0d8486d1f373350b2
+  languageName: node
+  linkType: hard
+
 "@types/aria-query@npm:^5.0.1":
   version: 5.0.4
   resolution: "@types/aria-query@npm:5.0.4"
@@ -8814,7 +9180,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:1.0.7, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.1, @types/estree@npm:^1.0.5, @types/estree@npm:^1.0.6":
+"@types/estree@npm:*, @types/estree@npm:1.0.7, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.5, @types/estree@npm:^1.0.6":
   version: 1.0.7
   resolution: "@types/estree@npm:1.0.7"
   checksum: 10/419c845ece767ad4b21171e6e5b63dabb2eb46b9c0d97361edcd9cabbf6a95fcadb91d89b5fa098d1336fa0b8fceaea82fca97a2ef3971f5c86e53031e157b21
@@ -8861,15 +9227,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/formidable@npm:^3":
-  version: 3.4.5
-  resolution: "@types/formidable@npm:3.4.5"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10/4ef1039eb250071fc5a2d6195d6c7cfccce52b69e80ede496409bfbdb2a60bac3f17cef5f84bac0347f69a83e884e3036dadf08450f3cf25dfa24fd372cc6850
-  languageName: node
-  linkType: hard
-
 "@types/gapi@npm:^0.0.47":
   version: 0.0.47
   resolution: "@types/gapi@npm:0.0.47"
@@ -9127,13 +9484,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/pug@npm:^2.0.6":
-  version: 2.0.10
-  resolution: "@types/pug@npm:2.0.10"
-  checksum: 10/b7331b87ceffe6a55b200d0fbfd3f4defdc6703ce21d25a8f3f01d9022a3b36ab0e2ee7d6eeb16b82b6375c0cadf35e1633219775237cb0c62e785fbd35df57c
-  languageName: node
-  linkType: hard
-
 "@types/qs@npm:*":
   version: 6.9.15
   resolution: "@types/qs@npm:6.9.15"
@@ -9157,6 +9507,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:^19.0.4":
+  version: 19.1.1
+  resolution: "@types/react-dom@npm:19.1.1"
+  peerDependencies:
+    "@types/react": ^19.0.0
+  checksum: 10/39dd8fc080559a8d9f7f9afc8868e0885eac0abe5816ef46050866e8c84b466641edf4b62221430d07070d903a2824e81002a7bbc5bde51adb682fcb830e7839
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:^18":
   version: 18.3.3
   resolution: "@types/react@npm:18.3.3"
@@ -9846,19 +10205,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy-example/react@workspace:examples/react-example":
+"@uppy-example/react@workspace:examples/react":
   version: 0.0.0-use.local
-  resolution: "@uppy-example/react@workspace:examples/react-example"
+  resolution: "@uppy-example/react@workspace:examples/react"
   dependencies:
-    "@uppy/core": "workspace:*"
-    "@uppy/dashboard": "workspace:*"
-    "@uppy/react": "workspace:*"
-    "@uppy/remote-sources": "workspace:*"
-    "@uppy/tus": "workspace:*"
-    "@vitejs/plugin-react": "npm:^4.0.0"
-    react: "npm:^18.0.0"
-    react-dom: "npm:^18.0.0"
-    vite: "npm:^5.4.17"
+    "@tailwindcss/vite": "npm:^4.0.9"
+    "@types/react": "npm:^19.0.10"
+    "@types/react-dom": "npm:^19.0.4"
+    "@uppy/core": "npm:^4.4.2"
+    "@uppy/react": "workspace:^"
+    "@uppy/tus": "npm:^4.2.2"
+    "@uppy/webcam": "npm:^4.1.1"
+    "@vitejs/plugin-react": "npm:^4.3.4"
+    react: "npm:^19.0.0"
+    react-dom: "npm:^19.0.0"
+    tailwindcss: "npm:^4.0.9"
+    typescript: "npm:^5.7.3"
+    vite: "npm:^6.2.0"
   languageName: unknown
   linkType: soft
 
@@ -9877,28 +10240,26 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy-example/svelte-app@workspace:examples/svelte-example":
+"@uppy-example/sveltekit@workspace:examples/sveltekit":
   version: 0.0.0-use.local
-  resolution: "@uppy-example/svelte-app@workspace:examples/svelte-example"
+  resolution: "@uppy-example/sveltekit@workspace:examples/sveltekit"
   dependencies:
-    "@sveltejs/adapter-static": "npm:^3.0.1"
-    "@sveltejs/kit": "npm:^2.8.3"
-    "@sveltejs/vite-plugin-svelte": "npm:^3.0.0"
-    "@types/formidable": "npm:^3"
+    "@sveltejs/adapter-auto": "npm:^4.0.0"
+    "@sveltejs/kit": "npm:^2.16.0"
+    "@sveltejs/vite-plugin-svelte": "npm:^5.0.0"
+    "@tailwindcss/vite": "npm:^4.0.0"
     "@uppy/core": "workspace:*"
     "@uppy/dashboard": "workspace:*"
     "@uppy/drag-drop": "workspace:*"
     "@uppy/progress-bar": "workspace:*"
     "@uppy/svelte": "workspace:*"
+    "@uppy/tus": "workspace:*"
     "@uppy/webcam": "workspace:*"
-    "@uppy/xhr-upload": "workspace:*"
-    formidable: "npm:^3.5.1"
-    npm-run-all: "npm:^4.1.5"
-    svelte: "npm:^4.2.19"
-    svelte-check: "npm:^3.6.0"
-    tslib: "npm:^2.4.1"
-    typescript: "npm:~5.4"
-    vite: "npm:^5.4.17"
+    svelte: "npm:^5.0.0"
+    svelte-check: "npm:^4.0.0"
+    tailwindcss: "npm:^4.0.0"
+    typescript: "npm:^5.0.0"
+    vite: "npm:^6.2.5"
   languageName: unknown
   linkType: soft
 
@@ -9954,6 +10315,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy-example/vue3@workspace:examples/vue3"
   dependencies:
+    "@tailwindcss/vite": "npm:^4.0.0"
     "@uppy/core": "workspace:*"
     "@uppy/dashboard": "workspace:*"
     "@uppy/drag-drop": "workspace:*"
@@ -9962,7 +10324,8 @@ __metadata:
     "@uppy/vue": "workspace:*"
     "@uppy/webcam": "workspace:*"
     "@vitejs/plugin-vue": "npm:^5.0.0"
-    vite: "npm:^5.4.17"
+    tailwindcss: "npm:^4.0.0"
+    vite: "npm:^6.2.0"
     vue: "npm:^3.2.33"
   languageName: unknown
   linkType: soft
@@ -10128,6 +10491,35 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@uppy/components@workspace:^, @uppy/components@workspace:packages/@uppy/components":
+  version: 0.0.0-use.local
+  resolution: "@uppy/components@workspace:packages/@uppy/components"
+  dependencies:
+    "@tailwindcss/cli": "npm:^4.0.6"
+    clsx: "npm:^2.1.1"
+    preact: "npm:^10.5.13"
+    pretty-bytes: "npm:^6.1.1"
+    tailwindcss: "npm:^4.0.6"
+  peerDependencies:
+    "@uppy/audio": "workspace:^"
+    "@uppy/core": "workspace:^"
+    "@uppy/image-editor": "workspace:^"
+    "@uppy/screen-capture": "workspace:^"
+    "@uppy/webcam": "workspace:^"
+  peerDependenciesMeta:
+    "@uppy/audio":
+      optional: true
+    "@uppy/google-drive-picker":
+      optional: true
+    "@uppy/image-editor":
+      optional: true
+    "@uppy/screen-capture":
+      optional: true
+    "@uppy/webcam":
+      optional: true
+  languageName: unknown
+  linkType: soft
+
 "@uppy/compressor@workspace:^, @uppy/compressor@workspace:packages/@uppy/compressor":
   version: 0.0.0-use.local
   resolution: "@uppy/compressor@workspace:packages/@uppy/compressor"
@@ -10143,7 +10535,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy/core@workspace:*, @uppy/core@workspace:^, @uppy/core@workspace:packages/@uppy/core":
+"@uppy/core@npm:^4.4.2, @uppy/core@workspace:*, @uppy/core@workspace:^, @uppy/core@workspace:packages/@uppy/core":
   version: 0.0.0-use.local
   resolution: "@uppy/core@workspace:packages/@uppy/core"
   dependencies:
@@ -10407,7 +10799,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy/react@workspace:*, @uppy/react@workspace:packages/@uppy/react":
+"@uppy/react@workspace:*, @uppy/react@workspace:^, @uppy/react@workspace:packages/@uppy/react":
   version: 0.0.0-use.local
   resolution: "@uppy/react@workspace:packages/@uppy/react"
   dependencies:
@@ -10415,7 +10807,9 @@ __metadata:
     "@testing-library/react": "npm:^14.2.2"
     "@types/react": "npm:^18.0.8"
     "@types/use-sync-external-store": "npm:^0.0.6"
+    "@uppy/components": "workspace:^"
     "@uppy/utils": "workspace:^"
+    preact: "npm:^10.5.13"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     use-sync-external-store: "npm:^1.2.0"
@@ -10425,8 +10819,11 @@ __metadata:
     "@uppy/drag-drop": "workspace:^"
     "@uppy/file-input": "workspace:^"
     "@uppy/progress-bar": "workspace:^"
+    "@uppy/screen-capture": "workspace:^"
     "@uppy/status-bar": "workspace:^"
+    "@uppy/webcam": "workspace:^"
     react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@uppy/dashboard":
       optional: true
@@ -10436,8 +10833,12 @@ __metadata:
       optional: true
     "@uppy/progress-bar":
       optional: true
+    "@uppy/screen-capture":
+      optional: true
     "@uppy/status-bar":
       optional: true
+    "@uppy/webcam":
+      optional: true
   languageName: unknown
   linkType: soft
 
@@ -10516,15 +10917,17 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy/svelte@workspace:packages/@uppy/svelte"
   dependencies:
-    "@sveltejs/adapter-auto": "npm:^3.0.0"
-    "@sveltejs/kit": "npm:^2.8.3"
-    "@sveltejs/package": "npm:^2.0.0"
-    "@sveltejs/vite-plugin-svelte": "npm:^3.0.0"
-    svelte: "npm:^4.2.7"
-    svelte-check: "npm:^3.6.0"
-    tslib: "npm:^2.4.1"
-    typescript: "npm:^5.0.0"
-    vite: "npm:^5.4.17"
+    "@sveltejs/adapter-auto": "npm:^6.0.0"
+    "@sveltejs/kit": "npm:^2.20.7"
+    "@sveltejs/package": "npm:^2.3.11"
+    "@sveltejs/vite-plugin-svelte": "npm:^5.0.3"
+    "@uppy/components": "workspace:^"
+    preact: "npm:^10.26.5"
+    svelte: "npm:^5.27.0"
+    svelte-check: "npm:^4.1.6"
+    tslib: "npm:^2.8.1"
+    typescript: "npm:^5.8.3"
+    vite: "npm:^6.3.0"
   peerDependencies:
     "@uppy/core": "workspace:^"
     "@uppy/dashboard": "workspace:^"
@@ -10564,7 +10967,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy/tus@workspace:*, @uppy/tus@workspace:^, @uppy/tus@workspace:packages/@uppy/tus":
+"@uppy/tus@npm:^4.2.2, @uppy/tus@workspace:*, @uppy/tus@workspace:^, @uppy/tus@workspace:packages/@uppy/tus":
   version: 0.0.0-use.local
   resolution: "@uppy/tus@workspace:packages/@uppy/tus"
   dependencies:
@@ -10618,6 +11021,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy/vue@workspace:packages/@uppy/vue"
   dependencies:
+    "@uppy/components": "workspace:^"
+    preact: "npm:^10.5.13"
     shallow-equal: "npm:^3.0.0"
     vue: "npm:^3.4.21"
   peerDependencies:
@@ -10642,7 +11047,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy/webcam@workspace:*, @uppy/webcam@workspace:^, @uppy/webcam@workspace:packages/@uppy/webcam":
+"@uppy/webcam@npm:^4.1.1, @uppy/webcam@workspace:*, @uppy/webcam@workspace:^, @uppy/webcam@workspace:packages/@uppy/webcam":
   version: 0.0.0-use.local
   resolution: "@uppy/webcam@workspace:packages/@uppy/webcam"
   dependencies:
@@ -10712,18 +11117,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-react@npm:^4.0.0":
-  version: 4.3.1
-  resolution: "@vitejs/plugin-react@npm:4.3.1"
+"@vitejs/plugin-react@npm:^4.3.4":
+  version: 4.3.4
+  resolution: "@vitejs/plugin-react@npm:4.3.4"
   dependencies:
-    "@babel/core": "npm:^7.24.5"
-    "@babel/plugin-transform-react-jsx-self": "npm:^7.24.5"
-    "@babel/plugin-transform-react-jsx-source": "npm:^7.24.1"
+    "@babel/core": "npm:^7.26.0"
+    "@babel/plugin-transform-react-jsx-self": "npm:^7.25.9"
+    "@babel/plugin-transform-react-jsx-source": "npm:^7.25.9"
     "@types/babel__core": "npm:^7.20.5"
     react-refresh: "npm:^0.14.2"
   peerDependencies:
-    vite: ^4.2.0 || ^5.0.0
-  checksum: 10/a9d1eb30c968bf719a3277067211493746579aee14a7af8c0edb2cde38e8e5bbd461e62a41c3590e2c6eb04a047114eb3e97dcd591967625fbbc7aead8dfaf90
+    vite: ^4.2.0 || ^5.0.0 || ^6.0.0
+  checksum: 10/3b220908ed9b7b96a380a9c53e82fb428ca1f76b798ab59d1c63765bdff24de61b4778dd3655952b7d3d922645aea2d97644503b879aba6e3fcf467605b9913d
   languageName: node
   linkType: hard
 
@@ -11170,7 +11575,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.10.0, acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.12.0, acorn@npm:^8.14.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.12.0, acorn@npm:^8.12.1, acorn@npm:^8.14.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
   version: 8.14.1
   resolution: "acorn@npm:8.14.1"
   bin:
@@ -11567,7 +11972,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:5.3.2, aria-query@npm:^5.0.0, aria-query@npm:^5.3.0":
+"aria-query@npm:5.3.2, aria-query@npm:^5.0.0, aria-query@npm:^5.3.1":
   version: 5.3.2
   resolution: "aria-query@npm:5.3.2"
   checksum: 10/b2fe9bc98bd401bc322ccb99717c1ae2aaf53ea0d468d6e7aebdc02fac736e4a99b46971ee05b783b08ade23c675b2d8b60e4a1222a95f6e27bc4d2a0bfdcc03
@@ -11993,7 +12398,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axobject-query@npm:4.1.0, axobject-query@npm:^4.0.0":
+"axobject-query@npm:4.1.0, axobject-query@npm:^4.1.0":
   version: 4.1.0
   resolution: "axobject-query@npm:4.1.0"
   checksum: 10/e275dea9b673f71170d914f2d2a18be5d57d8d29717b629e7fedd907dcc2ebdc7a37803ff975874810bd423f222f299c020d28fde40a146f537448bf6bfecb6e
@@ -12589,13 +12994,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer-crc32@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "buffer-crc32@npm:1.0.0"
-  checksum: 10/ef3b7c07622435085c04300c9a51e850ec34a27b2445f758eef69b859c7827848c2282f3840ca6c1eef3829145a1580ce540cab03ccf4433827a2b95d3b09ca7
-  languageName: node
-  linkType: hard
-
 "buffer-crc32@npm:~0.2.3":
   version: 0.2.13
   resolution: "buffer-crc32@npm:0.2.13"
@@ -13064,7 +13462,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.3.1, chokidar@npm:^3.4.0, chokidar@npm:^3.4.1, chokidar@npm:^3.5.1, chokidar@npm:^3.6.0":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.3.1, chokidar@npm:^3.4.0, chokidar@npm:^3.5.1, chokidar@npm:^3.6.0":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
   dependencies:
@@ -13083,7 +13481,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^4.0.0, chokidar@npm:^4.0.1":
+"chokidar@npm:^4.0.0, chokidar@npm:^4.0.1, chokidar@npm:^4.0.3":
   version: 4.0.3
   resolution: "chokidar@npm:4.0.3"
   dependencies:
@@ -13308,6 +13706,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10/cdfb57fa6c7649bbff98d9028c2f0de2f91c86f551179541cf784b1cfdc1562dcb951955f46d54d930a3879931a980e32a46b598acaea274728dbe068deca919
+  languageName: node
+  linkType: hard
+
 "cluster-key-slot@npm:^1.1.0":
   version: 1.1.2
   resolution: "cluster-key-slot@npm:1.1.2"
@@ -13322,19 +13727,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"code-red@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "code-red@npm:1.0.4"
-  dependencies:
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-    "@types/estree": "npm:^1.0.1"
-    acorn: "npm:^8.10.0"
-    estree-walker: "npm:^3.0.3"
-    periscopic: "npm:^3.1.0"
-  checksum: 10/c3afdcb6d4042156c53b6dc58e63825a2439af9cbe3d2a14a51275be1dc3cf3b3bb438cb6af5e99a8af1e8741978e39febf21d4dd5b8c144bc8bc297c045ed02
-  languageName: node
-  linkType: hard
-
 "collapse-white-space@npm:^2.0.0":
   version: 2.1.0
   resolution: "collapse-white-space@npm:2.1.0"
@@ -14478,7 +14870,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.6":
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.6, debug@npm:^4.3.7, debug@npm:^4.4.0":
   version: 4.4.0
   resolution: "debug@npm:4.4.0"
   dependencies:
@@ -14844,13 +15236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-indent@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "detect-indent@npm:6.1.0"
-  checksum: 10/ab953a73c72dbd4e8fc68e4ed4bfd92c97eb6c43734af3900add963fd3a9316f3bc0578b018b24198d4c31a358571eff5f0656e81a1f3b9ad5c547d58b2d093d
-  languageName: node
-  linkType: hard
-
 "detect-libc@npm:^1.0.3":
   version: 1.0.3
   resolution: "detect-libc@npm:1.0.3"
@@ -14860,7 +15245,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-libc@npm:^2.0.1":
+"detect-libc@npm:^2.0.1, detect-libc@npm:^2.0.3":
   version: 2.0.3
   resolution: "detect-libc@npm:2.0.3"
   checksum: 10/b4ea018d623e077bd395f168a9e81db77370dde36a5b01d067f2ad7989924a81d31cb547ff764acb2aa25d50bb7fdde0b0a93bec02212b0cb430621623246d39
@@ -15184,9 +15569,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.5.73":
-  version: 1.5.132
-  resolution: "electron-to-chromium@npm:1.5.132"
-  checksum: 10/ff50f38e26c5acdce1010703197a1cd1b9d9d789160ee1d4a2fc9f5dff6a030632ab36893156147d7360e891dd7151e156c6003ca271d4acbb4e501788ff22bd
+  version: 1.5.130
+  resolution: "electron-to-chromium@npm:1.5.130"
+  checksum: 10/ccca4d64fb687e9cb91105fd23a3cd27dce22a9a934b12a829b8258fb38b2138d805fb14256fcf9be6bee8b29bdbb14773441ac4e2a8c811369edb8431c0d356
   languageName: node
   linkType: hard
 
@@ -15297,7 +15682,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enhanced-resolve@npm:^5.16.0, enhanced-resolve@npm:^5.17.1":
+"enhanced-resolve@npm:^5.16.0, enhanced-resolve@npm:^5.17.1, enhanced-resolve@npm:^5.18.1":
   version: 5.18.1
   resolution: "enhanced-resolve@npm:5.18.1"
   dependencies:
@@ -15579,13 +15964,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es6-promise@npm:^3.1.2":
-  version: 3.3.1
-  resolution: "es6-promise@npm:3.3.1"
-  checksum: 10/14f46a0a20164d4d6f8a39133c7220688bb9ee2d89a78f2345694b8ac9b6ea7b94f73488e289a083dce732831f4040013b25222d1820580c7b10b698c50c8267
-  languageName: node
-  linkType: hard
-
 "esbuild-plugin-babel@npm:^0.2.3":
   version: 0.2.3
   resolution: "esbuild-plugin-babel@npm:0.2.3"
@@ -16460,10 +16838,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esm-env@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "esm-env@npm:1.0.0"
-  checksum: 10/379e34c5bfdfe7004a6ddf492511b619bfe3488520ee5c683a700f5e58942a26dd2220ebb74be83b4d46930c57f26adfd449404edfa1e68231d4b354b23f91be
+"esm-env@npm:^1.2.1, esm-env@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "esm-env@npm:1.2.2"
+  checksum: 10/caf5f3cc2bc7107494585b4e38835787f48ef77b670aeb2d765a5b6b64c41102d20bbdd34bda32474291b6b8d819d4d02ce92570a0886baca6cef70f5fe689f3
   languageName: node
   linkType: hard
 
@@ -16508,6 +16886,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esrap@npm:^1.4.6":
+  version: 1.4.6
+  resolution: "esrap@npm:1.4.6"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
+  checksum: 10/0fc113a930512af470cf9ed2d49950f3b4b3456ab1f3cce56f69322a9815fbe1fbe33713dd5bafff6ed957767afce49d427043d680768727c6ca1e2c11692e5f
+  languageName: node
+  linkType: hard
+
 "esrecurse@npm:^4.3.0":
   version: 4.3.0
   resolution: "esrecurse@npm:4.3.0"
@@ -16538,7 +16925,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-walker@npm:^3.0.0, estree-walker@npm:^3.0.3":
+"estree-walker@npm:^3.0.3":
   version: 3.0.3
   resolution: "estree-walker@npm:3.0.3"
   dependencies:
@@ -17115,7 +17502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:3.3.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2, fast-glob@npm:^3.3.3":
+"fast-glob@npm:3.3.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2, fast-glob@npm:^3.3.3":
   version: 3.3.3
   resolution: "fast-glob@npm:3.3.3"
   dependencies:
@@ -17283,7 +17670,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fdir@npm:^6.4.3":
+"fdir@npm:^6.2.0, fdir@npm:^6.4.3":
   version: 6.4.3
   resolution: "fdir@npm:6.4.3"
   peerDependencies:
@@ -17651,7 +18038,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"formidable@npm:^3.2.4, formidable@npm:^3.5.1":
+"formidable@npm:^3.2.4":
   version: 3.5.1
   resolution: "formidable@npm:3.5.1"
   dependencies:
@@ -18178,13 +18565,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globalyzer@npm:0.1.0":
-  version: 0.1.0
-  resolution: "globalyzer@npm:0.1.0"
-  checksum: 10/419a0f95ba542534fac0842964d31b3dc2936a479b2b1a8a62bad7e8b61054faa9b0a06ad9f2e12593396b9b2621cac93358d9b3071d33723fb1778608d358a1
-  languageName: node
-  linkType: hard
-
 "globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
@@ -18233,13 +18613,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globrex@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "globrex@npm:0.1.2"
-  checksum: 10/81ce62ee6f800d823d6b7da7687f841676d60ee8f51f934ddd862e4057316d26665c4edc0358d4340a923ac00a514f8b67c787e28fe693aae16350f4e60d55e9
-  languageName: node
-  linkType: hard
-
 "globule@npm:^1.0.0":
   version: 1.3.4
   resolution: "globule@npm:1.3.4"
@@ -19789,12 +20162,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-reference@npm:^3.0.0, is-reference@npm:^3.0.1":
-  version: 3.0.2
-  resolution: "is-reference@npm:3.0.2"
+"is-reference@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "is-reference@npm:3.0.3"
   dependencies:
-    "@types/estree": "npm:*"
-  checksum: 10/ac3bf5626fe9d0afbd7454760d73c47f16b9f471401b9749721ad3b66f0a39644390382acf88ca9d029c95782c1e2ec65662855e3ba91acf52d82231247a7fd3
+    "@types/estree": "npm:^1.0.6"
+  checksum: 10/11371fb2669a8144bffb2ae9bd11b0342b7dc384c3c0f8d5996566b071614282a3a0d306fd2fd1c6b4c9078d0e2703d191b47f4f78f9ce08f464c44a3a412412
   languageName: node
   linkType: hard
 
@@ -20716,6 +21089,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^2.4.2":
+  version: 2.4.2
+  resolution: "jiti@npm:2.4.2"
+  bin:
+    jiti: lib/jiti-cli.mjs
+  checksum: 10/e2b07eb2e3fbb245e29ad288dddecab31804967fc84d5e01d39858997d2743b5e248946defcecf99272275a00284ecaf7ec88b8c841331324f0c946d8274414b
+  languageName: node
+  linkType: hard
+
 "joi@npm:^17.2.1, joi@npm:^17.4.0":
   version: 17.13.3
   resolution: "joi@npm:17.13.3"
@@ -21493,6 +21875,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-darwin-arm64@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-darwin-arm64@npm:1.29.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "lightningcss-darwin-x64@npm:1.25.1":
   version: 1.25.1
   resolution: "lightningcss-darwin-x64@npm:1.25.1"
@@ -21500,6 +21889,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-darwin-x64@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-darwin-x64@npm:1.29.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "lightningcss-freebsd-x64@npm:1.25.1":
   version: 1.25.1
   resolution: "lightningcss-freebsd-x64@npm:1.25.1"
@@ -21507,6 +21903,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-freebsd-x64@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-freebsd-x64@npm:1.29.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-arm-gnueabihf@npm:1.25.1":
   version: 1.25.1
   resolution: "lightningcss-linux-arm-gnueabihf@npm:1.25.1"
@@ -21514,6 +21917,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-arm-gnueabihf@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.29.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-arm64-gnu@npm:1.25.1":
   version: 1.25.1
   resolution: "lightningcss-linux-arm64-gnu@npm:1.25.1"
@@ -21521,6 +21931,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-arm64-gnu@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.29.2"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-arm64-musl@npm:1.25.1":
   version: 1.25.1
   resolution: "lightningcss-linux-arm64-musl@npm:1.25.1"
@@ -21528,6 +21945,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-arm64-musl@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-arm64-musl@npm:1.29.2"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-x64-gnu@npm:1.25.1":
   version: 1.25.1
   resolution: "lightningcss-linux-x64-gnu@npm:1.25.1"
@@ -21535,6 +21959,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-x64-gnu@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-x64-gnu@npm:1.29.2"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-x64-musl@npm:1.25.1":
   version: 1.25.1
   resolution: "lightningcss-linux-x64-musl@npm:1.25.1"
@@ -21542,6 +21973,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-x64-musl@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-x64-musl@npm:1.29.2"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.29.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "lightningcss-win32-x64-msvc@npm:1.25.1":
   version: 1.25.1
   resolution: "lightningcss-win32-x64-msvc@npm:1.25.1"
@@ -21549,6 +21994,53 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-win32-x64-msvc@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-win32-x64-msvc@npm:1.29.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss@npm:1.29.2"
+  dependencies:
+    detect-libc: "npm:^2.0.3"
+    lightningcss-darwin-arm64: "npm:1.29.2"
+    lightningcss-darwin-x64: "npm:1.29.2"
+    lightningcss-freebsd-x64: "npm:1.29.2"
+    lightningcss-linux-arm-gnueabihf: "npm:1.29.2"
+    lightningcss-linux-arm64-gnu: "npm:1.29.2"
+    lightningcss-linux-arm64-musl: "npm:1.29.2"
+    lightningcss-linux-x64-gnu: "npm:1.29.2"
+    lightningcss-linux-x64-musl: "npm:1.29.2"
+    lightningcss-win32-arm64-msvc: "npm:1.29.2"
+    lightningcss-win32-x64-msvc: "npm:1.29.2"
+  dependenciesMeta:
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10/dadd85a1d46699d831c56633b6d6461916229b2291f32197af5249bc8295b9b9232d9cc26777b8de74413973e560c7b543a699ca922a9ebb4ef7fcb4646411cf
+  languageName: node
+  linkType: hard
+
 "lightningcss@npm:^1.22.1":
   version: 1.25.1
   resolution: "lightningcss@npm:1.25.1"
@@ -22287,7 +22779,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:0.30.17, magic-string@npm:^0.30.10, magic-string@npm:^0.30.4, magic-string@npm:^0.30.5":
+"magic-string@npm:0.30.17, magic-string@npm:^0.30.10, magic-string@npm:^0.30.11, magic-string@npm:^0.30.15, magic-string@npm:^0.30.5":
   version: 0.30.17
   resolution: "magic-string@npm:0.30.17"
   dependencies:
@@ -24176,7 +24668,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mri@npm:^1.1.0":
+"mri@npm:^1.1.0, mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
   checksum: 10/6775a1d2228bb9d191ead4efc220bd6be64f943ad3afd4dcb3b3ac8fc7b87034443f666e38805df38e8d047b29f910c3cc7810da0109af83e42c82c73bd3f6bc
@@ -24331,11 +24823,11 @@ __metadata:
   linkType: hard
 
 "nanoid@npm:^5.0.9":
-  version: 5.1.2
-  resolution: "nanoid@npm:5.1.2"
+  version: 5.0.9
+  resolution: "nanoid@npm:5.0.9"
   bin:
     nanoid: bin/nanoid.js
-  checksum: 10/ada00d1a3f43ac037d2d9cb96fc33e60d8d522f5451a0b02d6d13548b534df1ba797f4d86cc821ad892b6761650b34f1c979bf5577295c2046b7d7b34b59f48e
+  checksum: 10/8a3f9104f81095e3e4785f58caae47a05755599824b8611b9730cbf73db706b664f100e6189f8303f08764f144d499613d8e4a39e83125c53f4b4986d6576621
   languageName: node
   linkType: hard
 
@@ -26145,17 +26637,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"periscopic@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "periscopic@npm:3.1.0"
-  dependencies:
-    "@types/estree": "npm:^1.0.0"
-    estree-walker: "npm:^3.0.0"
-    is-reference: "npm:^3.0.0"
-  checksum: 10/088a85a6de42e2f34414392dec8348218508609389ecb8002b009c357fa26bdfb67c385d9ec0e4e1089e27748ddc0789254073ef78fd576a32b5e641474c56ba
-  languageName: node
-  linkType: hard
-
 "picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
@@ -26936,6 +27417,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-bytes@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "pretty-bytes@npm:6.1.1"
+  checksum: 10/43d29d909d2d88072da2c3d72f8fd0f2d2523c516bfa640aff6e31f596ea1004b6601f4cabc50d14b2cf10e82635ebe5b7d9378f3d5bae1c0067131829421b8a
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^26.4.0, pretty-format@npm:^26.5.2, pretty-format@npm:^26.6.2":
   version: 26.6.2
   resolution: "pretty-format@npm:26.6.2"
@@ -27317,7 +27805,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.0.0, react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
+"react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -27329,6 +27817,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dom@npm:^19.0.0":
+  version: 19.1.0
+  resolution: "react-dom@npm:19.1.0"
+  dependencies:
+    scheduler: "npm:^0.26.0"
+  peerDependencies:
+    react: ^19.1.0
+  checksum: 10/c5b58605862c7b0bb044416b01c73647bb8e89717fb5d7a2c279b11815fb7b49b619fe685c404e59f55eb52c66831236cc565c25ee1c2d042739f4a2cc538aa2
+  languageName: node
+  linkType: hard
+
 "react-error-overlay@npm:6.0.9":
   version: 6.0.9
   resolution: "react-error-overlay@npm:6.0.9"
@@ -27477,7 +27976,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.0.0, react@npm:^18.1.0, react@npm:^18.2.0":
+"react@npm:^18.1.0, react@npm:^18.2.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -27486,6 +27985,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:^19.0.0":
+  version: 19.1.0
+  resolution: "react@npm:19.1.0"
+  checksum: 10/d0180689826fd9de87e839c365f6f361c561daea397d61d724687cae88f432a307d1c0f53a0ee95ddbe3352c10dac41d7ff1ad85530fb24951b27a39e5398db4
+  languageName: node
+  linkType: hard
+
 "read-package-json-fast@npm:^2.0.3":
   version: 2.0.3
   resolution: "read-package-json-fast@npm:2.0.3"
@@ -28545,7 +29051,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^2.5.2, rimraf@npm:^2.5.4":
+"rimraf@npm:^2.5.4":
   version: 2.7.1
   resolution: "rimraf@npm:2.7.1"
   dependencies:
@@ -28670,30 +29176,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^4.13.0, rollup@npm:^4.20.0, rollup@npm:^4.24.0, rollup@npm:^4.30.1":
-  version: 4.39.0
-  resolution: "rollup@npm:4.39.0"
+"rollup@npm:^4.13.0, rollup@npm:^4.20.0, rollup@npm:^4.24.0, rollup@npm:^4.30.1, rollup@npm:^4.34.9":
+  version: 4.40.0
+  resolution: "rollup@npm:4.40.0"
   dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.39.0"
-    "@rollup/rollup-android-arm64": "npm:4.39.0"
-    "@rollup/rollup-darwin-arm64": "npm:4.39.0"
-    "@rollup/rollup-darwin-x64": "npm:4.39.0"
-    "@rollup/rollup-freebsd-arm64": "npm:4.39.0"
-    "@rollup/rollup-freebsd-x64": "npm:4.39.0"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.39.0"
-    "@rollup/rollup-linux-arm-musleabihf": "npm:4.39.0"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.39.0"
-    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-riscv64-musl": "npm:4.39.0"
-    "@rollup/rollup-linux-s390x-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-x64-musl": "npm:4.39.0"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.39.0"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.39.0"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.39.0"
+    "@rollup/rollup-android-arm-eabi": "npm:4.40.0"
+    "@rollup/rollup-android-arm64": "npm:4.40.0"
+    "@rollup/rollup-darwin-arm64": "npm:4.40.0"
+    "@rollup/rollup-darwin-x64": "npm:4.40.0"
+    "@rollup/rollup-freebsd-arm64": "npm:4.40.0"
+    "@rollup/rollup-freebsd-x64": "npm:4.40.0"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.40.0"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.40.0"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.40.0"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.40.0"
+    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.40.0"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.40.0"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.40.0"
+    "@rollup/rollup-linux-riscv64-musl": "npm:4.40.0"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.40.0"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.40.0"
+    "@rollup/rollup-linux-x64-musl": "npm:4.40.0"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.40.0"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.40.0"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.40.0"
     "@types/estree": "npm:1.0.7"
     fsevents: "npm:~2.3.2"
   dependenciesMeta:
@@ -28741,7 +29247,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 10/d3b106efb71cd501b71e3a56e3257ccad4d969a201d59aa2e74d9b91ad5f44c508ddebfbe3de82d4324e9b0977420d35d6cce8e45f784a91080acea66c1c1ce8
+  checksum: 10/59976247cd855bc48b7192c82a6751bd04213e5a265109c652a6c43bde9056038c6399c0cf50ea3001edd5c11bb878a59e1055bb651b3bd6bbd0373c0345ed0c
   languageName: node
   linkType: hard
 
@@ -28860,18 +29366,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sander@npm:^0.5.0":
-  version: 0.5.1
-  resolution: "sander@npm:0.5.1"
-  dependencies:
-    es6-promise: "npm:^3.1.2"
-    graceful-fs: "npm:^4.1.3"
-    mkdirp: "npm:^0.5.1"
-    rimraf: "npm:^2.5.2"
-  checksum: 10/723e8c9ff7a3742b3c2ee913d1a968ddebb27884c726a3ea7aec1ce2b573e071a1f3a110a846e584ff416747378399b5d377629d88ba2bad64679b1f2ff7d384
-  languageName: node
-  linkType: hard
-
 "sane@npm:^4.0.3":
   version: 4.1.0
   resolution: "sane@npm:4.1.0"
@@ -29025,6 +29519,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.26.0":
+  version: 0.26.0
+  resolution: "scheduler@npm:0.26.0"
+  checksum: 10/1ecf2e5d7de1a7a132796834afe14a2d589ba7e437615bd8c06f3e0786a3ac3434655e67aac8755d9b14e05754c177e49c064261de2673aaa3c926bc98caa002
+  languageName: node
+  linkType: hard
+
 "schema-utils@npm:^3.2.0":
   version: 3.3.0
   resolution: "schema-utils@npm:3.3.0"
@@ -29668,20 +30169,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sorcery@npm:^0.11.0":
-  version: 0.11.1
-  resolution: "sorcery@npm:0.11.1"
-  dependencies:
-    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
-    buffer-crc32: "npm:^1.0.0"
-    minimist: "npm:^1.2.0"
-    sander: "npm:^0.5.0"
-  bin:
-    sorcery: bin/sorcery
-  checksum: 10/2e3f32ac0fbd9a72faffe84374ededca0eb5df10adadaeb9a9651b0fceeec75efecc9037d4fa2945f4070f996af105aaf71cd084f07eb71bd2e2d151369b3a71
-  languageName: node
-  linkType: hard
-
 "sorted-array-functions@npm:^1.3.0":
   version: 1.3.0
   resolution: "sorted-array-functions@npm:1.3.0"
@@ -30706,113 +31193,56 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-check@npm:^3.6.0":
-  version: 3.8.1
-  resolution: "svelte-check@npm:3.8.1"
+"svelte-check@npm:^4.0.0, svelte-check@npm:^4.1.6":
+  version: 4.1.6
+  resolution: "svelte-check@npm:4.1.6"
   dependencies:
-    "@jridgewell/trace-mapping": "npm:^0.3.17"
-    chokidar: "npm:^3.4.1"
-    fast-glob: "npm:^3.2.7"
-    import-fresh: "npm:^3.2.1"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    chokidar: "npm:^4.0.1"
+    fdir: "npm:^6.2.0"
     picocolors: "npm:^1.0.0"
     sade: "npm:^1.7.4"
-    svelte-preprocess: "npm:^5.1.3"
-    typescript: "npm:^5.0.3"
   peerDependencies:
-    svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
+    svelte: ^4.0.0 || ^5.0.0-next.0
+    typescript: ">=5.0.0"
   bin:
     svelte-check: bin/svelte-check
-  checksum: 10/1f825e3b2f3d636c2be1fd7eb5c7b37ffb90926c2d59e85be26996fc94da3145174f8cee39172d8f34c834561c8533685b45de940551ed52c812edcea55f9a1d
+  checksum: 10/30cf10b2e4487a35b604d7271997323ef47557b7785b82c7e494b8669757dcb681e0c4615a377f103ad56b6732437d948c5277d19960ceeb421dfc740e6863be
   languageName: node
   linkType: hard
 
-"svelte-hmr@npm:^0.16.0":
-  version: 0.16.0
-  resolution: "svelte-hmr@npm:0.16.0"
-  peerDependencies:
-    svelte: ^3.19.0 || ^4.0.0
-  checksum: 10/1f3e53f5ecd4b9d9b5683ec0abbf2caa2a4094ecaaa6d806e0f9c1dcfa5284b4854c02ffe656df7d1f915b5e4ef094ba426342807cdf1813241268e4df49abf1
-  languageName: node
-  linkType: hard
-
-"svelte-preprocess@npm:^5.1.3":
-  version: 5.1.4
-  resolution: "svelte-preprocess@npm:5.1.4"
-  dependencies:
-    "@types/pug": "npm:^2.0.6"
-    detect-indent: "npm:^6.1.0"
-    magic-string: "npm:^0.30.5"
-    sorcery: "npm:^0.11.0"
-    strip-indent: "npm:^3.0.0"
-  peerDependencies:
-    "@babel/core": ^7.10.2
-    coffeescript: ^2.5.1
-    less: ^3.11.3 || ^4.0.0
-    postcss: ^7 || ^8
-    postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
-    pug: ^3.0.0
-    sass: ^1.26.8
-    stylus: ^0.55.0
-    sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
-    svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
-    typescript: ">=3.9.5 || ^4.0.0 || ^5.0.0"
-  peerDependenciesMeta:
-    "@babel/core":
-      optional: true
-    coffeescript:
-      optional: true
-    less:
-      optional: true
-    postcss:
-      optional: true
-    postcss-load-config:
-      optional: true
-    pug:
-      optional: true
-    sass:
-      optional: true
-    stylus:
-      optional: true
-    sugarss:
-      optional: true
-    typescript:
-      optional: true
-  checksum: 10/e7a13479558e70b8d1e51fd53a97059e869f2be6080b752bfce9cbb12e84bd91a723fc671a2205c406724633bdd577fdb19e837ecface9689e9c9c6f222ccc72
-  languageName: node
-  linkType: hard
-
-"svelte2tsx@npm:~0.7.16":
-  version: 0.7.21
-  resolution: "svelte2tsx@npm:0.7.21"
+"svelte2tsx@npm:~0.7.33":
+  version: 0.7.36
+  resolution: "svelte2tsx@npm:0.7.36"
   dependencies:
     dedent-js: "npm:^1.0.1"
     pascal-case: "npm:^3.1.1"
   peerDependencies:
     svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
     typescript: ^4.9.4 || ^5.0.0
-  checksum: 10/f33c7d1f90cf882a03f608a33dc4979d0c0e59daeed3100128bd2406f48f3ce15ef025534584ff4b951419def21a356f1bb13a5e3d1cc9400aafb4d6f7323741
+  checksum: 10/2db2f9adbe344fffd3985f32f2909709fe016ca1a0885c330e3d08f7e7588890f78d6fd9ab3090d6aa83d937147fd700f1066ba8f49bc389347b41bc90e9ff74
   languageName: node
   linkType: hard
 
-"svelte@npm:^4.2.19, svelte@npm:^4.2.7":
-  version: 4.2.19
-  resolution: "svelte@npm:4.2.19"
+"svelte@npm:^5.0.0, svelte@npm:^5.27.0":
+  version: 5.27.0
+  resolution: "svelte@npm:5.27.0"
   dependencies:
-    "@ampproject/remapping": "npm:^2.2.1"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-    "@jridgewell/trace-mapping": "npm:^0.3.18"
-    "@types/estree": "npm:^1.0.1"
-    acorn: "npm:^8.9.0"
-    aria-query: "npm:^5.3.0"
-    axobject-query: "npm:^4.0.0"
-    code-red: "npm:^1.0.3"
-    css-tree: "npm:^2.3.1"
-    estree-walker: "npm:^3.0.3"
-    is-reference: "npm:^3.0.1"
+    "@ampproject/remapping": "npm:^2.3.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+    "@sveltejs/acorn-typescript": "npm:^1.0.5"
+    "@types/estree": "npm:^1.0.5"
+    acorn: "npm:^8.12.1"
+    aria-query: "npm:^5.3.1"
+    axobject-query: "npm:^4.1.0"
+    clsx: "npm:^2.1.1"
+    esm-env: "npm:^1.2.1"
+    esrap: "npm:^1.4.6"
+    is-reference: "npm:^3.0.3"
     locate-character: "npm:^3.0.0"
-    magic-string: "npm:^0.30.4"
-    periscopic: "npm:^3.1.0"
-  checksum: 10/6da99f43ccc0de5879925becc6e53b49fbaffffbd7c9bac018f24a9e76e6d95826ee9564daa205cb17037ffb776fe0d93a3098c148bfe84bc88c918937be6f23
+    magic-string: "npm:^0.30.11"
+    zimmerframe: "npm:^1.1.2"
+  checksum: 10/5f2b4825e45fa70e6dd38e8c29c937cbd02b4bc89b307f8a39425df15b4c36ce6503750c016afa18f691c54ac0d39b390561dbfeac0fbcff2a0a01229ee4abe5
   languageName: node
   linkType: hard
 
@@ -30884,6 +31314,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:4.1.1":
+  version: 4.1.1
+  resolution: "tailwindcss@npm:4.1.1"
+  checksum: 10/210d138a53a10ee2d3ae727652c03c4cf3e9ecf9d719c9b93f0f729786ca95ce8c34f3e2b221044ac1709b5bd24eb8b8b833db33876641818275e464a9c672e6
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:4.1.4, tailwindcss@npm:^4.0.0, tailwindcss@npm:^4.0.6, tailwindcss@npm:^4.0.9":
+  version: 4.1.4
+  resolution: "tailwindcss@npm:4.1.4"
+  checksum: 10/632510378ca0c73fb4ebd88d365480eab66a8f043cdefe3885afd45eaf71b9b1449ecbb17ead1b513de936cc98748fa5dc1759c8d91d8cd89887fecffa10648e
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^2.1.1, tapable@npm:^2.2.0, tapable@npm:^2.2.1":
   version: 2.2.1
   resolution: "tapable@npm:2.2.1"
@@ -31094,16 +31538,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-glob@npm:^0.2.9":
-  version: 0.2.9
-  resolution: "tiny-glob@npm:0.2.9"
-  dependencies:
-    globalyzer: "npm:0.1.0"
-    globrex: "npm:^0.1.2"
-  checksum: 10/5fb773747f6a8fcae4b8884642901fa7b884879695186c422eb24b2213dfe90645f34225ced586329b3080d850472ea938646ab1c8b3a2989f9fa038fef8eee3
-  languageName: node
-  linkType: hard
-
 "tinybench@npm:^2.5.1":
   version: 2.8.0
   resolution: "tinybench@npm:2.8.0"
@@ -31307,7 +31741,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.8.1, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1, tslib@npm:^2.6.2":
+"tslib@npm:2.8.1, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
   checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7
@@ -31522,7 +31956,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.0.0, typescript@npm:^5.0.3, typescript@npm:^5.6":
+"typescript@npm:^5.0.0, typescript@npm:^5.6, typescript@npm:^5.7.3, typescript@npm:^5.8.3":
   version: 5.8.3
   resolution: "typescript@npm:5.8.3"
   bin:
@@ -31542,7 +31976,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.0.0#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.0.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.6#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A^5.0.0#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.6#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.7.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.8.3#optional!builtin<compat/typescript>":
   version: 5.8.3
   resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=8c6c40"
   bin:
@@ -32608,15 +33042,70 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitefu@npm:^0.2.5":
-  version: 0.2.5
-  resolution: "vitefu@npm:0.2.5"
+"vite@npm:^6.2.0, vite@npm:^6.2.5, vite@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "vite@npm:6.3.0"
+  dependencies:
+    esbuild: "npm:^0.25.0"
+    fdir: "npm:^6.4.3"
+    fsevents: "npm:~2.3.3"
+    picomatch: "npm:^4.0.2"
+    postcss: "npm:^8.5.3"
+    rollup: "npm:^4.34.9"
+    tinyglobby: "npm:^0.2.12"
   peerDependencies:
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    "@types/node": ^18.0.0 || ^20.0.0 || >=22.0.0
+    jiti: ">=1.21.0"
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    sass-embedded: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.16.0
+    tsx: ^4.8.1
+    yaml: ^2.4.2
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    jiti:
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+    tsx:
+      optional: true
+    yaml:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 10/5ba5ed3f8718e0b46ebd91f18ab6bbc3cf06575cb8bc8316a4ee71780fcdb3e94b14ef40338d77235fd70e0b3d2df9db3436464645cbd6b098b9c8d8734676be
+  languageName: node
+  linkType: hard
+
+"vitefu@npm:^1.0.4":
+  version: 1.0.6
+  resolution: "vitefu@npm:1.0.6"
+  peerDependencies:
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
   peerDependenciesMeta:
     vite:
       optional: true
-  checksum: 10/65ef98208c1e26f78315b5f3e1b73f87189b34f1e6a8dc11f66a3263624dd27bd1ff1571a3a54ad5ef273336259f26545b6005bab6fc04a049d50aa4b829791d
+  checksum: 10/88211c17d93b56fbd48e1411e6f087178570d59d27b96610541414208dfbf629b8a9997735bf73a66c0f2862719ed69087759610b2c4ab0fafe7476f882b31e7
   languageName: node
   linkType: hard
 
@@ -33701,6 +34190,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zimmerframe@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "zimmerframe@npm:1.1.2"
+  checksum: 10/495e1b263b288d2c423bafb6897060856b86a32c21a3550ed2b4b30779051824b7cd3e606f46cbcdfd5b0d47660fe3ef418e9c2369d0f0709f0e6111c4d096d4
+  languageName: node
+  linkType: hard
+
 "zone.js@npm:~0.14.3":
   version: 0.14.7
   resolution: "zone.js@npm:0.14.7"