@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-utils': minor
+'@tanstack/svelte-devtools': patch
+---
+
+Align Svelte panel construction and plugin metadata with the other framework factories, use compiled Svelte components to own panel and no-op lifecycles, forward shared plugin props through the Svelte adapter, and update mounted component props without resetting their state.
@@ -190,15 +190,17 @@ This client is a singleton (`devtoolsEventClient`) used by both the core shell a
 Each framework adapter is a thin wrapper that bridges its framework's component model to the core Solid.js shell. The pattern is the same across all adapters:
 
 1. **Creates a `TanStackDevtoolsCore` instance** with the user's plugins and config.
-2. **Mounts it to a DOM element** using the framework's lifecycle hooks (`useEffect` in React, `onMounted` in Vue, `onMount` in Solid).
-3. **Converts framework-specific plugin definitions** into the core's DOM-based `render(el, theme)` interface. Each adapter defines its own plugin type (e.g. `TanStackDevtoolsReactPlugin`) that accepts framework-native components, then wraps them in a `render` callback that the core calls with a target DOM element and the current theme.
-4. **Uses the framework's portal/teleport mechanism** to render plugin components into the core's DOM containers:
+2. **Mounts it to a DOM element** using the framework's lifecycle APIs, such as `useEffect` in React, `onMounted` in Vue, `$effect` in Svelte, and `onMount` in Solid.
+3. **Converts framework-specific plugin definitions** into the core's DOM-based `render(el, props)` interface. Each adapter defines its own plugin type (e.g. `TanStackDevtoolsReactPlugin`) that accepts framework-native components, then wraps them in a `render` callback that the core calls with a target DOM element and `{ theme, devtoolsOpen }`.
+4. **Uses the framework's rendering API** to render plugin components into the core's DOM containers:
    - **React** -- `createPortal()` from `react-dom`
    - **Vue** -- `<Teleport :to="'#' + plugin.id" />`
    - **Solid** -- `<Portal mount={el} />`
    - **Preact** -- Same portal pattern as React
+   - **Svelte** -- `mount(component, { target: el, props })`
+   - **Angular** -- `createComponent()` with the container's environment injector
 
-The key insight: the core shell is always Solid.js, but your plugins run in **your** framework. A React plugin is a real React component rendered by React's `createPortal` into a DOM element that the Solid.js shell created. A Vue plugin is a real Vue component rendered by Vue's `<Teleport>`. The adapters bridge this gap so you never need to think about Solid.js unless you want to.
+The key insight: the core shell is always Solid.js, but your plugins run in **your** framework. Each adapter receives the same plugin props and renders a native framework component into a DOM element created by the Solid.js shell. The adapters bridge this gap so you never need to think about Solid.js unless you want to.
 
 ### What an adapter does NOT do
 
 
@@ -77,7 +77,7 @@ const [MyPlugin, NoOpPlugin] = createReactPlugin({
 
 The returned tuple contains two factory functions:
 
-- **`Plugin()`** -- returns a plugin object with `name`, `id`, `defaultOpen`, and a `render` function that renders your `Component` with the current theme.
+- **`Plugin()`** -- returns a plugin object with `name`, `id`, `defaultOpen`, and a `render` function that renders your `Component` with the current plugin props.
 - **`NoOpPlugin()`** -- returns a plugin object with the same metadata but a `render` function that renders an empty fragment. Use this for production builds where you want to strip devtools out.
 
 A common pattern for tree-shaking:
@@ -90,15 +90,15 @@ const ActivePlugin = process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlu
 
 ### createReactPanel
 
-For library authors shipping a class-based devtools core that exposes `mount(el, theme)` and `unmount()` methods. This factory wraps that class in a React component that handles mounting into a `div`, passing the theme, and cleaning up on unmount.
+For library authors shipping a class-based devtools core that exposes `mount(el, props)` and `unmount()` methods. This factory wraps that class in a React component that handles mounting into a `div`, passing the complete plugin props, and cleaning up on unmount.
 
 **Signature:**
 
 ```ts
 function createReactPanel<
-  TComponentProps extends DevtoolsPanelProps | undefined,
+  TComponentProps extends DevtoolsPanelProps,
   TCoreDevtoolsClass extends {
-    mount: (el: HTMLElement, theme: 'light' | 'dark') => void
+    mount: (el: HTMLElement, props: DevtoolsPanelProps) => void
     unmount: () => void
   },
 >(CoreClass: new () => TCoreDevtoolsClass): readonly [Panel, NoOpPanel]
@@ -107,10 +107,13 @@ function createReactPanel<
 **Usage:**
 
 ```tsx
-import { createReactPanel } from '@tanstack/devtools-utils/react'
+import {
+  createReactPanel,
+  type DevtoolsPanelProps,
+} from '@tanstack/devtools-utils/react'
 
 class MyDevtoolsCore {
-  mount(el: HTMLElement, theme: 'light' | 'dark') {
+  mount(el: HTMLElement, props: DevtoolsPanelProps) {
     // render your devtools UI into el
   }
   unmount() {
@@ -129,9 +132,9 @@ const [MyPlugin, NoOpPlugin] = createReactPlugin({
 
 The returned `Panel` component:
 - Creates a `div` with `height: 100%` and stores a ref to it.
-- Instantiates `CoreClass` on mount and calls `core.mount(el, theme)`.
+- Instantiates `CoreClass` on mount and calls `core.mount(el, props)`.
 - Calls `core.unmount()` on cleanup.
-- Re-mounts when the `theme` prop changes.
+- Re-mounts when the plugin props change.
 
 `NoOpPanel` renders an empty fragment and does nothing.
 
@@ -262,14 +265,18 @@ The panel component accepts `theme` and `devtoolsProps` as props. It mounts the
 
 ### createSveltePlugin
 
-The Svelte factory takes a `name` string and a Svelte component as separate arguments, similar to the Vue API.
+The Svelte factory takes the plugin metadata and Svelte component in a configuration object.
 
 **Signature:**
 
 ```ts
 function createSveltePlugin<TComponentProps extends Record<string, any>>(
-  name: string,
-  component: Component<TComponentProps>,
+  config: {
+    name: string
+    id?: string
+    defaultOpen?: boolean
+    Component: Component<TComponentProps>
+  },
 ): readonly [Plugin, NoOpPlugin]
 ```
 
@@ -279,13 +286,18 @@ function createSveltePlugin<TComponentProps extends Record<string, any>>(
 import { createSveltePlugin } from '@tanstack/devtools-utils/svelte'
 import MyStorePanel from './MyStorePanel.svelte'
 
-const [MyPlugin, NoOpPlugin] = createSveltePlugin('My Store', MyStorePanel)
+const [MyPlugin, NoOpPlugin] = createSveltePlugin({
+  Component: MyStorePanel,
+  name: 'My Store',
+  id: 'my-store',
+  defaultOpen: true,
+})
 ```
 
 The returned functions:
 
-- **`Plugin(props?)`** -- returns `{ name, component, props }` where `component` is your Svelte component.
-- **`NoOpPlugin(props?)`** -- returns `{ name, component: NoOpComponent, props }` where the component renders nothing visible.
+- **`Plugin(props?)`** -- returns the plugin metadata, component, and forwarded props.
+- **`NoOpPlugin(props?)`** -- preserves the plugin metadata and props but replaces the component with one that renders nothing visible.
 
 Both accept an optional `props` object that gets forwarded to the component on mount.
 
@@ -299,7 +311,7 @@ import { createSveltePanel } from '@tanstack/devtools-utils/svelte'
 const [MyPanel, NoOpPanel] = createSveltePanel(MyDevtoolsCore)
 ```
 
-The panel accepts `theme` and `devtoolsProps` props. It creates a `div` element, mounts the core instance into it, and calls `unmount()` on cleanup.
+The panel constructs the core without arguments. It creates a `div` element, passes the complete `{ theme, devtoolsOpen }` plugin props to `mount()`, and registers `unmount()` with Svelte's component cleanup lifecycle.
 
 ## Angular
 
 
@@ -28,7 +28,7 @@ Each plugin describes a tab in the devtools panel:
 ```ts
 type PluginRender =
   | JSX.Element
-  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)
+  | ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)
 
 type TanStackDevtoolsReactPlugin = {
   id?: string
@@ -38,7 +38,7 @@ type TanStackDevtoolsReactPlugin = {
 }
 ```
 
-- **`render`** can be a JSX element (simplest -- just pass `<YourPanel />`) or a function that receives the container element and current theme. The function form is useful when you need to access the raw DOM element or respond to theme changes.
+- **`render`** can be a JSX element (simplest -- just pass `<YourPanel />`) or a function that receives the container element and current `{ theme, devtoolsOpen }` props. The function form is useful when you need to access the raw DOM element or respond to plugin state changes.
 - **`name`** works the same way -- use a string for plain text, or JSX / a function for custom tab titles.
 - **`id`** is an optional unique identifier. If omitted, it is generated from the name.
 - **`defaultOpen`** marks the plugin as initially active when no other plugins are open.
 
@@ -38,14 +38,16 @@ type TanStackDevtoolsSveltePlugin = {
 | Field | Type | Description |
 | --- | --- | --- |
 | `id` | `string` (optional) | Unique identifier for the plugin. |
-| `component` | `Component<any>` | The Svelte component to render as the plugin panel content. |
-| `name` | `string \| Component<any>` | Display name for the tab title. Can be a plain string or a Svelte component for custom rendering. |
-| `props` | `Record<string, any>` (optional) | Additional props passed to the plugin component on mount. |
+| `component` | `Component<any>` | The Svelte component to render as the plugin panel content. It receives the shared `theme` and `devtoolsOpen` props. |
+| `name` | `string \| Component<any>` | Display name for the tab title. A custom Svelte component receives the same merged plugin props. |
+| `props` | `Record<string, any>` (optional) | Additional props merged with the shared plugin props when the component mounts. |
 | `defaultOpen` | `boolean` (optional) | Whether this plugin tab should be open by default. |
 
 ## Key Difference from Other Frameworks
 
-The Svelte adapter uses `component` (a Svelte component reference) instead of `render` (a JSX element) in plugin definitions. Props are provided through the `props` field and passed to the component via Svelte's `mount()` API, rather than being embedded directly in a JSX expression.
+The Svelte adapter uses `component` (a Svelte component reference) instead of `render` (a JSX element) in plugin definitions. It passes `{ theme, devtoolsOpen, ...plugin.props }` to the component through Svelte's `mount()` API.
+
+When the core renders a plugin again, the adapter updates the existing Svelte host with the latest component and props. If the component identity is unchanged, its state and lifecycle remain intact. The adapter unmounts the host when the plugin is destroyed or the Devtools instance shuts down.
 
 ```svelte
 <!-- Svelte: pass component reference + props -->
 
@@ -48,6 +48,6 @@ Import the desired devtools and provide them to the `TanStackDevtools` component
 <TanStackDevtools {plugins} />
 ```
 
-> Note: The Svelte adapter uses `component` (a Svelte component reference) instead of `render` (a JSX element) in plugin definitions. Additional props can be provided via the `props` field and are passed to the component on mount.
+> Note: The Svelte adapter uses `component` (a Svelte component reference) instead of `render` (a JSX element) in plugin definitions. Components receive the shared `theme` and `devtoolsOpen` props. Additional values from the plugin's `props` field are merged into the same object when the component mounts.
 
 Finally, add any additional configuration you desire to the `TanStackDevtools` component. More information can be found under the [TanStack Devtools Configuration](../../configuration) section.