add inspector stub and make config reactive

Author: dominikg

packages/svelte/src/toolbar/ToolBar.svelte

@@ -1,25 +1,13 @@
 <script>
 	import { draggable } from '@neodrag/svelte';
 	import Icon from './Icon.svelte';
-	import { configure, getConfig } from 'svelte/toolbar';
 
+	let {
+		/** @type import('./public.d.ts').ResolvedConfig */
+		config
+	} = $props();
 	let open = $state(true); // todo change this to false
 
-	configure({
-		tools: [
-			{ name: 'state' },
-			{
-				name: 'inspector',
-				activate: () => {
-					console.log('inspector activated');
-				}
-			},
-			{ name: 'a11y' },
-			{ name: 'config' }
-		]
-	});
-
-	let config = getConfig();
 	/** @type {string[]} */
 	let active_tool_names = $state([]);
 

packages/svelte/src/toolbar/configure.js renamed to packages/svelte/src/toolbar/configure.svelte.js

@@ -2,14 +2,14 @@
  * toolbar config
  * @type {import('./public.d.ts').ResolvedConfig}
  */
-const config = {
+const config = $state({
 	tools: []
-};
+});
 
 /**
  * @param  {Partial<import('./public.d.ts').Config>} options
  */
-export function configure(options) {
+export function configureSvelte(options) {
 	for (const [key, value] of Object.entries(options)) {
 		if (key === 'tools') {
 			continue;
@@ -40,6 +40,5 @@ export function configure(options) {
  * @return {import('./public.d.ts').ResolvedConfig}
  */
 export function getConfig() {
-	// TODO clone to avoid direct manipulation
 	return config;
 }

packages/svelte/src/toolbar/index.js

@@ -1,3 +1,8 @@
-export { default as ToolBar } from './ToolBar.svelte';
-export * from './configure.js';
-export { mountUI as default } from './runtime.js';
+import {mountUI} from './runtime.svelte.js';
+import { configureSvelte } from './configure.svelte.js';
+import { svelte_inspector } from './tools/inspector/index.js';
+export * from './configure.svelte.js';
+
+
+configureSvelte({tools:[svelte_inspector]});
+mountUI();

packages/svelte/src/toolbar/runtime.js renamed to packages/svelte/src/toolbar/runtime.svelte.js

@@ -1,5 +1,6 @@
 import ToolBar from './ToolBar.svelte';
 import { mount } from 'svelte';
+import {getConfig} from './configure.svelte.js';
 
 export function mountUI() {
 	if(typeof window !== 'undefined') {
@@ -8,10 +9,12 @@ export function mountUI() {
 			console.debug('svelte-toolbar-host already exists, skipping');
 			return
 		}
+		const props = $state({config: getConfig()})
+
 		const el = document.createElement('div');
 		el.setAttribute('id', id);
 		// appending to documentElement adds it outside of body
 		document.documentElement.appendChild(el);
-		mount(ToolBar, { target: el });
+		mount(ToolBar, { target: el,props });
 	}
 }