diff --git a/.changeset/config.json b/.changeset/config.json
index d2ba85f6bb..d3179effbd 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -7,5 +7,5 @@
 	"access": "public",
 	"baseBranch": "main",
 	"updateInternalDependencies": "patch",
-	"ignore": ["@gradio/spaces-test", "@gradio/cdn-test"]
+	"ignore": ["@self/spaces-test", "@self/cdn-test"]
 }
diff --git a/.changeset/plenty-cycles-chew.md b/.changeset/plenty-cycles-chew.md
new file mode 100644
index 0000000000..efbd9d6c3d
--- /dev/null
+++ b/.changeset/plenty-cycles-chew.md
@@ -0,0 +1,71 @@
+---
+"@gradio/multimodaltextbox": patch
+"@gradio/highlightedtext": patch
+"@gradio/annotatedimage": patch
+"@self/component-test": patch
+"@gradio/downloadbutton": patch
+"@gradio/simpledropdown": patch
+"@gradio/checkboxgroup": patch
+"@gradio/simpletextbox": patch
+"@gradio/statustracker": patch
+"@gradio/fileexplorer": patch
+"@gradio/uploadbutton": patch
+"@gradio/colorpicker": patch
+"@gradio/imageeditor": patch
+"@gradio/paramviewer": patch
+"@gradio/simpleimage": patch
+"@gradio/nativeplot": patch
+"@gradio/accordion": patch
+"@gradio/dataframe": patch
+"@self/storybook": patch
+"website": patch
+"@gradio/checkbox": patch
+"@gradio/datetime": patch
+"@gradio/dropdown": patch
+"@gradio/fallback": patch
+"@gradio/markdown": patch
+"@gradio/chatbot": patch
+"@gradio/dataset": patch
+"@gradio/gallery": patch
+"@gradio/model3d": patch
+"@gradio/preview": patch
+"@gradio/tabitem": patch
+"@gradio/textbox": patch
+"@gradio/tooltip": patch
+"@self/tootils": patch
+"@gradio/client": patch
+"@gradio/button": patch
+"@gradio/column": patch
+"@gradio/number": patch
+"@gradio/slider": patch
+"@gradio/upload": patch
+"@gradio/atoms": patch
+"@gradio/audio": patch
+"@self/build": patch
+"@gradio/group": patch
+"@gradio/icons": patch
+"@gradio/image": patch
+"@gradio/label": patch
+"@gradio/radio": patch
+"@gradio/state": patch
+"@gradio/theme": patch
+"@gradio/timer": patch
+"@gradio/utils": patch
+"@gradio/video": patch
+"@gradio/code": patch
+"@gradio/core": patch
+"@gradio/file": patch
+"@gradio/form": patch
+"@gradio/html": patch
+"@gradio/json": patch
+"@gradio/lite": patch
+"@gradio/plot": patch
+"@gradio/tabs": patch
+"@gradio/wasm": patch
+"@self/app": patch
+"@gradio/box": patch
+"@gradio/row": patch
+"@self/spa": patch
+---
+
+fix:fix exports and generate types
diff --git a/.config/.prettierignore b/.config/.prettierignore
index aeb550d7b8..f45be57177 100644
--- a/.config/.prettierignore
+++ b/.config/.prettierignore
@@ -5,7 +5,7 @@
 **/js/wasm/dist/**
 **/js/preview/dist/**
 **/client/js/dist/**
-**/js/lite/dist/**
+**/js/*/dist/**
 **/pnpm-lock.yaml
 **/js/plot/src/Plot.svelte
 **/.svelte-kit/**
diff --git a/.config/eslint.config.js b/.config/eslint.config.js
index 4cd91f66fe..b1fda3c0a5 100644
--- a/.config/eslint.config.js
+++ b/.config/eslint.config.js
@@ -63,7 +63,7 @@ const { browser, es2021, node } = globals;
 export default [
 	{
 		ignores: [
-			".svelte-kit/**/*",
+			"**/.svelte-kit/**/*",
 			"**/node_modules/**",
 			"**/dist/**",
 			"**/.config/*",
@@ -75,7 +75,8 @@ export default [
 			"**/_website/**/*",
 			"**/_spaces-test/**/*",
 			"**/preview/test/**/*",
-			"**/component-test/**/*"
+			"**/component-test/**/*",
+			"**/js/wasm/src/webworker/**/*"
 		]
 	},
 	{
diff --git a/.config/svelte.config.js b/.config/svelte.config.js
new file mode 100644
index 0000000000..be776c5610
--- /dev/null
+++ b/.config/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+	preprocess: vitePreprocess()
+};
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index bdb5ff7512..b1148aaacc 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -30,6 +30,7 @@ jobs:
           . venv/bin/activate
           pip install -U build hatch packaging>=23.2  # packaging>=23.2 is needed to build Lite due to https://github.com/pypa/hatch/issues/1381
           pnpm --filter @gradio/client --filter @gradio/lite --filter @gradio/preview build
+
       - name: create and publish versions
         id: changesets
         uses: changesets/action@aba318e9165b45b7948c60273e0b72fce0a64eb9 # @v1
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 47d8976c17..56c70b5797 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -309,7 +309,7 @@ Verify that you've used the correct filename of your gradio app, and that you're
 
 ---
 
-```ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL @gradio/spa@1.0.0 build:local: vite build --mode production:local --emptyOutDir "--emptyOutDir"```
+```ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL @self/spa@1.0.0 build:local: vite build --mode production:local --emptyOutDir "--emptyOutDir"```
 
 Delete `/node_modules` and `pnpm-lock.yaml`:
 
diff --git a/client/js/package.json b/client/js/package.json
index bcf8c6b7b0..a52da6d245 100644
--- a/client/js/package.json
+++ b/client/js/package.json
@@ -8,6 +8,7 @@
 	"license": "ISC",
 	"exports": {
 		".": {
+			"gradio": "./src/index.ts",
 			"import": "./dist/index.js"
 		},
 		"./package.json": "./package.json"
diff --git a/guides/cn/07_other-tutorials/creating-a-new-component.md b/guides/cn/07_other-tutorials/creating-a-new-component.md
index 647171907d..2a71b6d4ab 100644
--- a/guides/cn/07_other-tutorials/creating-a-new-component.md
+++ b/guides/cn/07_other-tutorials/creating-a-new-component.md
@@ -302,7 +302,7 @@ class TestColorPicker(unittest.TestCase):
 
 ```typescript
 import { test, describe, assert, afterEach } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 
 import ColorPicker from "./ColorPicker.svelte";
 import type { LoadingStatus } from "../StatusTracker/types";
diff --git a/js/_cdn-test/package.json b/js/_cdn-test/package.json
index 3401e2dffa..730e7719e7 100644
--- a/js/_cdn-test/package.json
+++ b/js/_cdn-test/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@gradio/cdn-test",
+	"name": "@self/cdn-test",
 	"private": true,
 	"version": "0.0.1",
 	"scripts": {
diff --git a/js/_spaces-test/CHANGELOG.md b/js/_spaces-test/CHANGELOG.md
index 1895157941..2759587045 100644
--- a/js/_spaces-test/CHANGELOG.md
+++ b/js/_spaces-test/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @gradio/spaces-test
+# @self/spaces-test
 
 ## 0.0.1
 
diff --git a/js/_spaces-test/package.json b/js/_spaces-test/package.json
index 17de8e6920..477f20ea50 100644
--- a/js/_spaces-test/package.json
+++ b/js/_spaces-test/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@gradio/spaces-test",
+	"name": "@self/spaces-test",
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
diff --git a/js/_website/vite.config.ts b/js/_website/vite.config.ts
index 14762ec0f6..92f11d6579 100644
--- a/js/_website/vite.config.ts
+++ b/js/_website/vite.config.ts
@@ -1,8 +1,11 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
-import { inject_component_loader } from "../build/dist/index.js";
+import { inject_component_loader } from "../build/out/index.js";
 
 //@ts-ignore
 export default defineConfig(({ mode }) => ({
-	plugins: [sveltekit(), inject_component_loader({ mode })]
+	plugins: [sveltekit(), inject_component_loader({ mode })],
+	resolve: {
+		conditions: ["gradio"]
+	}
 }));
diff --git a/js/accordion/package.json b/js/accordion/package.json
index 4b9a345006..b2533caaf8 100644
--- a/js/accordion/package.json
+++ b/js/accordion/package.json
@@ -5,7 +5,6 @@
 	"type": "module",
 	"author": "",
 	"license": "ISC",
-	"private": true,
 	"main_changeset": true,
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
@@ -13,11 +12,18 @@
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:0.6.0"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"repository": {
diff --git a/js/annotatedimage/package.json b/js/annotatedimage/package.json
index d31995b332..f41aa264e0 100644
--- a/js/annotatedimage/package.json
+++ b/js/annotatedimage/package.json
@@ -5,15 +5,22 @@
 	"type": "module",
 	"author": "",
 	"license": "ISC",
-	"private": true,
+	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/icons": "workspace:^",
diff --git a/js/app/CHANGELOG.md b/js/app/CHANGELOG.md
index a95f936749..03700607d0 100644
--- a/js/app/CHANGELOG.md
+++ b/js/app/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @gradio/app
+# @self/app
 
 ## 1.40.0
 
diff --git a/js/app/package.json b/js/app/package.json
index 88cea4d90d..cea9a0c72d 100644
--- a/js/app/package.json
+++ b/js/app/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@gradio/app",
+	"name": "@self/app",
 	"version": "1.40.0",
 	"private": true,
 	"scripts": {
diff --git a/js/atoms/package.json b/js/atoms/package.json
index 1d4f917032..208d6f8bb7 100644
--- a/js/atoms/package.json
+++ b/js/atoms/package.json
@@ -7,13 +7,27 @@
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
-		"@gradio/utils": "workspace:^",
-		"@gradio/icons": "workspace:^"
+		"@gradio/icons": "workspace:^",
+		"@gradio/utils": "workspace:^"
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"exports": {
+		".": {
+			"gradio": "./src/index.ts",
+			"svelte": "./dist/src/index.js",
+			"types": "./dist/src/index.d.ts"
+		},
+		"./package.json": "./package.json"
 	},
 	"main_changeset": true,
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
 		"directory": "js/atoms"
+	},
+	"scripts": {
+		"sv-pkg": "svelte-package --input=. --cwd=../../.config/"
 	}
 }
diff --git a/js/audio/audio.test.ts b/js/audio/audio.test.ts
index 810e837ca7..7a3dffbf1d 100644
--- a/js/audio/audio.test.ts
+++ b/js/audio/audio.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import Audio from "./";
 import type { LoadingStatus } from "@gradio/statustracker";
 import { setupi18n } from "../core/src/i18n";
diff --git a/js/audio/package.json b/js/audio/package.json
index 77a3c35cd8..92496d6568 100644
--- a/js/audio/package.json
+++ b/js/audio/package.json
@@ -28,11 +28,30 @@
 	"main_changeset": true,
 	"main": "index.ts",
 	"exports": {
-		".": "./index.ts",
-		"./example": "./Example.svelte",
-		"./shared": "./shared/index.ts",
-		"./base": "./static/StaticAudio.svelte",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		".": {
+			"gradio": "./index.ts",
+			"svelte": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
+		"./shared": {
+			"gradio": "./shared/index.ts",
+			"svelte": "./dist/shared/index.js",
+			"types": "./dist/shared/index.d.ts"
+		},
+		"./base": {
+			"gradio": "./static/StaticAudio.svelte",
+			"svelte": "./dist/static/StaticAudio.svelte",
+			"types": "./dist/static/StaticAudio.svelte.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/box/package.json b/js/box/package.json
index 752e9bb7e0..af082058c0 100644
--- a/js/box/package.json
+++ b/js/box/package.json
@@ -8,12 +8,19 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/build/CHANGELOG.md b/js/build/CHANGELOG.md
index baa06912d0..88290fcc2b 100644
--- a/js/build/CHANGELOG.md
+++ b/js/build/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @gradio/build
+# @self/build
 
 ## 0.0.2
 
diff --git a/js/build/README.md b/js/build/README.md
index 9a8109d646..f5f8e579e4 100644
--- a/js/build/README.md
+++ b/js/build/README.md
@@ -1,3 +1,3 @@
-# `@gradio/build`
+# `@self/build`
 
 Build utilities for the gradio frontend + lite.
diff --git a/js/build/dist/component_loader.js b/js/build/out/component_loader.js
similarity index 100%
rename from js/build/dist/component_loader.js
rename to js/build/out/component_loader.js
diff --git a/js/build/dist/index.js b/js/build/out/index.js
similarity index 98%
rename from js/build/dist/index.js
rename to js/build/out/index.js
index b35e27d088..b8edee8112 100644
--- a/js/build/dist/index.js
+++ b/js/build/out/index.js
@@ -124,9 +124,10 @@ function handle_ce_css() {
 var __filename = url.fileURLToPath(import.meta.url);
 var __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 function get_export_path(path, root, pkg_json) {
-  if (!pkg_json.exports) return void 0;
+  if (!pkg_json.exports) return false;
+  if (typeof pkg_json.exports[`${path}`] === "object") return true;
   const _path = join(root, "..", `${pkg_json.exports[`${path}`]}`);
-  return existsSync(_path) ? _path : void 0;
+  return existsSync(_path);
 }
 var ignore_list = [
   "tootils",
diff --git a/js/build/package.json b/js/build/package.json
index 66949026e9..679917ec8f 100644
--- a/js/build/package.json
+++ b/js/build/package.json
@@ -1,20 +1,23 @@
 {
-	"name": "@gradio/build",
+	"name": "@self/build",
 	"version": "0.0.2",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "dist/index.js",
+	"main": "out/index.js",
 	"private": "true",
 	"author": "",
 	"license": "ISC",
 	"scripts": {
-		"build": "esbuild src/index.ts --platform=node --format=esm --target=node18 --bundle --packages=external --outfile=dist/index.js"
+		"build": "esbuild src/index.ts --platform=node --format=esm --target=node18 --bundle --packages=external --outfile=out/index.js"
 	},
 	"dependencies": {
 		"@gradio/theme": "workspace:^",
 		"esbuild": "^0.21.0",
 		"svelte-i18n": "^3.6.0"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"main_changeset": true,
 	"repository": {
 		"type": "git",
diff --git a/js/build/src/index.ts b/js/build/src/index.ts
index 50e666eeb3..77a1055b3c 100644
--- a/js/build/src/index.ts
+++ b/js/build/src/index.ts
@@ -183,11 +183,12 @@ function get_export_path(
 	path: string,
 	root: string,
 	pkg_json: Record<string, any>
-): string | undefined {
-	if (!pkg_json.exports) return undefined;
+): boolean {
+	if (!pkg_json.exports) return false;
+	if ( typeof pkg_json.exports[`${path}`] === "object") return true;
 	const _path = join(root, "..", `${pkg_json.exports[`${path}`]}`);
 
-	return existsSync(_path) ? _path : undefined;
+	return existsSync(_path);
 }
 
 const ignore_list = [
diff --git a/js/button/package.json b/js/button/package.json
index 2ed5a3d422..5d3d2977a7 100644
--- a/js/button/package.json
+++ b/js/button/package.json
@@ -17,8 +17,15 @@
 	"main": "./Index.svelte",
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/chatbot/Chatbot.test.ts b/js/chatbot/Chatbot.test.ts
index 20644faf61..c001c716ff 100644
--- a/js/chatbot/Chatbot.test.ts
+++ b/js/chatbot/Chatbot.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach, vi } from "vitest";
-import { cleanup, render, fireEvent } from "@gradio/tootils";
+import { cleanup, render, fireEvent } from "@self/tootils";
 import Chatbot from "./Index.svelte";
 import type { LoadingStatus } from "@gradio/statustracker";
 import type { FileData } from "@gradio/client";
diff --git a/js/chatbot/package.json b/js/chatbot/package.json
index 12e239042f..b7bfa23de7 100644
--- a/js/chatbot/package.json
+++ b/js/chatbot/package.json
@@ -32,8 +32,15 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/checkbox/package.json b/js/checkbox/package.json
index ee2a955e85..2df362a6b5 100644
--- a/js/checkbox/package.json
+++ b/js/checkbox/package.json
@@ -9,9 +9,17 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		}
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
@@ -21,6 +29,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/checkboxgroup/checkboxgroup.test.ts b/js/checkboxgroup/checkboxgroup.test.ts
index 98932629ce..2d2ba644c9 100644
--- a/js/checkboxgroup/checkboxgroup.test.ts
+++ b/js/checkboxgroup/checkboxgroup.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach, vi } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import event from "@testing-library/user-event";
 import { setupi18n } from "../core/src/i18n";
 
diff --git a/js/checkboxgroup/package.json b/js/checkboxgroup/package.json
index 88934f1d8f..d237ff3886 100644
--- a/js/checkboxgroup/package.json
+++ b/js/checkboxgroup/package.json
@@ -9,8 +9,16 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -21,6 +29,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/code/package.json b/js/code/package.json
index 63372625e1..cfac02f727 100644
--- a/js/code/package.json
+++ b/js/code/package.json
@@ -37,13 +37,24 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/colorpicker/package.json b/js/colorpicker/package.json
index 01450794cb..4750103f30 100644
--- a/js/colorpicker/package.json
+++ b/js/colorpicker/package.json
@@ -9,8 +9,16 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -21,6 +29,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/column/package.json b/js/column/package.json
index 1879676b8e..f08fa9f890 100644
--- a/js/column/package.json
+++ b/js/column/package.json
@@ -9,7 +9,11 @@
 	"private": false,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"devDependencies": {
@@ -17,6 +21,9 @@
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/component-test/CHANGELOG.md b/js/component-test/CHANGELOG.md
index 99af666f37..2fe2066c08 100644
--- a/js/component-test/CHANGELOG.md
+++ b/js/component-test/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @gradio/component-test
+# @self/component-test
 
 ## 0.1.0
 
diff --git a/js/component-test/package.json b/js/component-test/package.json
index df63f429aa..2a9f7c4a2e 100644
--- a/js/component-test/package.json
+++ b/js/component-test/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@gradio/component-test",
+	"name": "@self/component-test",
 	"version": "0.1.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -9,7 +9,7 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
 	},
 	"devDependencies": {
-		"@gradio/build": "workspace:^",
+		"@self/build": "workspace:^",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0"
 	},
diff --git a/js/component-test/src/routes/+layout.svelte b/js/component-test/src/routes/+layout.svelte
index 8ff6efc84f..1a10344f9c 100644
--- a/js/component-test/src/routes/+layout.svelte
+++ b/js/component-test/src/routes/+layout.svelte
@@ -1,6 +1,14 @@
 <script>
 	import Header from "./Header.svelte";
 	import "../app.css";
+	import "../theme.css";
+
+	import "../../../theme/src/reset.css";
+	import "../../../theme/src/global.css";
+
+	import "../../../theme/src/pollen.css";
+	// import "../theme/src/tokens.css";
+	import "../../../theme/src/typography.css";
 </script>
 
 <div class="app">
diff --git a/js/component-test/src/routes/[...all]/+page.ts b/js/component-test/src/routes/[...all]/+page.ts
index 20418a40f8..13776fd576 100644
--- a/js/component-test/src/routes/[...all]/+page.ts
+++ b/js/component-test/src/routes/[...all]/+page.ts
@@ -1,75 +1,40 @@
 import config from "$lib/component_json";
 
-// @ts-ignore
 const comps = {
-	// @ts-ignore
 	accordion: () => import("@gradio/accordion"),
 	audio: () => import("@gradio/audio"),
-	// @ts-ignore
 	button: () => import("@gradio/button"),
-	// @ts-ignore
 	chatbot: () => import("@gradio/chatbot"),
-	// @ts-ignore
 	checkbox: () => import("@gradio/checkbox"),
-	// @ts-ignore
 	checkboxgroup: () => import("@gradio/checkboxgroup"),
-	// @ts-ignore
 	code: () => import("@gradio/code"),
-	// @ts-ignore
 	colorpicker: () => import("@gradio/colorpicker"),
-	// @ts-ignore
 	dataframe: () => import("@gradio/dataframe"),
-	// @ts-ignore
 	dataset: () => import("@gradio/dataset"),
-	// @ts-ignore
 	datetime: () => import("@gradio/datetime"),
-	// @ts-ignore
 	downloadbutton: () => import("@gradio/downloadbutton"),
-	// @ts-ignore
 	dropdown: () => import("@gradio/dropdown"),
-	// @ts-ignore
 	file: () => import("@gradio/file"),
-	// @ts-ignore
 	gallery: () => import("@gradio/gallery"),
-	// @ts-ignore
 	highlightedtext: () => import("@gradio/highlightedtext"),
-	// @ts-ignore
 	html: () => import("@gradio/html"),
-	// @ts-ignore
 	image: () => import("@gradio/image"),
-	// @ts-ignore
 	imageeditor: () => import("@gradio/imageeditor"),
-	// @ts-ignore
 	json: () => import("@gradio/json"),
-	// @ts-ignore
 	label: () => import("@gradio/label"),
-	// @ts-ignore
 	markdown: () => import("@gradio/markdown"),
-	// @ts-ignore
 	model3d: () => import("@gradio/model3d"),
-	// @ts-ignore
 	multimodaltextbox: () => import("@gradio/multimodaltextbox"),
-	// @ts-ignore
 	number: () => import("@gradio/number"),
-	// @ts-ignore
 	paramviewer: () => import("@gradio/paramviewer"),
-	// @ts-ignore
 	plot: () => import("@gradio/plot"),
-	// @ts-ignore
 	radio: () => import("@gradio/radio"),
-	// @ts-ignore
 	simpleimage: () => import("@gradio/simpleimage"),
-	// @ts-ignore
 	slider: () => import("@gradio/slider"),
-	// @ts-ignore
 	state: () => import("@gradio/state"),
-	// @ts-ignore
 	textbox: () => import("@gradio/textbox"),
-	// @ts-ignore
 	timer: () => import("@gradio/timer"),
-	// @ts-ignore
 	uploadbutton: () => import("@gradio/uploadbutton"),
-	// @ts-ignore
 	video: () => import("@gradio/video")
 };
 
@@ -86,10 +51,8 @@ export const load: PageLoad = async ({ url }) => {
 
 	const comp =
 		route_name in comps
-			? // @ts-ignore
-				await comps[route_name]()
-			: // @ts-ignore
-				await import("@gradio/label");
+			? await comps[route_name]()
+			: await import("@gradio/label");
 
 	return {
 		component: comp,
diff --git a/js/component-test/vite.config.js b/js/component-test/vite.config.js
index f90a31792f..d8dba7a1c9 100644
--- a/js/component-test/vite.config.js
+++ b/js/component-test/vite.config.js
@@ -8,8 +8,11 @@ import {
 	inject_ejs,
 	mock_modules,
 	resolve_svelte
-} from "@gradio/build";
+} from "@self/build";
 
 export default defineConfig({
-	plugins: [sveltekit(), inject_component_loader({ mode: "development" })]
+	plugins: [sveltekit()],
+	resolve: {
+		conditions: ["gradio"]
+	}
 });
diff --git a/js/core/package.json b/js/core/package.json
index 125f356fbd..010e3f74b7 100644
--- a/js/core/package.json
+++ b/js/core/package.json
@@ -66,13 +66,24 @@
 	"main_changeset": true,
 	"exports": {
 		"./blocks": {
-			"svelte": "./src/Blocks.svelte"
+			"gradio": "./src/Blocks.svelte",
+			"svelte": "./dist/src/Blocks.svelte",
+			"types": "./dist/src/Blocks.svelte.d.ts"
 		},
 		"./login": {
-			"svelte": "./src/Login.svelte"
+			"gradio": "./src/Login.svelte",
+			"svelte": "./dist/src/Login.svelte",
+			"types": "./dist/src/Login.svelte.d.ts"
 		},
 		"./package.json": "./package.json",
-		".": "./index.ts"
+		".": {
+			"gradio": "./index.ts",
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"main": "./index.ts",
 	"repository": {
diff --git a/js/core/src/Render.svelte b/js/core/src/Render.svelte
index 73110058a7..f79e619cd5 100644
--- a/js/core/src/Render.svelte
+++ b/js/core/src/Render.svelte
@@ -4,6 +4,7 @@
 	import type { ComponentMeta, ThemeMode } from "./types";
 	import type { Client } from "@gradio/client";
 	import RenderComponent from "./RenderComponent.svelte";
+	import { load_component } from "virtual:component-loader";
 
 	export let root: string;
 
@@ -66,7 +67,8 @@
 		autoscroll,
 		max_file_size,
 		formatter,
-		client
+		client,
+		load_component
 	);
 </script>
 
diff --git a/js/core/src/api_docs/ApiDocs.svelte b/js/core/src/api_docs/ApiDocs.svelte
index 81c3a69717..6999b71650 100644
--- a/js/core/src/api_docs/ApiDocs.svelte
+++ b/js/core/src/api_docs/ApiDocs.svelte
@@ -7,7 +7,7 @@
 	import type { Payload } from "../types";
 
 	import ApiBanner from "./ApiBanner.svelte";
-	import Button from "../../../button/shared/Button.svelte";
+	import { BaseButton as Button } from "@gradio/button";
 	import ParametersSnippet from "./ParametersSnippet.svelte";
 	import InstallSnippet from "./InstallSnippet.svelte";
 	import CodeSnippet from "./CodeSnippet.svelte";
diff --git a/js/core/src/api_docs/ApiRecorder.svelte b/js/core/src/api_docs/ApiRecorder.svelte
index 5798ce3d5a..e4bb935b6a 100644
--- a/js/core/src/api_docs/ApiRecorder.svelte
+++ b/js/core/src/api_docs/ApiRecorder.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Payload, Dependency } from "../types";
-	import Button from "../../../button/shared/Button.svelte";
+	import { BaseButton as Button } from "@gradio/button";
 
 	export let api_calls: Payload[] = [];
 	export let dependencies: Dependency[];
diff --git a/js/dataframe/package.json b/js/dataframe/package.json
index 675bdc361e..d4b3855b57 100644
--- a/js/dataframe/package.json
+++ b/js/dataframe/package.json
@@ -26,10 +26,21 @@
 		"marked": "^12.0.0"
 	},
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
diff --git a/js/dataset/package.json b/js/dataset/package.json
index c833ccfcd6..1746cbe690 100644
--- a/js/dataset/package.json
+++ b/js/dataset/package.json
@@ -8,7 +8,11 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -21,6 +25,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/datetime/package.json b/js/datetime/package.json
index 494cfe627c..8ff35494c4 100644
--- a/js/datetime/package.json
+++ b/js/datetime/package.json
@@ -9,8 +9,16 @@
 	"main_changeset": true,
 	"main": "Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -19,6 +27,9 @@
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
diff --git a/js/downloadbutton/package.json b/js/downloadbutton/package.json
index 0fecae4b9a..8ccd1f5118 100644
--- a/js/downloadbutton/package.json
+++ b/js/downloadbutton/package.json
@@ -17,9 +17,16 @@
 	"main": "./Index.svelte",
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/dropdown/dropdown.test.ts b/js/dropdown/dropdown.test.ts
index 8262f2cfdf..5f68733a32 100644
--- a/js/dropdown/dropdown.test.ts
+++ b/js/dropdown/dropdown.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach, vi } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import event from "@testing-library/user-event";
 import { setupi18n } from "../core/src/i18n";
 
diff --git a/js/dropdown/package.json b/js/dropdown/package.json
index 532252e4bc..b267a21a93 100644
--- a/js/dropdown/package.json
+++ b/js/dropdown/package.json
@@ -8,8 +8,16 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -21,6 +29,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/fallback/package.json b/js/fallback/package.json
index 6676a5aabf..fe24a6f911 100644
--- a/js/fallback/package.json
+++ b/js/fallback/package.json
@@ -8,8 +8,16 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -21,6 +29,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/file/package.json b/js/file/package.json
index 9da59d06a3..4de127c982 100644
--- a/js/file/package.json
+++ b/js/file/package.json
@@ -21,10 +21,21 @@
 	"main": "./Index.svelte",
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/fileexplorer/package.json b/js/fileexplorer/package.json
index f58d844a39..67d5ffc35b 100644
--- a/js/fileexplorer/package.json
+++ b/js/fileexplorer/package.json
@@ -5,7 +5,6 @@
 	"type": "module",
 	"author": "",
 	"license": "ISC",
-	"private": true,
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/checkbox": "workspace:^",
@@ -22,10 +21,21 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/form/package.json b/js/form/package.json
index 26d011ec64..788b3eb99b 100644
--- a/js/form/package.json
+++ b/js/form/package.json
@@ -17,9 +17,16 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/gallery/Gallery.test.ts b/js/gallery/Gallery.test.ts
index e94eaf2d1c..777f21c444 100644
--- a/js/gallery/Gallery.test.ts
+++ b/js/gallery/Gallery.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach, vi } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import { setupi18n } from "../core/src/i18n";
 
 import Gallery from "./Index.svelte";
diff --git a/js/gallery/package.json b/js/gallery/package.json
index 113e1b6394..1e5e126517 100644
--- a/js/gallery/package.json
+++ b/js/gallery/package.json
@@ -23,9 +23,20 @@
 	"main": "./Index.svelte",
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json",
-		"./base": "./shared/Gallery.svelte"
+		"./base": {
+			"gradio": "./shared/Gallery.svelte",
+			"svelte": "./dist/shared/Gallery.svelte",
+			"types": "./dist/shared/Gallery.svelte.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/group/Group.test.ts b/js/group/Group.test.ts
index 2afbe1c970..96a14f21c7 100644
--- a/js/group/Group.test.ts
+++ b/js/group/Group.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach, vi } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 
 import Group from "./Index.svelte";
 
diff --git a/js/group/package.json b/js/group/package.json
index 3cd5b207f4..7e107c9651 100644
--- a/js/group/package.json
+++ b/js/group/package.json
@@ -8,12 +8,19 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/highlightedtext/highlightedtext.test.ts b/js/highlightedtext/highlightedtext.test.ts
index 56d4e08bbc..3d7f19dec3 100644
--- a/js/highlightedtext/highlightedtext.test.ts
+++ b/js/highlightedtext/highlightedtext.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach } from "vitest";
-import { cleanup, fireEvent, render } from "@gradio/tootils";
+import { cleanup, fireEvent, render } from "@self/tootils";
 import { setupi18n } from "../core/src/i18n";
 
 import HighlightedText from "./Index.svelte";
diff --git a/js/highlightedtext/package.json b/js/highlightedtext/package.json
index 3eec588a29..88d9688c50 100644
--- a/js/highlightedtext/package.json
+++ b/js/highlightedtext/package.json
@@ -19,9 +19,16 @@
 	},
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/html/package.json b/js/html/package.json
index 3a013ca13c..8d96b29423 100644
--- a/js/html/package.json
+++ b/js/html/package.json
@@ -17,10 +17,25 @@
 		"@gradio/preview": "workspace:^"
 	},
 	"exports": {
-		".": "./Index.svelte",
-		"./base": "./Index.svelte",
-		"./example": "./Example.svelte",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
+		"./base": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/icons/package.json b/js/icons/package.json
index 26c7b1e7d9..7b642d9a31 100644
--- a/js/icons/package.json
+++ b/js/icons/package.json
@@ -12,5 +12,16 @@
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
 		"directory": "js/icons"
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"exports": {
+		".": {
+			"gradio": "./src/index.ts",
+			"svelte": "./dist/src/index.js",
+			"types": "./dist/src/index.d.ts"
+		},
+		"./package.json": "./package.json"
 	}
 }
diff --git a/js/image/Image.test.ts b/js/image/Image.test.ts
index 2920f5d172..d4b6e32884 100644
--- a/js/image/Image.test.ts
+++ b/js/image/Image.test.ts
@@ -7,7 +7,7 @@ import {
 	beforeAll,
 	beforeEach
 } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import { setupi18n } from "../core/src/i18n";
 
 import Image from "./Index.svelte";
diff --git a/js/image/package.json b/js/image/package.json
index 1eb39dac65..eda3d9c2e1 100644
--- a/js/image/package.json
+++ b/js/image/package.json
@@ -24,11 +24,30 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./shared": "./shared/index.ts",
-		"./example": "./Example.svelte",
-		"./base": "./shared/ImagePreview.svelte",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
+		"./base": {
+			"gradio": "./shared/ImagePreview.svelte",
+			"svelte": "./dist/shared/ImagePreview.svelte",
+			"types": "./dist/shared/ImagePreview.svelte.d.ts"
+		},
+		"./shared": {
+			"gradio": "./shared/index.ts",
+			"svelte": "./dist/shared/index.js",
+			"types": "./dist/shared/index.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/imageeditor/package.json b/js/imageeditor/package.json
index 81c6d15245..dff3a7b843 100644
--- a/js/imageeditor/package.json
+++ b/js/imageeditor/package.json
@@ -25,10 +25,21 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/imageeditor/shared/utils/pixi.ts b/js/imageeditor/shared/utils/pixi.ts
index 3c628386e4..aab138d993 100644
--- a/js/imageeditor/shared/utils/pixi.ts
+++ b/js/imageeditor/shared/utils/pixi.ts
@@ -11,7 +11,6 @@ import {
 } from "pixi.js";
 
 import { type LayerScene } from "../layers/utils";
-import { background } from "@storybook/theming";
 
 /**
  * interface holding references to pixi app components
diff --git a/js/json/package.json b/js/json/package.json
index b0512100a7..4cd4a479ed 100644
--- a/js/json/package.json
+++ b/js/json/package.json
@@ -18,9 +18,16 @@
 	"main": "./Index.svelte",
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/jsx.d.ts b/js/jsx.d.ts
index 803c0429b8..5297e082a1 100644
--- a/js/jsx.d.ts
+++ b/js/jsx.d.ts
@@ -4,3 +4,6 @@ declare namespace svelteHTML {
 		mozdirectory?: boolean | string;
 	}
 }
+declare module "@lezer/highlight";
+declare module "dequal/lite";
+declare module "dequal";
diff --git a/js/label/package.json b/js/label/package.json
index f5d1ae9e60..388f52a45b 100644
--- a/js/label/package.json
+++ b/js/label/package.json
@@ -18,9 +18,16 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/lite/package.json b/js/lite/package.json
index 2088abf858..7854007e7e 100644
--- a/js/lite/package.json
+++ b/js/lite/package.json
@@ -19,15 +19,15 @@
 		"dev": "run-p dev:*",
 		"dev:self": "vite --port 9876 --mode development",
 		"dev:worker": "pnpm --filter @gradio/wasm dev",
-		"test:browser": "GRADIO_E2E_TEST_LITE=1 pnpm --filter @gradio/spa test:browser",
-		"test:browser:dev": "GRADIO_E2E_TEST_LITE=1 pnpm --filter @gradio/spa test:browser:dev"
+		"test:browser": "GRADIO_E2E_TEST_LITE=1 pnpm --filter @self/spa test:browser",
+		"test:browser:dev": "GRADIO_E2E_TEST_LITE=1 pnpm --filter @self/spa test:browser:dev"
 	},
 	"devDependencies": {
 		"gradio": "workspace:^",
 		"@gradio/atoms": "workspace:^",
-		"@gradio/build": "workspace:^",
+		"@self/build": "workspace:^",
 		"@gradio/core": "workspace:^",
-		"@gradio/spa": "workspace:^",
+		"@self/spa": "workspace:^",
 		"@gradio/theme": "workspace:^",
 		"@gradio/wasm": "workspace:^"
 	}
diff --git a/js/lite/src/LiteIndex.svelte b/js/lite/src/LiteIndex.svelte
index 06ad2f2e32..87b0fcb8f9 100644
--- a/js/lite/src/LiteIndex.svelte
+++ b/js/lite/src/LiteIndex.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import "@gradio/theme/src/reset.css";
-	import "@gradio/theme/src/global.css";
-	import "@gradio/theme/src/pollen.css";
-	import "@gradio/theme/src/typography.css";
+	import "@gradio/theme/reset.css";
+	import "@gradio/theme/global.css";
+	import "@gradio/theme/pollen.css";
+	import "@gradio/theme/typography.css";
 
 	import { onDestroy, SvelteComponent } from "svelte";
-	import Index from "@gradio/spa";
+	import Index from "@self/spa";
 	import Playground from "./Playground.svelte";
 	import ErrorDisplay from "./ErrorDisplay.svelte";
 	import type { ThemeMode } from "@gradio/core";
diff --git a/js/lite/vite.config.ts b/js/lite/vite.config.ts
index 7ee9c2a3b2..0661a42eb9 100644
--- a/js/lite/vite.config.ts
+++ b/js/lite/vite.config.ts
@@ -51,7 +51,7 @@ import {
 	handle_ce_css,
 	inject_component_loader,
 	mock_modules
-} from "@gradio/build";
+} from "@self/build";
 
 const GRADIO_VERSION = version_raw || "asd_stub_asd";
 const CDN_BASE = "https://gradio.s3-us-west-2.amazonaws.com";
diff --git a/js/markdown/Markdown.test.ts b/js/markdown/Markdown.test.ts
index 69c18c70ab..461c7143cc 100644
--- a/js/markdown/Markdown.test.ts
+++ b/js/markdown/Markdown.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 
 import Markdown from "./Index.svelte";
 import type { LoadingStatus } from "@gradio/statustracker";
diff --git a/js/markdown/package.json b/js/markdown/package.json
index 2340a492fd..ade45fd39f 100644
--- a/js/markdown/package.json
+++ b/js/markdown/package.json
@@ -9,8 +9,16 @@
 	"main_changeset": true,
 	"main": "Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -32,6 +40,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/model3D/package.json b/js/model3D/package.json
index 95cd40b1c9..49f3fc0704 100644
--- a/js/model3D/package.json
+++ b/js/model3D/package.json
@@ -26,10 +26,21 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/multimodaltextbox/MultimodalTextbox.test.ts b/js/multimodaltextbox/MultimodalTextbox.test.ts
index f2f8b33c1d..d269f729ce 100644
--- a/js/multimodaltextbox/MultimodalTextbox.test.ts
+++ b/js/multimodaltextbox/MultimodalTextbox.test.ts
@@ -1,6 +1,5 @@
 import { test, describe, assert, afterEach } from "vitest";
-import { spy } from "tinyspy";
-import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import event from "@testing-library/user-event";
 
 import MultimodalTextbox from "./Index.svelte";
diff --git a/js/multimodaltextbox/package.json b/js/multimodaltextbox/package.json
index 6217adaefe..fb6a5027ac 100644
--- a/js/multimodaltextbox/package.json
+++ b/js/multimodaltextbox/package.json
@@ -9,8 +9,16 @@
 	"main_changeset": true,
 	"main": "Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -26,6 +34,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/nativeplot/package.json b/js/nativeplot/package.json
index 5756611b47..2ab78b7a39 100644
--- a/js/nativeplot/package.json
+++ b/js/nativeplot/package.json
@@ -8,8 +8,16 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -25,6 +33,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/number/package.json b/js/number/package.json
index c66f4f7d49..b51623cb0c 100644
--- a/js/number/package.json
+++ b/js/number/package.json
@@ -8,8 +8,16 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -20,6 +28,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/paramviewer/package.json b/js/paramviewer/package.json
index ba903e2100..e503ace21e 100644
--- a/js/paramviewer/package.json
+++ b/js/paramviewer/package.json
@@ -8,8 +8,16 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -22,6 +30,9 @@
 		"@types/prismjs": "^1.26.3",
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/plot/package.json b/js/plot/package.json
index ad3e51903a..7781a9c37d 100644
--- a/js/plot/package.json
+++ b/js/plot/package.json
@@ -24,9 +24,20 @@
 	"main": "./Index.svelte",
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
 		"./package.json": "./package.json",
-		"./base": "./shared/Plot.svelte"
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./base": {
+			"gradio": "./shared/Plot.svelte",
+			"svelte": "./dist/shared/Plot.svelte",
+			"types": "./dist/shared/Plot.svelte.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/preview/package.json b/js/preview/package.json
index 855cdf6f14..3d304c8403 100644
--- a/js/preview/package.json
+++ b/js/preview/package.json
@@ -37,5 +37,16 @@
 		"vite": "^5.2.9",
 		"which": "4.0.0",
 		"yootils": "^0.3.1"
+	},
+	"optionalDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"exports": {
+		".": {
+			"gradio": "./src/index.ts",
+			"svelte": "./dist/src/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./package.json": "./package.json"
 	}
 }
diff --git a/js/preview/src/build.ts b/js/preview/src/build.ts
index 43a0061109..9b6a1a765d 100644
--- a/js/preview/src/build.ts
+++ b/js/preview/src/build.ts
@@ -72,6 +72,9 @@ export async function make_build({
 							...plugins(component_config),
 							make_gradio_plugin({ mode: "build", svelte_dir })
 						],
+						resolve: {
+							conditions: ["gradio"]
+						},
 						build: {
 							target: component_config.build.target,
 							emptyOutDir: true,
diff --git a/js/preview/src/dev.ts b/js/preview/src/dev.ts
index 508594381b..42b1fef663 100644
--- a/js/preview/src/dev.ts
+++ b/js/preview/src/dev.ts
@@ -57,6 +57,9 @@ export async function create_server({
 					allow: [root_dir, component_dir]
 				}
 			},
+			resolve: {
+				conditions: ["gradio"]
+			},
 			build: {
 				target: config.build.target
 			},
diff --git a/js/radio/Radio.test.ts b/js/radio/Radio.test.ts
index 27e52c8e7e..f88daa58cb 100644
--- a/js/radio/Radio.test.ts
+++ b/js/radio/Radio.test.ts
@@ -1,6 +1,6 @@
 import { test, describe, assert, afterEach } from "vitest";
 
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import event from "@testing-library/user-event";
 
 import Radio from "./Index.svelte";
diff --git a/js/radio/package.json b/js/radio/package.json
index 64b7160c0e..4ff28f9b36 100644
--- a/js/radio/package.json
+++ b/js/radio/package.json
@@ -9,8 +9,16 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -21,6 +29,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/row/package.json b/js/row/package.json
index 4803f995ea..4717b65162 100644
--- a/js/row/package.json
+++ b/js/row/package.json
@@ -13,9 +13,16 @@
 		"@gradio/utils": "workspace:^"
 	},
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/simpledropdown/package.json b/js/simpledropdown/package.json
index 6aaf356109..731e2b05ae 100644
--- a/js/simpledropdown/package.json
+++ b/js/simpledropdown/package.json
@@ -8,8 +8,16 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -21,6 +29,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/simpleimage/package.json b/js/simpleimage/package.json
index 8edbb7fdb4..e4560bf82c 100644
--- a/js/simpleimage/package.json
+++ b/js/simpleimage/package.json
@@ -24,10 +24,25 @@
 	"main_changeset": true,
 	"main": "./Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
-		"./base": "./shared/ImagePreview.svelte",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
+		"./base": {
+			"gradio": "./shared/ImagePreview.svelte",
+			"svelte": "./dist/shared/ImagePreview.svelte",
+			"types": "./dist/shared/ImagePreview.svelte.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/simpletextbox/package.json b/js/simpletextbox/package.json
index 19f5d7abdc..aa9dff9a21 100644
--- a/js/simpletextbox/package.json
+++ b/js/simpletextbox/package.json
@@ -8,8 +8,16 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -21,6 +29,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/slider/package.json b/js/slider/package.json
index 8e7423fc2d..25db399e75 100644
--- a/js/slider/package.json
+++ b/js/slider/package.json
@@ -8,8 +8,16 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -20,6 +28,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/spa/CHANGELOG.md b/js/spa/CHANGELOG.md
index 7ed135fe9a..2fe4378056 100644
--- a/js/spa/CHANGELOG.md
+++ b/js/spa/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @gradio/spa
+# @self/spa
 
 ## 0.0.2
 
diff --git a/js/spa/package.json b/js/spa/package.json
index 8632b4d6b0..7d0d273c0f 100644
--- a/js/spa/package.json
+++ b/js/spa/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@gradio/spa",
+	"name": "@self/spa",
 	"version": "0.0.2",
 	"private": true,
 	"type": "module",
@@ -24,7 +24,7 @@
 		"build:css": "pollen -c pollen.config.cjs -o src/pollen-dev.css"
 	},
 	"devDependencies": {
-		"@gradio/build": "workspace:^",
+		"@self/build": "workspace:^",
 		"@gradio/client": "workspace:^",
 		"@gradio/core": "workspace:^",
 		"@gradio/theme": "workspace:^",
@@ -36,6 +36,9 @@
 	"msw": {
 		"workerDirectory": "public"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"main_changeset": true,
 	"main": "./src/Index.svelte",
 	"repository": {
diff --git a/js/spa/src/main.ts b/js/spa/src/main.ts
index 4197ab9426..2bca3438fe 100644
--- a/js/spa/src/main.ts
+++ b/js/spa/src/main.ts
@@ -1,7 +1,7 @@
-import "@gradio/theme/src/reset.css";
-import "@gradio/theme/src/global.css";
-import "@gradio/theme/src/pollen.css";
-import "@gradio/theme/src/typography.css";
+import "@gradio/theme/reset.css";
+import "@gradio/theme/global.css";
+import "@gradio/theme/pollen.css";
+import "@gradio/theme/typography.css";
 import { Client } from "@gradio/client";
 import { mount_css } from "@gradio/core";
 import type Index from "./Index.svelte";
diff --git a/js/spa/test/audio_component_events.spec.ts b/js/spa/test/audio_component_events.spec.ts
index 2934e6893a..09bf852b76 100644
--- a/js/spa/test/audio_component_events.spec.ts
+++ b/js/spa/test/audio_component_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, drag_and_drop_file } from "@gradio/tootils";
+import { test, expect, drag_and_drop_file } from "@self/tootils";
 import { chromium } from "playwright";
 
 test("Audio events are dispatched correctly. File downloading works and file has correct name.", async ({
diff --git a/js/spa/test/audio_debugger.spec.ts b/js/spa/test/audio_debugger.spec.ts
index 682dcf7492..f367980e34 100644
--- a/js/spa/test/audio_debugger.spec.ts
+++ b/js/spa/test/audio_debugger.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 import { chromium } from "playwright";
 // we cannot currently test the waveform canvas with playwright (https://github.com/microsoft/playwright/issues/23964)
 // so this test covers the interactive elements around the waveform canvas
diff --git a/js/spa/test/blocks_chained_events.spec.ts b/js/spa/test/blocks_chained_events.spec.ts
index 9ba42ef166..135b600fb0 100644
--- a/js/spa/test/blocks_chained_events.spec.ts
+++ b/js/spa/test/blocks_chained_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test(".success should not run if function fails", async ({ page }) => {
 	const textbox = page.getByLabel("Result");
diff --git a/js/spa/test/blocks_essay.spec.ts b/js/spa/test/blocks_essay.spec.ts
index 1dc3ded0d6..bf555350bb 100644
--- a/js/spa/test/blocks_essay.spec.ts
+++ b/js/spa/test/blocks_essay.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("updates frontend correctly", async ({ page }) => {
 	const short_btn = await page.getByLabel("short");
diff --git a/js/spa/test/blocks_flashcards.spec.ts b/js/spa/test/blocks_flashcards.spec.ts
index 12f1f5fa96..bbb4a38fed 100644
--- a/js/spa/test/blocks_flashcards.spec.ts
+++ b/js/spa/test/blocks_flashcards.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("shows the results tab when results > 0", async ({ page }) => {
 	await page.getByRole("button", { name: "Start Practice" }).click();
diff --git a/js/spa/test/blocks_flipper.spec.ts b/js/spa/test/blocks_flipper.spec.ts
index 672277683f..fb5e15e9b4 100644
--- a/js/spa/test/blocks_flipper.spec.ts
+++ b/js/spa/test/blocks_flipper.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("accordion stays open when interacting with the slider", async ({
 	page
diff --git a/js/spa/test/blocks_inputs.spec.ts b/js/spa/test/blocks_inputs.spec.ts
index 13ca196b41..9d61ee2dfa 100644
--- a/js/spa/test/blocks_inputs.spec.ts
+++ b/js/spa/test/blocks_inputs.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("renders the correct elements", async ({ page }) => {
 	const textboxes = await page.getByLabel("Input");
diff --git a/js/spa/test/blocks_page_load.spec.ts b/js/spa/test/blocks_page_load.spec.ts
index 8bd3429a26..2c3b8aff2d 100644
--- a/js/spa/test/blocks_page_load.spec.ts
+++ b/js/spa/test/blocks_page_load.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("renders the correct elements", async ({ page }) => {
 	const textbox = await page.getByLabel("Name");
diff --git a/js/spa/test/blocks_xray.spec.ts b/js/spa/test/blocks_xray.spec.ts
index 27b1626c50..433588894d 100644
--- a/js/spa/test/blocks_xray.spec.ts
+++ b/js/spa/test/blocks_xray.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("renders the correct elements", async ({ page }) => {
 	const description = await page.getByTestId("markdown");
diff --git a/js/spa/test/cancel_events.spec.ts b/js/spa/test/cancel_events.spec.ts
index b7677fb3c5..5044816b8a 100644
--- a/js/spa/test/cancel_events.spec.ts
+++ b/js/spa/test/cancel_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 import { readFileSync } from "fs";
 
 test("when using an iterative function the UI should update over time as iteration results are received", async ({
diff --git a/js/spa/test/chatbot_core_components_simple.spec.ts b/js/spa/test/chatbot_core_components_simple.spec.ts
index 56045b52d4..55d369927a 100644
--- a/js/spa/test/chatbot_core_components_simple.spec.ts
+++ b/js/spa/test/chatbot_core_components_simple.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, go_to_testcase } from "@gradio/tootils";
+import { test, expect, go_to_testcase } from "@self/tootils";
 
 for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - Gallery component properly displayed`, async ({
diff --git a/js/spa/test/chatbot_multimodal.spec.ts b/js/spa/test/chatbot_multimodal.spec.ts
index 58829e00d9..44d8f91842 100644
--- a/js/spa/test/chatbot_multimodal.spec.ts
+++ b/js/spa/test/chatbot_multimodal.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, go_to_testcase } from "@gradio/tootils";
+import { test, expect, go_to_testcase } from "@self/tootils";
 
 for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - text input by a user should be shown in the chatbot as a paragraph`, async ({
diff --git a/js/spa/test/chatbot_with_tools.spec.ts b/js/spa/test/chatbot_with_tools.spec.ts
index 1c2d6e4bcd..652d3a5bad 100644
--- a/js/spa/test/chatbot_with_tools.spec.ts
+++ b/js/spa/test/chatbot_with_tools.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("Chatbot can support agentic demos by displaying messages with metadata", async ({
 	page
diff --git a/js/spa/test/clear_components.spec.ts b/js/spa/test/clear_components.spec.ts
index 59bbbc6b7c..312079a1c5 100644
--- a/js/spa/test/clear_components.spec.ts
+++ b/js/spa/test/clear_components.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("Components value can be set via callable to a non-None value", async ({
 	page
diff --git a/js/spa/test/components.test.ts b/js/spa/test/components.test.ts
index a2d67acd11..1e5562b6e8 100644
--- a/js/spa/test/components.test.ts
+++ b/js/spa/test/components.test.ts
@@ -1,5 +1,5 @@
 import { afterEach, beforeAll, describe, expect, test } from "vitest";
-import { render, cleanup } from "@gradio/tootils";
+import { render, cleanup } from "@self/tootils";
 import { setupi18n } from "../../core/src/i18n";
 import { Gradio } from "../../core/src/gradio_helper";
 
diff --git a/js/spa/test/custom_css.spec.ts b/js/spa/test/custom_css.spec.ts
index 9c01bfe425..44782df864 100644
--- a/js/spa/test/custom_css.spec.ts
+++ b/js/spa/test/custom_css.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("renders the correct elements", async ({ page }) => {
 	await expect(page.getByTestId("markdown")).toHaveCount(2);
diff --git a/js/spa/test/dataframe_colorful.spec.ts b/js/spa/test/dataframe_colorful.spec.ts
index abf16e9cee..753cb9d5bb 100644
--- a/js/spa/test/dataframe_colorful.spec.ts
+++ b/js/spa/test/dataframe_colorful.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("first couple of cells in table are highlighted correctly", async ({
 	page
diff --git a/js/spa/test/datetimes.spec.ts b/js/spa/test/datetimes.spec.ts
index d88e55209d..fd82e49244 100644
--- a/js/spa/test/datetimes.spec.ts
+++ b/js/spa/test/datetimes.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("gr.DateTime shows correct values", async ({ page }) => {
 	await page.locator("#date1").getByRole("textbox").first().click();
diff --git a/js/spa/test/file_component_events.spec.ts b/js/spa/test/file_component_events.spec.ts
index 0fccf1422d..48fdca532e 100644
--- a/js/spa/test/file_component_events.spec.ts
+++ b/js/spa/test/file_component_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, drag_and_drop_file } from "@gradio/tootils";
+import { test, expect, drag_and_drop_file } from "@self/tootils";
 
 async function error_modal_showed(page) {
 	const toast = page.getByTestId("toast-body");
diff --git a/js/spa/test/file_explorer_component_events.spec.ts b/js/spa/test/file_explorer_component_events.spec.ts
index 0414428ce3..ffa3540917 100644
--- a/js/spa/test/file_explorer_component_events.spec.ts
+++ b/js/spa/test/file_explorer_component_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("File Explorer is interactive and re-runs the server_fn when root is updated", async ({
 	page
diff --git a/js/spa/test/function_values.spec.ts b/js/spa/test/function_values.spec.ts
index 83be749818..ab6d84c074 100644
--- a/js/spa/test/function_values.spec.ts
+++ b/js/spa/test/function_values.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("Test Country Filter", async ({ page }) => {
 	const countries_list = page.getByTestId("json");
diff --git a/js/spa/test/gallery_component_events.spec.ts b/js/spa/test/gallery_component_events.spec.ts
index f7a7a43176..fe26ceff28 100644
--- a/js/spa/test/gallery_component_events.spec.ts
+++ b/js/spa/test/gallery_component_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("Gallery preview mode displays all images correctly.", async ({
 	page
diff --git a/js/spa/test/gradio_pdf_demo.spec.ts b/js/spa/test/gradio_pdf_demo.spec.ts
index 3f4e78e33c..a1aa3e2534 100644
--- a/js/spa/test/gradio_pdf_demo.spec.ts
+++ b/js/spa/test/gradio_pdf_demo.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("Custom PDF component demo can be loaded and inference function works .", async ({
 	page
diff --git a/js/spa/test/image_component_events.spec.ts b/js/spa/test/image_component_events.spec.ts
index 345bf83dda..d7c33bd70c 100644
--- a/js/spa/test/image_component_events.spec.ts
+++ b/js/spa/test/image_component_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, drag_and_drop_file } from "@gradio/tootils";
+import { test, expect, drag_and_drop_file } from "@self/tootils";
 import fs from "fs";
 
 test("Image events are dispatched correctly. Downloading the file works and has the correct name.", async ({
diff --git a/js/spa/test/image_editor_events.spec.ts b/js/spa/test/image_editor_events.spec.ts
index add1148f86..322f2664df 100644
--- a/js/spa/test/image_editor_events.spec.ts
+++ b/js/spa/test/image_editor_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, drag_and_drop_file } from "@gradio/tootils";
+import { test, expect, drag_and_drop_file } from "@self/tootils";
 
 test("upload events work as expected", async ({ page }) => {
 	await page.getByLabel("Upload button").first().click();
diff --git a/js/spa/test/image_mod.spec.ts b/js/spa/test/image_mod.spec.ts
index 3ee40981f4..208500cf38 100644
--- a/js/spa/test/image_mod.spec.ts
+++ b/js/spa/test/image_mod.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("examples_get_updated_correctly", async ({ page }) => {
 	await page.locator(".gallery-item").first().click();
diff --git a/js/spa/test/input_output.spec.ts b/js/spa/test/input_output.spec.ts
index 20401d9ada..6d731b09d2 100644
--- a/js/spa/test/input_output.spec.ts
+++ b/js/spa/test/input_output.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("a component acts as both input and output", async ({ page }) => {
 	const textbox = await page.getByLabel("Input-Output");
diff --git a/js/spa/test/kitchen_sink.spec.ts b/js/spa/test/kitchen_sink.spec.ts
index 4f3baf1e4e..99ebaa2355 100644
--- a/js/spa/test/kitchen_sink.spec.ts
+++ b/js/spa/test/kitchen_sink.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("test inputs", async ({ page, browser }) => {
 	const context = await browser.newContext({
diff --git a/js/spa/test/mini_leaderboard.spec.ts b/js/spa/test/mini_leaderboard.spec.ts
index a09f6007d0..92fa155c38 100644
--- a/js/spa/test/mini_leaderboard.spec.ts
+++ b/js/spa/test/mini_leaderboard.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("Search bar filters dataframe correctly.", async ({ page }) => {
 	await page.getByTestId("textbox").fill("yam-peleg");
diff --git a/js/spa/test/model3d_component_events.spec.ts b/js/spa/test/model3d_component_events.spec.ts
index 03e6964c29..be6ffd1b4b 100644
--- a/js/spa/test/model3d_component_events.spec.ts
+++ b/js/spa/test/model3d_component_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, drag_and_drop_file } from "@gradio/tootils";
+import { test, expect, drag_and_drop_file } from "@self/tootils";
 
 test("Model3D click-to-upload uploads file successfuly. Upload and clear events work correctly. Downloading works.", async ({
 	page
diff --git a/js/spa/test/on_listener_test.spec.ts b/js/spa/test/on_listener_test.spec.ts
index 9d3c8e86e8..595a8eb0cc 100644
--- a/js/spa/test/on_listener_test.spec.ts
+++ b/js/spa/test/on_listener_test.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("On listener works.", async ({ page }) => {
 	const name_box = await page.locator("textarea").nth(0);
diff --git a/js/spa/test/outbreak_forecast.spec.ts b/js/spa/test/outbreak_forecast.spec.ts
index d937353ee9..d3b3b24fae 100644
--- a/js/spa/test/outbreak_forecast.spec.ts
+++ b/js/spa/test/outbreak_forecast.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("selecting matplotlib should show matplotlib image and pressing clear should clear output", async ({
 	page
diff --git a/js/spa/test/queue_full_e2e_test.spec.ts b/js/spa/test/queue_full_e2e_test.spec.ts
index 10eb6d11ee..2ab984f352 100644
--- a/js/spa/test/queue_full_e2e_test.spec.ts
+++ b/js/spa/test/queue_full_e2e_test.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("When the queue is full the queue full message gets shown. Also when there is an exception in a user function the queue does not get blocked", async ({
 	page
diff --git a/js/spa/test/rapid_generation.spec.ts b/js/spa/test/rapid_generation.spec.ts
index 2928b48d06..39f23d49b7 100644
--- a/js/spa/test/rapid_generation.spec.ts
+++ b/js/spa/test/rapid_generation.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("No errors on generation", async ({ page }) => {
 	await page.getByRole("button", { name: "Start" }).click();
diff --git a/js/spa/test/render_merge.spec.ts b/js/spa/test/render_merge.spec.ts
index 2a77f0c45b..549562bb09 100644
--- a/js/spa/test/render_merge.spec.ts
+++ b/js/spa/test/render_merge.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("Test re-renders reattach components and listeners", async ({ page }) => {
 	const output = page.getByLabel("Textbox", { exact: true });
diff --git a/js/spa/test/state_change.spec.ts b/js/spa/test/state_change.spec.ts
index d10e184799..04db71eabc 100644
--- a/js/spa/test/state_change.spec.ts
+++ b/js/spa/test/state_change.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("test 2d state-based render", async ({ page }) => {
 	await page.getByRole("button", { name: "Increment A" }).click();
diff --git a/js/spa/test/stream_audio_out.spec.ts b/js/spa/test/stream_audio_out.spec.ts
index 203905eb5c..9d142da6c0 100644
--- a/js/spa/test/stream_audio_out.spec.ts
+++ b/js/spa/test/stream_audio_out.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("audio streams correctly", async ({ page }) => {
 	const uploader = await page.locator("input[type=file]");
diff --git a/js/spa/test/sub_block_render.spec.ts b/js/spa/test/sub_block_render.spec.ts
index f51f52356b..4a1d7d71e1 100644
--- a/js/spa/test/sub_block_render.spec.ts
+++ b/js/spa/test/sub_block_render.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("submit works", async ({ page }) => {
 	await page.getByTestId("textbox").first().focus();
diff --git a/js/spa/test/tabs.spec.ts b/js/spa/test/tabs.spec.ts
index d06b5342ba..4903c2dd3b 100644
--- a/js/spa/test/tabs.spec.ts
+++ b/js/spa/test/tabs.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("clicking through tabs shows correct content", async ({ page }) => {
 	await page.getByRole("tab", { name: "Tab 2" }).click();
diff --git a/js/spa/test/test_chatinterface_streaming_echo.spec.ts b/js/spa/test/test_chatinterface_streaming_echo.spec.ts
index f7631d73df..e20987f013 100644
--- a/js/spa/test/test_chatinterface_streaming_echo.spec.ts
+++ b/js/spa/test/test_chatinterface_streaming_echo.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, go_to_testcase } from "@gradio/tootils";
+import { test, expect, go_to_testcase } from "@self/tootils";
 
 const cases = [
 	"tuples",
diff --git a/js/spa/test/theme_builder.spec.ts b/js/spa/test/theme_builder.spec.ts
index 323cf52b4f..8b5a532e06 100644
--- a/js/spa/test/theme_builder.spec.ts
+++ b/js/spa/test/theme_builder.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("test theme builder changes are applied", async ({ page }) => {
 	await page.getByLabel("Theme", { exact: true }).click();
diff --git a/js/spa/test/todo_list.spec.ts b/js/spa/test/todo_list.spec.ts
index a3d0a487b2..f6bd7792cc 100644
--- a/js/spa/test/todo_list.spec.ts
+++ b/js/spa/test/todo_list.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("clicking through tabs shows correct content", async ({ page }) => {
 	await expect(page.locator("body")).toContainText("Incomplete Tasks (0)");
diff --git a/js/spa/test/unload_event_test.spec.ts b/js/spa/test/unload_event_test.spec.ts
index 1e953ac1f6..24b5ee967c 100644
--- a/js/spa/test/unload_event_test.spec.ts
+++ b/js/spa/test/unload_event_test.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 import { readFileSync } from "fs";
 
 test("when a user closes the page, the unload event should be triggered", async ({
diff --git a/js/spa/test/upload_button_component_events.spec.ts b/js/spa/test/upload_button_component_events.spec.ts
index 7dc43796dd..78d512d528 100644
--- a/js/spa/test/upload_button_component_events.spec.ts
+++ b/js/spa/test/upload_button_component_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 test("UploadButton properly dispatches load event and click event for the single file case.", async ({
 	page
diff --git a/js/spa/test/upload_file_limit_test.spec.ts b/js/spa/test/upload_file_limit_test.spec.ts
index 30e8d2f381..15d4f1b1cb 100644
--- a/js/spa/test/upload_file_limit_test.spec.ts
+++ b/js/spa/test/upload_file_limit_test.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@gradio/tootils";
+import { test, expect } from "@self/tootils";
 
 async function error_modal_showed(page) {
 	const toast = page.getByTestId("toast-body");
diff --git a/js/spa/test/video_component_events.spec.ts b/js/spa/test/video_component_events.spec.ts
index 8120a62816..6fd404448f 100644
--- a/js/spa/test/video_component_events.spec.ts
+++ b/js/spa/test/video_component_events.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, drag_and_drop_file } from "@gradio/tootils";
+import { test, expect, drag_and_drop_file } from "@self/tootils";
 
 test("Video click-to-upload uploads video successfuly. Clear, play, and pause buttons dispatch events correctly. Downloading the file works and has the correct name.", async ({
 	page
diff --git a/js/spa/vite.config.ts b/js/spa/vite.config.ts
index 879293602f..6382a50c9e 100644
--- a/js/spa/vite.config.ts
+++ b/js/spa/vite.config.ts
@@ -53,7 +53,7 @@ import {
 	inject_component_loader,
 	resolve_svelte,
 	mock_modules
-} from "@gradio/build";
+} from "@self/build";
 
 const GRADIO_VERSION = version_raw || "asd_stub_asd";
 const CDN_BASE = "https://gradio.s3-us-west-2.amazonaws.com";
@@ -142,6 +142,9 @@ export default defineConfig(({ mode }) => {
 		optimizeDeps: {
 			exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"]
 		},
+		resolve: {
+			conditions: ["gradio"]
+		},
 		test: {
 			setupFiles: [resolve(__dirname, "../../.config/setup_vite_tests.ts")],
 			environment: TEST_MODE,
diff --git a/js/state/package.json b/js/state/package.json
index f26f4ceb35..688e510356 100644
--- a/js/state/package.json
+++ b/js/state/package.json
@@ -8,9 +8,16 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/statustracker/package.json b/js/statustracker/package.json
index 12b35702d3..c009828e1a 100644
--- a/js/statustracker/package.json
+++ b/js/statustracker/package.json
@@ -8,11 +8,12 @@
 	"license": "ISC",
 	"main_changeset": true,
 	"exports": {
-		".": "./index.ts",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
+		".": {
+			"gradio": "./index.ts",
+			"svelte": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./package.json": "./package.json"
 	},
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
@@ -24,6 +25,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/storybook/CHANGELOG.md b/js/storybook/CHANGELOG.md
index 98efef737a..a6a6a8c926 100644
--- a/js/storybook/CHANGELOG.md
+++ b/js/storybook/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @gradio/storybook
+# @self/storybook
 
 ## 0.6.1
 
diff --git a/js/storybook/package.json b/js/storybook/package.json
index b00c1f2ffd..b9b9783456 100644
--- a/js/storybook/package.json
+++ b/js/storybook/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@gradio/storybook",
+	"name": "@self/storybook",
 	"version": "0.6.1",
 	"description": "Gradio UI packages",
 	"type": "module",
diff --git a/js/storybook/vite.config.js b/js/storybook/vite.config.js
index d99580ec4c..a0dc6b9dfe 100644
--- a/js/storybook/vite.config.js
+++ b/js/storybook/vite.config.js
@@ -2,7 +2,7 @@ import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import sveltePreprocess from "svelte-preprocess";
 import autoprefixer from "autoprefixer";
-import { inject_component_loader } from "../build/dist/index.js";
+import { inject_component_loader } from "../build/out/index.js";
 
 export default defineConfig({
 	base: "",
@@ -26,5 +26,8 @@ export default defineConfig({
 			})
 		}),
 		inject_component_loader({ mode: "storybook" })
-	]
+	],
+	resolve: {
+		conditions: ["gradio"]
+	}
 });
diff --git a/js/tabitem/package.json b/js/tabitem/package.json
index f7af8e6549..5909eca12d 100644
--- a/js/tabitem/package.json
+++ b/js/tabitem/package.json
@@ -8,7 +8,11 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -19,6 +23,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/tabs/package.json b/js/tabs/package.json
index 15548ada4b..64b477423b 100644
--- a/js/tabs/package.json
+++ b/js/tabs/package.json
@@ -9,7 +9,11 @@
 	"main_changeset": true,
 	"main": "Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -18,6 +22,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/textbox/Textbox.test.ts b/js/textbox/Textbox.test.ts
index a5dc5c7cd3..0abfa79fc5 100644
--- a/js/textbox/Textbox.test.ts
+++ b/js/textbox/Textbox.test.ts
@@ -1,6 +1,5 @@
 import { test, describe, assert, afterEach } from "vitest";
-import { spy } from "tinyspy";
-import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import event from "@testing-library/user-event";
 
 import Textbox from "./Index.svelte";
diff --git a/js/textbox/package.json b/js/textbox/package.json
index 30dac566a7..04d97b9be9 100644
--- a/js/textbox/package.json
+++ b/js/textbox/package.json
@@ -9,8 +9,16 @@
 	"main_changeset": true,
 	"main": "Index.svelte",
 	"exports": {
-		".": "./Index.svelte",
-		"./example": "./Example.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -22,6 +30,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/theme/package.json b/js/theme/package.json
index 300940a7b3..30ebe0b8e8 100644
--- a/js/theme/package.json
+++ b/js/theme/package.json
@@ -10,6 +10,37 @@
 	"scripts": {
 		"generate": "pollen -c src/pollen.config.cjs"
 	},
+	"exports": {
+		".": {
+			"gradio": "./src/index.ts",
+			"import": "./dist/src/index.js",
+			"types": "./dist/src/index.d.ts"
+		},
+		"./reset.css": {
+			"gradio": "./src/reset.css",
+			"import": "./dist/src/reset.css"
+		},
+		"./global.css": {
+			"gradio": "./src/global.css",
+			"import": "./dist/src/global.css"
+		},
+		"./tokens": {
+			"gradio": "./src/tokens.ts",
+			"import": "./dist/src/tokens.js"
+		},
+		"./typography.css": {
+			"gradio": "./src/typography.css",
+			"import": "./dist/src/typography.css"
+		},
+		"./pollen.css": {
+			"gradio": "./src/pollen.css",
+			"import": "./dist/src/pollen.css"
+		},
+		"./package.json": "./package.json"
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"main_changeset": true,
 	"repository": {
 		"type": "git",
diff --git a/js/theme/src/index.ts b/js/theme/src/index.ts
index 7f3f2253a1..bd1cb299ea 100644
--- a/js/theme/src/index.ts
+++ b/js/theme/src/index.ts
@@ -3,4 +3,4 @@
 // export { default as css } from "./pollen.css";
 // export { default as typography } from "./typography.css";
 
-export * from "./colors";
+export * from "./colors.js";
diff --git a/js/timer/package.json b/js/timer/package.json
index 1dc4ca9750..ea674f0ddb 100644
--- a/js/timer/package.json
+++ b/js/timer/package.json
@@ -8,7 +8,11 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
@@ -17,6 +21,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/tooltip/package.json b/js/tooltip/package.json
index 05e8163a9e..8c5f4eeee7 100644
--- a/js/tooltip/package.json
+++ b/js/tooltip/package.json
@@ -11,5 +11,16 @@
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
 		"directory": "js/tooltip"
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"exports": {
+		".": {
+			"gradio": "./src/index.js",
+			"svelte": "./dist/src/index.js",
+			"types": "./dist/src/index.d.ts"
+		},
+		"./package.json": "./package.json"
 	}
 }
diff --git a/js/tooltip/src/tooltip.ts b/js/tooltip/src/tooltip.ts
index 30ca269ec0..09403f9438 100644
--- a/js/tooltip/src/tooltip.ts
+++ b/js/tooltip/src/tooltip.ts
@@ -1,4 +1,3 @@
-// import type { ActionReturn } from "@gradio/tootils";
 import Tooltip from "./Tooltip.svelte";
 
 interface ActionArgs {
diff --git a/js/tootils/CHANGELOG.md b/js/tootils/CHANGELOG.md
index 992ab2356d..7f5fd22571 100644
--- a/js/tootils/CHANGELOG.md
+++ b/js/tootils/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @gradio/tootils
+# @self/tootils
 
 ## 0.6.4
 
diff --git a/js/tootils/package.json b/js/tootils/package.json
index bf2c287b69..c949a219b2 100644
--- a/js/tootils/package.json
+++ b/js/tootils/package.json
@@ -1,18 +1,24 @@
 {
-	"name": "@gradio/tootils",
+	"name": "@self/tootils",
 	"version": "0.6.4",
 	"description": "Internal test utilities",
 	"type": "module",
 	"main": "src/index.ts",
 	"author": "",
 	"license": "ISC",
-	"private": false,
+	"private": true,
 	"dependencies": {
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"exports": {
 		".": "./src/index.ts",
 		"./render": "./src/render.ts"
+	},
+	"scripts": {
+		"package": "svelte-package --input=. --cwd=../../.config/"
 	}
 }
diff --git a/js/tootils/src/render.ts b/js/tootils/src/render.ts
index ce431e0e11..8ed3307987 100644
--- a/js/tootils/src/render.ts
+++ b/js/tootils/src/render.ts
@@ -104,7 +104,8 @@ export async function render<
 				//@ts-ignore
 				(s) => s,
 				// @ts-ignore
-				{ client: {} }
+				{ client: {} },
+				() => {}
 			)
 		}
 	});
diff --git a/js/upload/package.json b/js/upload/package.json
index 01191fec0b..4533551e46 100644
--- a/js/upload/package.json
+++ b/js/upload/package.json
@@ -15,7 +15,14 @@
 	},
 	"main_changeset": true,
 	"exports": {
-		".": "./src/index.ts"
+		".": {
+			"gradio": "./src/index.ts",
+			"svelte": "./dist/src/index.js",
+			"types": "./dist/src/index.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/uploadbutton/UploadButton.test.ts b/js/uploadbutton/UploadButton.test.ts
index 8dd041b0b0..ac085122db 100644
--- a/js/uploadbutton/UploadButton.test.ts
+++ b/js/uploadbutton/UploadButton.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, expect, vi, afterEach, assert } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import event from "@testing-library/user-event";
 import { setupi18n } from "../core/src/i18n";
 import UploadButton from "./Index.svelte";
diff --git a/js/uploadbutton/package.json b/js/uploadbutton/package.json
index f93bd0f5ee..d4420b5849 100644
--- a/js/uploadbutton/package.json
+++ b/js/uploadbutton/package.json
@@ -8,7 +8,11 @@
 	"private": false,
 	"main_changeset": true,
 	"exports": {
-		".": "./Index.svelte",
+		".": {
+			"gradio": "./Index.svelte",
+			"svelte": "./dist/Index.svelte",
+			"types": "./dist/Index.svelte.d.ts"
+		},
 		"./package.json": "./package.json"
 	},
 	"main": "./Index.svelte",
@@ -21,6 +25,9 @@
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
 	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
diff --git a/js/utils/package.json b/js/utils/package.json
index a5967c08aa..3bfdb360ba 100644
--- a/js/utils/package.json
+++ b/js/utils/package.json
@@ -15,5 +15,17 @@
 		"type": "git",
 		"url": "git+https://github.com/gradio-app/gradio.git",
 		"directory": "js/utils"
+	},
+	"exports": {
+		".": {
+			"gradio": "./src/index.ts",
+			"types": "./dist/src/index.d.ts",
+			"import": "./dist/src/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"scripts": {
+		"package": "svelte-package --input=. --cwd=../../.config/",
+		"build": "esbuild src/index.ts --format=esm --outfile=dist/src/index.js --sourcemap  --platform=node"
 	}
 }
diff --git a/js/utils/src/index.ts b/js/utils/src/index.ts
index e0127e6bee..5119597e23 100644
--- a/js/utils/src/index.ts
+++ b/js/utils/src/index.ts
@@ -1,2 +1,2 @@
-export * from "./color";
-export * from "./utils";
+export * from "./color.js";
+export * from "./utils.js";
diff --git a/js/utils/src/utils.ts b/js/utils/src/utils.ts
index 6c838b6437..1ca9aba135 100644
--- a/js/utils/src/utils.ts
+++ b/js/utils/src/utils.ts
@@ -1,5 +1,6 @@
 import type { ActionReturn } from "svelte/action";
 import type { Client } from "@gradio/client";
+import type { ComponentType, SvelteComponent } from "svelte";
 
 export interface SelectData {
 	row_value?: any[];
@@ -194,10 +195,20 @@ export const format_time = (seconds: number): string => {
 	return `${minutes}:${padded_seconds}`;
 };
 
-type component_loader =
-	typeof import("virtual:component-loader").load_component;
+interface Args {
+	api_url: string;
+	name: string;
+	id?: string;
+	variant: "component" | "example" | "base";
+}
+
+type component_loader = (args: Args) => {
+	name: "string";
+	component: {
+		default: ComponentType<SvelteComponent>;
+	};
+};
 
-let virtual_component_loader: component_loader | null = null;
 export type I18nFormatter = any;
 export class Gradio<T extends Record<string, any> = Record<string, any>> {
 	#id: number;
@@ -209,7 +220,7 @@ export class Gradio<T extends Record<string, any> = Record<string, any>> {
 	autoscroll: boolean;
 	max_file_size: number | null;
 	client: Client;
-	_load_component: component_loader | null = null;
+	_load_component?: component_loader;
 	load_component = _load_component.bind(this);
 
 	constructor(
@@ -221,7 +232,8 @@ export class Gradio<T extends Record<string, any> = Record<string, any>> {
 		autoscroll: boolean,
 		max_file_size: number | null,
 		i18n: I18nFormatter = (x: string): string => x,
-		client: Client
+		client: Client,
+		virtual_component_loader?: component_loader
 	) {
 		this.#id = id;
 		this.theme = theme;
@@ -234,18 +246,7 @@ export class Gradio<T extends Record<string, any> = Record<string, any>> {
 		this.autoscroll = autoscroll;
 		this.client = client;
 
-		if (!virtual_component_loader) {
-			import("virtual:component-loader")
-				.then((module) => {
-					this._load_component = module.load_component;
-					virtual_component_loader = module.load_component;
-				})
-				.catch((e) => {
-					console.error("Error loading virtual component loader", e);
-				});
-		} else {
-			this._load_component = virtual_component_loader;
-		}
+		this._load_component = virtual_component_loader;
 	}
 
 	dispatch<E extends keyof T>(event_name: E, data?: T[E]): void {
diff --git a/js/video/Video.test.ts b/js/video/Video.test.ts
index d2e6649637..77c241d04a 100644
--- a/js/video/Video.test.ts
+++ b/js/video/Video.test.ts
@@ -8,8 +8,8 @@ import {
 	beforeEach,
 	expect
 } from "vitest";
-import { spy, spyOn } from "tinyspy";
-import { cleanup, render } from "@gradio/tootils";
+import { spyOn } from "tinyspy";
+import { cleanup, render } from "@self/tootils";
 import { setupi18n } from "../core/src/i18n";
 
 import Video from "./Index.svelte";
diff --git a/js/video/package.json b/js/video/package.json
index ae6345f8f8..8da410bcd8 100644
--- a/js/video/package.json
+++ b/js/video/package.json
@@ -23,11 +23,30 @@
 		"@gradio/preview": "workspace:^"
 	},
 	"exports": {
-		".": "./index.ts",
-		"./example": "./Example.svelte",
-		"./shared": "./shared/index.ts",
-		"./base": "./shared/VideoPreview.svelte",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		".": {
+			"gradio": "./index.ts",
+			"svelte": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./example": {
+			"gradio": "./Example.svelte",
+			"svelte": "./dist/Example.svelte",
+			"types": "./dist/Example.svelte.d.ts"
+		},
+		"./shared": {
+			"gradio": "./shared/index.ts",
+			"svelte": "./dist/shared/index.js",
+			"types": "./dist/shared/index.d.ts"
+		},
+		"./base": {
+			"gradio": "./shared/VideoPreview.svelte",
+			"svelte": "./dist/shared/VideoPreview.svelte",
+			"types": "./dist/shared/VideoPreview.svelte.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"main": "index.ts",
 	"main_changeset": true,
diff --git a/js/wasm/package.json b/js/wasm/package.json
index 1135b484a1..c6eb4b5445 100644
--- a/js/wasm/package.json
+++ b/js/wasm/package.json
@@ -3,12 +3,23 @@
 	"version": "0.13.0",
 	"description": "Gradio Wasm package",
 	"type": "module",
-	"main": "./dist/index.js",
+	"main": "./dist/src/index.js",
 	"exports": {
-		".": "./dist/index.js",
+		".": {
+			"gradio": "./src/index.ts",
+			"import": "./dist/src/index.js",
+			"types": "./dist/src/index.d.ts"
+		},
 		"./package.json": "./package.json",
-		"./svelte": "./svelte/index.ts",
-		"./network": "./network/index.ts"
+		"./svelte": {
+			"gradio": "./svelte/index.ts",
+			"svelte": "./dist/svelte/index.js",
+			"types": "./dist/svelte/index.d.ts"
+		},
+		"./network": {
+			"import": "./network/index.ts",
+			"types": "./dist/network/index.d.ts"
+		}
 	},
 	"keywords": [],
 	"author": "",
@@ -18,16 +29,17 @@
 		"dev:client": "tsc -w --incremental",
 		"dev:worker": "vite build --config vite.worker.config.js --watch --emptyOutDir=false",
 		"dev": "run-p dev:*",
-		"build:client": "tsc",
+		"build:client": "svelte-package --input=. --cwd=../../.config/",
 		"build:worker": "vite build --config vite.worker.config.js",
-		"build": "run-s build:worker build:client"
-	},
-	"devDependencies": {
-		"pyodide": "0.26.1"
+		"build": "run-s build:client build:worker"
 	},
 	"dependencies": {
 		"@types/path-browserify": "^1.0.0",
-		"path-browserify": "^1.0.1"
+		"path-browserify": "^1.0.1",
+		"pyodide": "0.26.1"
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
 	},
 	"repository": {
 		"type": "git",
diff --git a/js/wasm/src/promise-delegate.ts b/js/wasm/src/promise-delegate.ts
index ab5c1c7bf1..1501900a0f 100644
--- a/js/wasm/src/promise-delegate.ts
+++ b/js/wasm/src/promise-delegate.ts
@@ -1,9 +1,9 @@
 type PromiseImplFn<T> = ConstructorParameters<typeof Promise<T>>[0];
 
 export class PromiseDelegate<T> {
-	private promiseInternal: Promise<T>;
-	private resolveInternal!: Parameters<PromiseImplFn<T>>[0];
-	private rejectInternal!: Parameters<PromiseImplFn<T>>[1];
+	promiseInternal: Promise<T>;
+	resolveInternal!: Parameters<PromiseImplFn<T>>[0];
+	rejectInternal!: Parameters<PromiseImplFn<T>>[1];
 
 	constructor() {
 		this.promiseInternal = new Promise((resolve, reject) => {
diff --git a/js/wasm/src/sse.ts b/js/wasm/src/sse.ts
index b71d46fede..89da1b1f0d 100644
--- a/js/wasm/src/sse.ts
+++ b/js/wasm/src/sse.ts
@@ -11,8 +11,8 @@ export class WasmWorkerEventSource extends EventTarget {
 	 */
 	public readyState: number;
 
-	private port: MessagePort;
-	private url: URL;
+	port: MessagePort;
+	url: URL;
 
 	// This class partially implements the EventSource interface (https://html.spec.whatwg.org/multipage/server-sent-events.html#the-eventsource-interface).
 	// Reconnection is not implemented, so this class doesn't maitain a reconnection time and a  last event ID string and the stream interpreter ignores the field related to these, e.g. "id" and "retry".
@@ -80,7 +80,7 @@ export class WasmWorkerEventSource extends EventTarget {
 		this.readyState = 2;
 	}
 
-	private _handleAsgiSendEvent(e: MessageEvent<SendEvent>): void {
+	_handleAsgiSendEvent(e: MessageEvent<SendEvent>): void {
 		const asgiSendEvent: SendEvent = e.data;
 
 		if (asgiSendEvent.type === "http.response.start") {
@@ -118,7 +118,7 @@ export class WasmWorkerEventSource extends EventTarget {
 		}
 	}
 
-	private interpretEventStream(streamContent: string): void {
+	interpretEventStream(streamContent: string): void {
 		// This method implements the steps described in the following section of the spec:
 		// "9.2.6 Interpreting an event stream" (https://html.spec.whatwg.org/multipage/server-sent-events.html#event-stream-interpretation)
 		const self = this;
diff --git a/js/wasm/src/webworker/awaitable-queue.ts b/js/wasm/src/webworker/awaitable-queue.ts
index 18abae958a..82b62a5c66 100644
--- a/js/wasm/src/webworker/awaitable-queue.ts
+++ b/js/wasm/src/webworker/awaitable-queue.ts
@@ -39,11 +39,11 @@ export class AwaitableQueue<T> {
 		this._notifyAll();
 	}
 
-	private async _wait(): Promise<void> {
+	async _wait(): Promise<void> {
 		await this._promise;
 	}
 
-	private _notifyAll(): void {
+	_notifyAll(): void {
 		if (this._resolve) {
 			this._resolve();
 		}
diff --git a/js/wasm/src/worker-proxy.ts b/js/wasm/src/worker-proxy.ts
index 12d0223f0c..03304ba173 100644
--- a/js/wasm/src/worker-proxy.ts
+++ b/js/wasm/src/worker-proxy.ts
@@ -26,10 +26,9 @@ export interface WorkerProxyOptions {
 }
 
 export class WorkerProxy extends EventTarget {
-	private worker: globalThis.Worker | globalThis.SharedWorker;
-	private postMessageTarget: globalThis.Worker | MessagePort;
-
-	private firstRunPromiseDelegate = new PromiseDelegate<void>();
+	worker: globalThis.Worker | globalThis.SharedWorker;
+	postMessageTarget: globalThis.Worker | MessagePort;
+	firstRunPromiseDelegate = new PromiseDelegate<void>();
 
 	constructor(options: WorkerProxyOptions) {
 		super();
@@ -41,9 +40,12 @@ export class WorkerProxy extends EventTarget {
 		// assuming that this module is imported from the Gradio frontend (`@gradio/lite`), which is bundled with Vite.
 		// HACK: Use `CrossOriginWorkerMaker` imported as `Worker` here.
 		// Read the comment in `cross-origin-worker.ts` for the detail.
-		const workerMaker = new Worker(new URL("./webworker.js", import.meta.url), {
-			/* @vite-ignore */ shared: sharedWorkerMode // `@vite-ignore` is needed to avoid an error `Vite is unable to parse the worker options as the value is not static.`
-		});
+		const workerMaker = new Worker(
+			new URL("../webworker/webworker.js", import.meta.url),
+			{
+				/* @vite-ignore */ shared: sharedWorkerMode // `@vite-ignore` is needed to avoid an error `Vite is unable to parse the worker options as the value is not static.`
+			}
+		);
 
 		this.worker = workerMaker.worker;
 		if (sharedWorkerMode) {
@@ -135,7 +137,7 @@ export class WorkerProxy extends EventTarget {
 	// returns void immediately, this function returns a promise, which resolves
 	// when a ReplyMessage is received from the worker.
 	// The original implementation is in https://github.com/rstudio/shinylive/blob/v0.1.2/src/pyodide-proxy.ts#L404-L418
-	private postMessageAsync(msg: InMessage): Promise<unknown> {
+	postMessageAsync(msg: InMessage): Promise<unknown> {
 		return new Promise((resolve, reject) => {
 			const channel = new MessageChannel();
 
@@ -154,7 +156,7 @@ export class WorkerProxy extends EventTarget {
 		});
 	}
 
-	private _processWorkerMessage(msg: OutMessage): void {
+	_processWorkerMessage(msg: OutMessage): void {
 		switch (msg.type) {
 			case "progress-update": {
 				this.dispatchEvent(
diff --git a/js/wasm/svelte/context.ts b/js/wasm/svelte/context.ts
index 95a09fdc87..3b9c76adc5 100644
--- a/js/wasm/svelte/context.ts
+++ b/js/wasm/svelte/context.ts
@@ -1,5 +1,5 @@
 import { setContext, getContext } from "svelte";
-import type { WorkerProxy } from "../dist";
+import type { WorkerProxy } from "../src/worker-proxy";
 
 const WORKER_PROXY_CONTEXT_KEY = "WORKER_PROXY_CONTEXT_KEY";
 
diff --git a/js/wasm/svelte/file-url.ts b/js/wasm/svelte/file-url.ts
index b33bffb7d0..b9cb3818bd 100644
--- a/js/wasm/svelte/file-url.ts
+++ b/js/wasm/svelte/file-url.ts
@@ -1,7 +1,7 @@
 import { getWorkerProxyContext } from "./context";
 import { is_self_host } from "../network/host";
 import { getHeaderValue } from "../src/http";
-import type { WorkerProxy } from "../dist";
+import type { WorkerProxy } from "../src/worker-proxy";
 
 type MediaSrc = string | undefined | null;
 
diff --git a/js/wasm/tsconfig.json b/js/wasm/tsconfig.json
deleted file mode 100644
index 239b319e0d..0000000000
--- a/js/wasm/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-		"module": "ESNext" /* Specify what module code is generated. */,
-		"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
-		"declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
-		"outDir": "./dist" /* Specify an output folder for all emitted files. */,
-		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
-		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
-		"strict": true /* Enable all strict type-checking options. */,
-		"skipLibCheck": true /* Skip type checking all .d.ts files. */
-	},
-	"include": ["src/**/*", "../../globals.d.ts"],
-	"exclude": ["src/webworker/**/*"] // The worker code is bundled by Vite separately. See its config file.
-}
diff --git a/js/wasm/vite.worker.config.js b/js/wasm/vite.worker.config.js
index 4a05771b0c..6580303bfb 100644
--- a/js/wasm/vite.worker.config.js
+++ b/js/wasm/vite.worker.config.js
@@ -22,7 +22,7 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
 	build: {
-		outDir: "dist",
+		outDir: "dist/webworker",
 		rollupOptions: {
 			input: path.join(__dirname, "src/webworker/index.ts"),
 			// Ref: https://github.com/rollup/rollup/issues/2616#issuecomment-1431551704
diff --git a/package.json b/package.json
index 18022d6cd1..cf05b37dd2 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,11 @@
 	"version": "0.0.1",
 	"description": "Gradio UI packages",
 	"scripts": {
-		"dev": "pnpm css && pnpm --filter @gradio/client build && pnpm --filter @gradio/preview build && pnpm --filter @gradio/spa dev",
+		"dev": "pnpm css && pnpm --filter @gradio/preview build && pnpm --filter @self/spa dev",
+		"dev:lite": "pnpm package && pnpm --filter @gradio/lite dev",
 		"css": "pnpm --filter @gradio/theme generate",
-		"build": "pnpm css && pnpm --filter @gradio/client build && pnpm --filter @gradio/spa build --emptyOutDir && pnpm --filter @gradio/preview build",
-		"build:lite": "pnpm --filter @gradio/lite build",
+		"build": "pnpm css && pnpm --filter @self/spa build --emptyOutDir && pnpm --filter @gradio/preview build",
+		"build:lite": "pnpm package && pnpm --filter @gradio/lite build",
 		"format:check": "prettier --ignore-path .config/.prettierignore --check --config .config/.prettierrc.json --plugin prettier-plugin-svelte .",
 		"format:write": "prettier --ignore-path .config/.prettierignore --write --config .config/.prettierrc.json --plugin prettier-plugin-svelte .",
 		"lint": "ESLINT_USE_FLAT_CONFIG=true eslint -c .config/eslint.config.js js client/js",
@@ -14,11 +15,11 @@
 		"test": "pnpm --filter @gradio/client build && vitest dev --config .config/vitest.config.ts",
 		"test:run": "pnpm --filter @gradio/client build && vitest run --config .config/vitest.config.ts --reporter=verbose",
 		"test:client": "pnpm --filter=@gradio/client test",
-		"test:browser": "pnpm --filter @gradio/spa test:browser",
-		"test:browser:reload": "CUSTOM_TEST=1 pnpm --filter @gradio/spa test:browser:reload",
-		"test:browser:full": "run-s build test:browser",
+		"test:browser": "pnpm --filter @self/spa test:browser",
+		"test:browser:reload": "CUSTOM_TEST=1 pnpm --filter @self/spa test:browser:reload",
+		"test:browser:full": "run-s build package test:browser",
 		"test:browser:verbose": "pnpm test:browser",
-		"test:browser:dev": "pnpm --filter @gradio/spa test:browser:dev",
+		"test:browser:dev": "pnpm --filter @self/spa test:browser:dev",
 		"storybook": "storybook dev -p 6006 --config-dir js/storybook",
 		"build-storybook": "storybook build --config-dir js/storybook --webpack-stats-json",
 		"ci:version": "changeset version && pnpm i --lockfile-only && node ./.changeset/fix_changelogs.cjs",
@@ -26,7 +27,7 @@
 		"chromatic": "chromatic",
 		"test:ct": "playwright test -c ./.config/playwright-ct.config.ts",
 		"website": "pnpm --filter @gradio/website build",
-		"package": "echo \"hi\""
+		"package": "pnpm --filter @gradio/* --filter=!@gradio/wasm --filter=!@gradio/lite --filter=!@gradio/client --filter=!@gradio/preview exec svelte-package --input=. --cwd=../../.config/"
 	},
 	"type": "module",
 	"author": "",
@@ -38,10 +39,12 @@
 		"@changesets/get-github-info": "^0.6.0",
 		"@csstools/postcss-global-data": "^2.1.1",
 		"@gradio/client": "workspace:^",
-		"@gradio/tootils": "workspace:^",
 		"@manypkg/get-packages": "^2.2.1",
 		"@playwright/experimental-ct-svelte": "^1.44.1",
 		"@playwright/test": "^1.44.1",
+		"@self/build": "workspace:^",
+		"@self/tootils": "workspace:^",
+		"@sveltejs/package": "^2.3.4",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@tailwindcss/forms": "^0.5.7",
 		"@testing-library/dom": "^10.1.0",
@@ -100,9 +103,9 @@
 		"@gradio/checkbox": "workspace:^",
 		"@gradio/checkboxgroup": "workspace:^",
 		"@gradio/code": "workspace:^",
-		"@gradio/core": "workspace:^",
 		"@gradio/colorpicker": "workspace:^",
 		"@gradio/column": "workspace:^",
+		"@gradio/core": "workspace:^",
 		"@gradio/dataframe": "workspace:^",
 		"@gradio/dataset": "workspace:^",
 		"@gradio/datetime": "workspace:^",
@@ -162,5 +165,10 @@
 	"engines": {
 		"node": ">=18.0.0",
 		"pnpm": "~9.1.0"
+	},
+	"pnpm": {
+		"patchedDependencies": {
+			"@sveltejs/package@2.3.4": "patches/@sveltejs__package@2.3.4.patch"
+		}
 	}
 }
diff --git a/patches/@sveltejs__package@2.3.4.patch b/patches/@sveltejs__package@2.3.4.patch
new file mode 100644
index 0000000000..64176f713c
--- /dev/null
+++ b/patches/@sveltejs__package@2.3.4.patch
@@ -0,0 +1,94 @@
+diff --git a/src/cli.js b/src/cli.js
+index 4833dc489359f2fba202668672f3cd8e09c427d5..7aa312f3677b73dbdfd4d0f1bb2b66bd17346cb3 100644
+--- a/src/cli.js
++++ b/src/cli.js
+@@ -28,9 +28,10 @@ prog
+ 		'--tsconfig',
+ 		'A path to a tsconfig or jsconfig file. When not provided, searches for the next upper tsconfig/jsconfig in the workspace path.'
+ 	)
++	.option('-c, --cwd', 'The current working directory')
+ 	.action(async (args) => {
+ 		try {
+-			const config = await load_config();
++			const config = await load_config({cwd: args.cwd});
+ 
+ 			// @ts-expect-error
+ 			if (config.package) {
+diff --git a/src/index.js b/src/index.js
+index a6cbda297cbb23329ceb669942fdba0e7e1c274c..1e813b042739f565829bed56347a44e9c62121eb 100644
+--- a/src/index.js
++++ b/src/index.js
+@@ -28,27 +28,47 @@ async function do_build(options, analyse_code) {
+ 		throw new Error(`${path.relative('.', input)} does not exist`);
+ 	}
+ 
++	const tmp_input = path.join(input, 'tmp_input')
++
+ 	rimraf(temp);
++	rimraf(tmp_input)
+ 	mkdirp(temp);
+-
+-	const files = scan(input, extensions);
++	mkdirp(tmp_input)
++	copy(input, tmp_input, {
++		filter: (p) => 
++			!p.includes('node_modules') && 
++			!p.includes('dist') && 
++			!p.includes('tmp_input') && 
++			!p.includes('public') &&
++			!p.endsWith('.stories.svelte') && 
++			!p.endsWith('.test.ts') && 
++			!p.endsWith('.spec.ts') && 
++			!p.endsWith('.md') &&
++			!p.endsWith('package.json') &&
++			!p.endsWith('.gitignore') &&
++			!p.endsWith('.svelte-kit')
++	})
++
++	const files = scan(tmp_input, extensions);
+ 
+ 	if (options.types) {
+-		await emit_dts(input, temp, options.cwd, alias, files);
++		await emit_dts(tmp_input, temp, options.cwd, alias, files);
+ 	}
+ 
+ 	for (const file of files) {
+-		await process_file(input, temp, file, options.config.preprocess, alias, tsconfig, analyse_code);
++		await process_file(tmp_input, temp, file, options.config.preprocess, alias, tsconfig, analyse_code);
+ 	}
+ 
+ 	rimraf(output);
+ 	mkdirp(output);
+ 	copy(temp, output);
++	rimraf(path.join(temp, ".."))
++	rimraf(tmp_input)
+ 
+ 	console.log(
+ 		colors
+ 			.bold()
+-			.green(`${path.relative(options.cwd, input)} -> ${path.relative(options.cwd, output)}`)
++			.green(`${path.relative(path.join(options.cwd, "..", ".."), input)} -> ${path.relative(options.cwd, output)}`)
+ 	);
+ }
+ 
+diff --git a/src/typescript.js b/src/typescript.js
+index 810871d5015257f05199192ed275f051492ca923..53d3c2516086cca5285858c6113a81d885dfebdc 100644
+--- a/src/typescript.js
++++ b/src/typescript.js
+@@ -20,6 +20,7 @@ import { load_pkg_json } from './config.js';
+  */
+ export async function emit_dts(input, output, cwd, alias, files) {
+ 	const tmp = `${output}/__package_types_tmp__`;
++	const root = path.resolve(cwd, "..", "..")
+ 	rimraf(tmp);
+ 	mkdirp(tmp);
+ 
+@@ -32,7 +33,7 @@ export async function emit_dts(input, output, cwd, alias, files) {
+ 		svelteShimsPath: no_svelte_3
+ 			? require.resolve('svelte2tsx/svelte-shims-v4.d.ts')
+ 			: require.resolve('svelte2tsx/svelte-shims.d.ts'),
+-		declarationDir: path.relative(cwd, tmp)
++		declarationDir: path.relative(root, tmp)
+ 	});
+ 
+ 	const handwritten = new Set();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a13d2d89a..face2c165a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+patchedDependencies:
+  '@sveltejs/package@2.3.4':
+    hash: flygqco6z3nrhhrndh6d2cl72q
+    path: patches/@sveltejs__package@2.3.4.patch
+
 importers:
 
   .:
@@ -23,9 +28,6 @@ importers:
       '@gradio/client':
         specifier: workspace:^
         version: link:client/js
-      '@gradio/tootils':
-        specifier: workspace:^
-        version: link:js/tootils
       '@manypkg/get-packages':
         specifier: ^2.2.1
         version: 2.2.1
@@ -35,6 +37,15 @@ importers:
       '@playwright/test':
         specifier: ^1.44.1
         version: 1.44.1
+      '@self/build':
+        specifier: workspace:^
+        version: link:js/build
+      '@self/tootils':
+        specifier: workspace:^
+        version: link:js/tootils
+      '@sveltejs/package':
+        specifier: ^2.3.4
+        version: 2.3.4(patch_hash=flygqco6z3nrhhrndh6d2cl72q)(svelte@4.2.15)(typescript@5.5.4)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
         version: 3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38)))
@@ -503,6 +514,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:0.6.0
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -531,6 +545,9 @@ importers:
       '@gradio/wasm':
         specifier: workspace:^
         version: link:../wasm
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -574,6 +591,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
 
   js/audio:
     dependencies:
@@ -613,6 +633,9 @@ importers:
       resize-observer-polyfill:
         specifier: ^1.5.1
         version: 1.5.1
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
       svelte-range-slider-pips:
         specifier: ^2.0.1
         version: 2.0.1
@@ -629,6 +652,9 @@ importers:
       '@gradio/atoms':
         specifier: workspace:^
         version: link:../atoms
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
 
   js/build:
     dependencies:
@@ -638,6 +664,9 @@ importers:
       esbuild:
         specifier: ^0.21.0
         version: 0.21.0
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
       svelte-i18n:
         specifier: ^3.6.0
         version: 3.6.0(svelte@4.2.15)
@@ -653,6 +682,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -705,6 +737,9 @@ importers:
       dequal:
         specifier: ^2.0.2
         version: 2.0.2
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/audio':
         specifier: workspace:^
@@ -730,6 +765,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -746,6 +784,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -831,6 +872,9 @@ importers:
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.0.2)
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -847,12 +891,19 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
         version: link:../preview
 
   js/column:
+    dependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -866,7 +917,7 @@ importers:
 
   js/component-test:
     devDependencies:
-      '@gradio/build':
+      '@self/build':
         specifier: workspace:^
         version: link:../build
       '@sveltejs/adapter-auto':
@@ -877,6 +928,10 @@ importers:
         version: 2.5.20(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38)))
 
   js/core:
+    dependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/accordion':
         specifier: workspace:^
@@ -1094,6 +1149,9 @@ importers:
       marked:
         specifier: ^12.0.0
         version: 12.0.0
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1116,6 +1174,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1135,6 +1196,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1151,6 +1215,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1170,6 +1237,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1189,6 +1259,9 @@ importers:
       '@zerodevx/svelte-json-view':
         specifier: ^1.0.7
         version: 1.0.7(svelte@4.2.15)
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1217,6 +1290,9 @@ importers:
       '@gradio/wasm':
         specifier: workspace:^
         version: link:../wasm
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1251,6 +1327,9 @@ importers:
       dequal:
         specifier: ^2.0.2
         version: 2.0.2
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1267,6 +1346,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1301,12 +1383,19 @@ importers:
       dequal:
         specifier: ^2.0.2
         version: 2.0.2
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
         version: link:../preview
 
   js/group:
+    dependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1329,6 +1418,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1348,12 +1440,19 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
         version: link:../preview
 
-  js/icons: {}
+  js/icons:
+    dependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
 
   js/image:
     dependencies:
@@ -1387,6 +1486,9 @@ importers:
       resize-observer-polyfill:
         specifier: ^1.5.1
         version: 1.5.1
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1424,6 +1526,9 @@ importers:
       pixi.js:
         specifier: ^7.3.2
         version: 7.3.2(@pixi/utils@7.3.2)
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
       tinycolor2:
         specifier: ^1.6.0
         version: 1.6.0
@@ -1446,6 +1551,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1465,6 +1573,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1475,21 +1586,21 @@ importers:
       '@gradio/atoms':
         specifier: workspace:^
         version: link:../atoms
-      '@gradio/build':
-        specifier: workspace:^
-        version: link:../build
       '@gradio/core':
         specifier: workspace:^
         version: link:../core
-      '@gradio/spa':
-        specifier: workspace:^
-        version: link:../spa
       '@gradio/theme':
         specifier: workspace:^
         version: link:../theme
       '@gradio/wasm':
         specifier: workspace:^
         version: link:../wasm
+      '@self/build':
+        specifier: workspace:^
+        version: link:../build
+      '@self/spa':
+        specifier: workspace:^
+        version: link:../spa
       gradio:
         specifier: workspace:^
         version: link:../../gradio
@@ -1538,6 +1649,9 @@ importers:
       prismjs:
         specifier: 1.29.0
         version: 1.29.0
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1581,6 +1695,9 @@ importers:
       gsplat:
         specifier: ^1.0.5
         version: 1.0.5
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1612,6 +1729,9 @@ importers:
       '@gradio/video':
         specifier: workspace:^
         version: link:../video
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1634,6 +1754,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
       vega:
         specifier: ^5.23.0
         version: 5.23.0
@@ -1659,6 +1782,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1678,6 +1804,9 @@ importers:
       prismjs:
         specifier: ^1.29.0
         version: 1.29.0
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1709,6 +1838,9 @@ importers:
       plotly.js-dist-min:
         specifier: ^2.10.1
         version: 2.10.1
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
       vega:
         specifier: ^5.23.0
         version: 5.23.0
@@ -1776,6 +1908,10 @@ importers:
       yootils:
         specifier: ^0.3.1
         version: 0.3.1
+    optionalDependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@rollup/plugin-commonjs':
         specifier: ^25.0.4
@@ -1806,12 +1942,19 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
         version: link:../preview
 
   js/row:
+    dependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1837,6 +1980,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1874,6 +2020,9 @@ importers:
       resize-observer-polyfill:
         specifier: ^1.5.1
         version: 1.5.1
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1893,6 +2042,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1909,16 +2061,20 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
         version: link:../preview
 
   js/spa:
+    dependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
-      '@gradio/build':
-        specifier: workspace:^
-        version: link:../build
       '@gradio/client':
         specifier: workspace:^
         version: link:../../client/js
@@ -1934,6 +2090,9 @@ importers:
       '@huggingface/space-header':
         specifier: ^1.0.3
         version: 1.0.3
+      '@self/build':
+        specifier: workspace:^
+        version: link:../build
       '@types/eventsource':
         specifier: ^1.1.15
         version: 1.1.15
@@ -1941,7 +2100,11 @@ importers:
         specifier: ^7.0.3
         version: 7.0.3
 
-  js/state: {}
+  js/state:
+    dependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
 
   js/statustracker:
     dependencies:
@@ -1960,6 +2123,9 @@ importers:
       dompurify:
         specifier: ^3.0.3
         version: 3.0.3
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1978,6 +2144,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1988,6 +2157,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -2007,24 +2179,38 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
         version: link:../preview
 
-  js/theme: {}
+  js/theme:
+    dependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
 
   js/timer:
     dependencies:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
         version: link:../preview
 
-  js/tooltip: {}
+  js/tooltip:
+    dependencies:
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
 
   js/tootils:
     dependencies:
@@ -2034,6 +2220,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
 
   js/upload:
     dependencies:
@@ -2052,6 +2241,9 @@ importers:
       '@gradio/wasm':
         specifier: workspace:^
         version: link:../wasm
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
 
   js/uploadbutton:
     dependencies:
@@ -2067,6 +2259,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -2116,6 +2311,9 @@ importers:
       mrmime:
         specifier: ^2.0.0
         version: 2.0.0
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -2129,10 +2327,12 @@ importers:
       path-browserify:
         specifier: ^1.0.1
         version: 1.0.1
-    devDependencies:
       pyodide:
         specifier: 0.26.1
         version: 0.26.1(bufferutil@4.0.7)
+      svelte:
+        specifier: ^4.0.0
+        version: 4.2.15
 
 packages:
 
@@ -3526,10 +3726,6 @@ packages:
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/resolve-uri@3.1.1':
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -3545,9 +3741,6 @@ packages:
   '@jridgewell/sourcemap-codec@1.4.15':
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
-  '@jridgewell/trace-mapping@0.3.20':
-    resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
-
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
@@ -4498,6 +4691,13 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
 
+  '@sveltejs/package@2.3.4':
+    resolution: {integrity: sha512-A56rLEBVI7DhcfCmjy+D5oya4be/N+kBKX69H0aCkvhgOiAXroqVzeNhWiNiGHhhec3NvpGjtjKI5c4+JAlTZg==}
+    engines: {node: ^16.14 || >=18}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
+
   '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
     resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
     engines: {node: ^18.0.0 || >=20}
@@ -11230,7 +11430,7 @@ snapshots:
 
   '@inquirer/core@7.1.0':
     dependencies:
-      '@inquirer/type': 1.2.1
+      '@inquirer/type': 1.3.1
       '@types/mute-stream': 0.0.4
       '@types/node': 20.12.8
       '@types/wrap-ansi': 3.0.0
@@ -11297,7 +11497,7 @@ snapshots:
     dependencies:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.20
+      '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
@@ -11305,8 +11505,6 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@jridgewell/resolve-uri@3.1.1': {}
-
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.1.2': {}
@@ -11315,11 +11513,6 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.4.15': {}
 
-  '@jridgewell/trace-mapping@0.3.20':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -12707,6 +12900,17 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38))
 
+  '@sveltejs/package@2.3.4(patch_hash=flygqco6z3nrhhrndh6d2cl72q)(svelte@4.2.15)(typescript@5.5.4)':
+    dependencies:
+      chokidar: 3.6.0
+      kleur: 4.1.5
+      sade: 1.8.1
+      semver: 7.6.0
+      svelte: 4.2.15
+      svelte2tsx: 0.7.7(svelte@4.2.15)(typescript@5.5.4)
+    transitivePeerDependencies:
+      - typescript
+
   '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38)))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38)))
diff --git a/scripts/build_lite.sh b/scripts/build_lite.sh
index cade7b3a58..ecbbc34f25 100755
--- a/scripts/build_lite.sh
+++ b/scripts/build_lite.sh
@@ -8,4 +8,4 @@ pnpm_required
 rm -rf gradio/_frontend_code
 rm -rf gradio/templates/*
 
-pnpm --filter @gradio/lite build
+pnpm build:lite
diff --git a/scripts/run_lite.sh b/scripts/run_lite.sh
index 5bfc344822..0d8d6bfd45 100755
--- a/scripts/run_lite.sh
+++ b/scripts/run_lite.sh
@@ -26,4 +26,4 @@ fi
 
 pnpm --filter @gradio/client build
 
-pnpm --filter @gradio/lite dev
+pnpm dev:lite
diff --git a/testing-guidelines/playwright.md b/testing-guidelines/playwright.md
index e22fc111cd..aa93af14b6 100644
--- a/testing-guidelines/playwright.md
+++ b/testing-guidelines/playwright.md
@@ -98,6 +98,6 @@ npx playwright codegen <url>
 
 This will open up a Chromium session where each interaction with the page will be converted into a playwright accessor.
 
-NOTE: Only copy the `test("test-name", ....)` not the imports. For playwright to work when running in the gradio CI, `test` and `expect` need to be imported from `@gradio/tootils`.
+NOTE: Only copy the `test("test-name", ....)` not the imports. For playwright to work when running in the gradio CI, `test` and `expect` need to be imported from `@self/tootils`.
 
 ![code_gen_demo](https://github.com/gradio-app/gradio/assets/41651716/96003fba-d17c-46b9-9c6d-35218fbdfb6f)
diff --git a/tsconfig.json b/tsconfig.json
index 2eba570ed1..eb62f6971a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
-		"moduleResolution": "node",
-		"module": "ES2020",
+		"moduleResolution": "Bundler",
+		"module": "ESNext",
 		"lib": ["es2020", "DOM", "dom.iterable"],
 		"target": "es2020",
 		/**
@@ -35,12 +35,10 @@
 	},
 	"exclude": [
 		"**/_website/**/*",
-		"**/component-test/**/*",
 		"**/dist/**/*",
 		"**/public/**/*",
 		"**/.config/**/*",
 		"**/*.test.ts",
-		"**/dist",
 		".github/**/*",
 		"**/demo/**/*",
 		"**/gradio/**/*",
@@ -54,13 +52,17 @@
 		"client/js/**",
 		"**/vite.config*",
 		".changeset/*.cjs",
-		"**/storybook-static/**/*"
+		"**/storybook-static/**/*",
+		"**/build/out/**/*",
+		"**/component-test/**/*",
+		"**/js/wasm/src/webworker/**/*"
 	],
 	"include": [
 		"**/*.d.ts",
 		"**/*.js",
 		"**/*.ts",
 		"**/*.svelte",
-		"client/js/**/*"
+		"client/js/**/*",
+		"!**/dist/**/*"
 	]
 }