@viamrobotics/motion-tools 1.34.3 → 1.34.5

package/dist/components/App.svelte

@@ -30,7 +30,6 @@
 	import HoveredEntities from './hover/HoveredEntities.svelte'
 	import AddFrames from './overlay/AddFrames.svelte'
 	import LiveUpdatesBanner from './overlay/LiveUpdatesBanner.svelte'
-	import Logs from './overlay/Logs.svelte'
 	import ArmPositions from './overlay/widgets/ArmPositions.svelte'
 	import Camera from './overlay/widgets/Camera.svelte'
 	import FramePov from './overlay/widgets/FramePov.svelte'
@@ -173,7 +172,6 @@
 				<PortalTarget id="dom" />
 
 				<Settings {settingsTabs} />
-				<Logs />
 				<AddFrames />
 			</div>
 		</SceneProviders>

package/dist/components/SceneProviders.svelte

@@ -13,7 +13,6 @@
 	import { provideGeometries } from '../hooks/useGeometries.svelte'
 	import { provideInheritedInvisible } from '../hooks/useInheritedInvisible.svelte'
 	import { provideLinkedEntities } from '../hooks/useLinked.svelte'
-	import { provideLogs } from '../hooks/useLogs.svelte'
 	import { usePartID } from '../hooks/usePartID.svelte'
 	import { providePointcloudObjects } from '../hooks/usePointcloudObjects.svelte'
 	import { providePointclouds } from '../hooks/usePointclouds.svelte'
@@ -30,7 +29,6 @@
 	const partID = usePartID()
 
 	provideTransformControls()
-	provideLogs()
 
 	provideHierarchy()
 	provideWorldMatrix()

package/dist/hooks/useFrames.svelte.js

@@ -5,11 +5,11 @@ import { getContext, setContext, untrack } from 'svelte';
 import { Matrix4 } from 'three';
 import { resourceNameToColor, subtypeToColor } from '../color';
 import { hierarchy, traits, useWorld } from '../ecs';
+import { useLogs } from '../plugins';
 import { createPose, isPoseEqual, poseToMatrix } from '../transform';
 import { useConfigFrames } from './useConfigFrames.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
 import { useFrameEditSession } from './useFrameEditSession.svelte';
-import { useLogs } from './useLogs.svelte';
 import { usePartConfig } from './usePartConfig.svelte';
 import { useResourceByName } from './useResourceByName.svelte';
 const key = Symbol('frames-context');

package/dist/hooks/useGeometries.svelte.js

@@ -7,9 +7,9 @@ import { resourceColors } from '../color';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { hierarchy, traits, useWorld } from '../ecs';
 import { updateGeometryTrait } from '../ecs/traits';
+import { useLogs } from '../plugins';
 import { createPose, poseToMatrix } from '../transform';
 import { useEnvironment } from './useEnvironment.svelte';
-import { useLogs } from './useLogs.svelte';
 import { useResourceByName } from './useResourceByName.svelte';
 import { RefreshRates, useSettings } from './useSettings.svelte';
 const key = Symbol('geometries-context');

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -6,9 +6,9 @@ import { ColorFormat } from '../buf/draw/v1/metadata_pb';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { hierarchy, traits, useWorld } from '../ecs';
 import { parsePcdInWorker } from '../lib';
+import { useLogs } from '../plugins';
 import { createPose } from '../transform';
 import { useEnvironment } from './useEnvironment.svelte';
-import { useLogs } from './useLogs.svelte';
 import { RefreshRates, useSettings } from './useSettings.svelte';
 const key = Symbol('pointcloud-object-context');
 export const providePointcloudObjects = (partID) => {

package/dist/hooks/usePointclouds.svelte.js

@@ -6,8 +6,8 @@ import { ColorFormat } from '../buf/draw/v1/metadata_pb';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { hierarchy, traits, useWorld } from '../ecs';
 import { parsePcdInWorker } from '../loaders/pcd';
+import { useLogs } from '../plugins';
 import { useEnvironment } from './useEnvironment.svelte';
-import { useLogs } from './useLogs.svelte';
 import { RefreshRates, useSettings } from './useSettings.svelte';
 const key = Symbol('pointcloud-context');
 export const providePointclouds = (partID) => {

package/dist/hooks/usePose.svelte.js

@@ -2,9 +2,9 @@ import { commonApi, MachineConnectionEvent, Pose } from '@viamrobotics/sdk';
 import { createRobotQuery, useConnectionStatus, useRobotClient } from '@viamrobotics/svelte-sdk';
 import { untrack } from 'svelte';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
+import { useLogs } from '../plugins';
 import { useEnvironment } from './useEnvironment.svelte';
 import { useFrames } from './useFrames.svelte';
-import { useLogs } from './useLogs.svelte';
 import { usePartID } from './usePartID.svelte';
 import { useRefetchPoses } from './useRefetchPoses';
 import { useResourceByName } from './useResourceByName.svelte';

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /** @deprecated MotionTools has been renamed to Visualizer. This export will be removed in v2. */
 export { default as MotionTools } from './components/App.svelte';
 export { default as Visualizer } from './components/App.svelte';
+export { useSettings } from './hooks/useSettings.svelte';
 export { default as PCD } from './components/PCD.svelte';
 export * as relations from './ecs/relations';
 export * as traits from './ecs/traits';

package/dist/index.js

@@ -1,6 +1,7 @@
 /** @deprecated MotionTools has been renamed to Visualizer. This export will be removed in v2. */
 export { default as MotionTools } from './components/App.svelte';
 export { default as Visualizer } from './components/App.svelte';
+export { useSettings } from './hooks/useSettings.svelte';
 // Plugins
 export { default as PCD } from './components/PCD.svelte';
 // ECS

package/dist/plugins/DrawService/useDrawAPI.svelte.js

@@ -11,7 +11,7 @@ import { asRGB, STRIDE } from '../../buffer';
 import { hierarchy, traits, useWorld } from '../../ecs';
 import { createBox, createCapsule, createSphere } from '../../geometry';
 import { useCameraControls } from '../../hooks/useControls.svelte';
-import { useLogs } from '../../hooks/useLogs.svelte';
+import { useLogs } from '..';
 import { parsePlyInput } from '../../ply';
 import { createPose, createPoseFromFrame, poseToMatrix } from '../../transform';
 import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';

package/dist/plugins/Logs/Logs.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import { Portal } from '@threlte/extras'
+	import { PersistedState } from 'runed'
+
+	import DashboardButton from '../../components/overlay/dashboard/Button.svelte'
+	import FloatingPanel from '../../components/overlay/FloatingPanel.svelte'
+
+	import { provideLogs } from './useLogs.svelte'
+
+	const logs = provideLogs()
+
+	const isOpen = new PersistedState('logs-is-open', false)
+
+	let levels = new PersistedState('logs-selected-levels', {
+		info: true,
+		warn: true,
+		error: true,
+	})
+</script>
+
+<Portal id="dashboard">
+	<fieldset class="relative">
+		<DashboardButton
+			active={isOpen.current}
+			icon="article"
+			description="Logs"
+			onclick={() => {
+				isOpen.current = !isOpen.current
+			}}
+		/>
+		{#if logs.warnings.length > 0}
+			<span
+				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 w-4 rounded-full bg-yellow-700 text-center text-[10px] text-white"
+			>
+				{logs.warnings.length}
+			</span>
+		{/if}
+
+		{#if logs.errors.length > 0}
+			<span
+				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 rounded-full bg-red-700 px-1.25 text-center text-[10px] text-white"
+			>
+				{logs.errors.length}
+			</span>
+		{/if}
+	</fieldset>
+</Portal>
+
+<Portal id="dom">
+	<FloatingPanel
+		title="Logs"
+		bind:isOpen={isOpen.current}
+		defaultSize={{ width: 240, height: 315 }}
+		resizable
+	>
+		<div class="flex h-full flex-col">
+			<div class="flex gap-1 px-3 py-2">
+				<button
+					type="button"
+					class={[
+						'chip border px-2',
+						{
+							'border-danger-dark bg-danger-dark text-white hover:border-red-700 hover:bg-red-700':
+								levels.current.error,
+							'bg-light hover:bg-ghost-light hover:border-light border-light text-subtle-1':
+								!levels.current.error,
+						},
+					]}
+					onclick={() => {
+						levels.current.error = !levels.current.error
+					}}
+				>
+					error
+				</button>
+
+				<button
+					type="button"
+					class={[
+						'chip border',
+						{
+							'border-amber-400 bg-amber-400 text-white hover:border-amber-500 hover:bg-amber-500':
+								levels.current.warn,
+							'bg-light hover:bg-ghost-light hover:border-light border-light text-subtle-1':
+								!levels.current.warn,
+						},
+					]}
+					onclick={() => {
+						levels.current.warn = !levels.current.warn
+					}}
+				>
+					warn
+				</button>
+
+				<button
+					type="button"
+					class={[
+						'chip border',
+						{
+							'border-blue-400 bg-blue-400 text-white hover:border-blue-500 hover:bg-blue-500':
+								levels.current.info,
+							'bg-light hover:bg-ghost-light hover:border-light border-light text-subtle-1':
+								!levels.current.info,
+						},
+					]}
+					onclick={() => {
+						levels.current.info = !levels.current.info
+					}}
+				>
+					info
+				</button>
+			</div>
+
+			<div class="flex flex-col gap-2 overflow-auto px-3 pb-3 text-xs">
+				{#each logs.current as log (log.uuid)}
+					{#if levels.current[log.level]}
+						<div>
+							<div class="flex flex-wrap items-center gap-1.5">
+								<div
+									class={[
+										'h-2 w-2 rounded-full',
+										{
+											'bg-danger-dark': log.level === 'error',
+											'bg-amber-300': log.level === 'warn',
+											'bg-blue-400': log.level === 'info',
+										},
+									]}
+								></div>
+								<div class="text-subtle-2">{log.timestamp}</div>
+							</div>
+							<div>
+								{#if log.count > 1}
+									<span class="mr-1 rounded bg-green-700 px-1 py-0.5 text-xs text-white">
+										{log.count}
+									</span>
+								{/if}
+								{log.message}
+							</div>
+						</div>
+					{/if}
+				{:else}
+					No logs
+				{/each}
+			</div>
+		</div>
+	</FloatingPanel>
+</Portal>

package/dist/{hooks → plugins/Logs}/useLogs.svelte.d.ts

@@ -12,6 +12,6 @@ interface Context {
     warnings: Log[];
     add(message: string, level?: Level): void;
 }
-export declare const provideLogs: () => void;
+export declare const provideLogs: () => Context;
 export declare const useLogs: () => Context;
 export {};

package/dist/{hooks → plugins/Logs}/useLogs.svelte.js

@@ -1,7 +1,8 @@
-import { getContext, setContext, untrack } from 'svelte';
+import { untrack } from 'svelte';
 import { MathUtils } from 'three';
-const key = Symbol('logs-context');
 const MAX_LOGS = 200;
+// Logs is a singleton. We only have one logger per app and we need to access it anywhere.
+let context;
 export const provideLogs = () => {
     // Plain insertion-ordered Map keyed by `${level}|${timestamp}|${message}`
     // drives storage; a single `$state` version counter drives reactivity.
@@ -23,7 +24,7 @@ export const provideLogs = () => {
     });
     const errors = $derived(all.filter((l) => l.level === 'error'));
     const warnings = $derived(all.filter((l) => l.level === 'warn'));
-    setContext(key, {
+    context = {
         get current() {
             return all;
         },
@@ -58,8 +59,15 @@ export const provideLogs = () => {
                 version++;
             });
         },
-    });
+    };
+    return context;
 };
 export const useLogs = () => {
-    return getContext(key);
+    // return a no-op context if the plugin isn't installed
+    return (context ?? {
+        current: [],
+        errors: [],
+        warnings: [],
+        add: () => undefined,
+    });
 };

package/dist/plugins/Selection/Ellipse.svelte

@@ -16,11 +16,12 @@
 	import { getTriangleBoxesFromIndices, getTriangleFromIndex, raycast } from './utils'
 
 	interface Props {
-		active?: boolean
+		enabled?: boolean
+		selecting?: boolean
 		debug?: boolean
 	}
 
-	let { active = false, debug = false }: Props = $props()
+	let { enabled = false, selecting = false, debug = false }: Props = $props()
 
 	const world = useWorld()
 	const controls = useCameraControls()
@@ -37,7 +38,7 @@
 	let drawing = false
 
 	const onpointerdown = (event: PointerEvent) => {
-		if (!event.shiftKey || !active) return
+		if (!selecting && !event.shiftKey) return
 
 		const { x, y } = raycast(event, camera.current)
 
@@ -61,7 +62,7 @@
 	}
 
 	const onpointermove = (event: PointerEvent) => {
-		if (!drawing || !active) return
+		if (!drawing) return
 
 		let ellipse = world.query(selectionTraits.Ellipse).at(-1)
 
@@ -129,13 +130,13 @@
 	}
 
 	const onpointerleave = () => {
-		if (!drawing || !active) return
+		if (!drawing) return
 
 		onpointerup()
 	}
 
 	const onpointerup = () => {
-		if (!drawing || !active) return
+		if (!drawing) return
 
 		drawing = false
 
@@ -244,6 +245,8 @@
 	}
 
 	$effect(() => {
+		if (!enabled) return
+
 		globalThis.addEventListener('keydown', onkeydown)
 		globalThis.addEventListener('keyup', onkeyup)
 		dom.addEventListener('pointerdown', onpointerdown)
@@ -263,26 +266,6 @@
 
 	const ellipses = useQuery(selectionTraits.Ellipse)
 
-	$effect(() => {
-		if (!controls.current) return
-
-		const currentControls = controls.current
-
-		if ('minPolarAngle' in currentControls) {
-			const { minPolarAngle, maxPolarAngle } = currentControls
-
-			// Locks the camera to top down while this component is mounted
-			currentControls.polarAngle = 0
-			currentControls.minPolarAngle = 0
-			currentControls.maxPolarAngle = 0
-
-			return () => {
-				currentControls.minPolarAngle = minPolarAngle
-				currentControls.maxPolarAngle = maxPolarAngle
-			}
-		}
-	})
-
 	// On unmount, destroy all lasso related entities
 	$effect(() => {
 		return () => {

package/dist/plugins/Selection/Ellipse.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
-    active?: boolean;
+    enabled?: boolean;
+    selecting?: boolean;
     debug?: boolean;
 }
 declare const Ellipse: import("svelte").Component<Props, {}, "">;

package/dist/plugins/Selection/Lasso.svelte

@@ -16,11 +16,12 @@
 	import { getTriangleBoxesFromIndices, getTriangleFromIndex, raycast } from './utils'
 
 	interface Props {
-		active?: boolean
+		enabled?: boolean
+		selecting?: boolean
 		debug?: boolean
 	}
 
-	let { active = false, debug = false }: Props = $props()
+	let { enabled = false, selecting = false, debug = false }: Props = $props()
 
 	const world = useWorld()
 	const controls = useCameraControls()
@@ -37,7 +38,7 @@
 	let drawing = false
 
 	const onpointerdown = (event: PointerEvent) => {
-		if (!event.shiftKey || !active) return
+		if (!selecting && !event.shiftKey) return
 
 		const { x, y } = raycast(event, camera.current)
 
@@ -60,7 +61,7 @@
 	}
 
 	const onpointermove = (event: PointerEvent) => {
-		if (!drawing || !active) return
+		if (!drawing) return
 
 		let lasso = world.query(selectionTraits.Lasso).at(-1)
 
@@ -100,13 +101,13 @@
 	}
 
 	const onpointerleave = () => {
-		if (!drawing || !active) return
+		if (!drawing) return
 
 		onpointerup()
 	}
 
 	const onpointerup = () => {
-		if (!drawing || !active) return
+		if (!drawing) return
 
 		drawing = false
 
@@ -225,6 +226,8 @@
 	}
 
 	$effect(() => {
+		if (!enabled) return
+
 		globalThis.addEventListener('keydown', onkeydown)
 		globalThis.addEventListener('keyup', onkeyup)
 		dom.addEventListener('pointerdown', onpointerdown)
@@ -244,26 +247,6 @@
 
 	const lassos = useQuery(selectionTraits.Lasso)
 
-	$effect(() => {
-		if (!controls.current) return
-
-		const currentControls = controls.current
-
-		if ('minPolarAngle' in currentControls) {
-			const { minPolarAngle, maxPolarAngle } = currentControls
-
-			// Locks the camera to top down while this component is mounted
-			currentControls.polarAngle = 0
-			currentControls.minPolarAngle = 0
-			currentControls.maxPolarAngle = 0
-
-			return () => {
-				currentControls.minPolarAngle = minPolarAngle
-				currentControls.maxPolarAngle = maxPolarAngle
-			}
-		}
-	})
-
 	// On unmount, destroy all lasso related entities
 	$effect(() => {
 		return () => {

package/dist/plugins/Selection/Lasso.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
-    active?: boolean;
+    enabled?: boolean;
+    selecting?: boolean;
     debug?: boolean;
 }
 declare const Lasso: import("svelte").Component<Props, {}, "">;

package/dist/plugins/Selection/SelectionTool.svelte

@@ -19,6 +19,10 @@
 	interface Props {
 		/** Whether to auto-enable lasso mode when the component mounts */
 		enabled?: boolean
+
+		/** Allow manually going into selection state */
+		selecting?: boolean
+
 		// TODO: remove once a Selected trait exists
 		autoSelectNewEntities?: boolean
 		children?: Snippet
@@ -26,7 +30,12 @@
 
 	type SelectionType = 'lasso' | 'ellipse'
 
-	let { enabled = false, autoSelectNewEntities = false, children }: Props = $props()
+	let {
+		enabled = false,
+		selecting = false,
+		autoSelectNewEntities = false,
+		children,
+	}: Props = $props()
 
 	const { dom } = useThrelte()
 	const world = useWorld()
@@ -113,7 +122,13 @@
 </Portal>
 
 {#if isSelectionMode && rect.height > 0 && rect.width > 0}
-	<Ellipse active={selectionType === 'ellipse'} />
-	<Lasso active={selectionType === 'lasso'} />
+	<Ellipse
+		enabled={selectionType === 'ellipse'}
+		{selecting}
+	/>
+	<Lasso
+		enabled={selectionType === 'lasso'}
+		{selecting}
+	/>
 	{@render children?.()}
 {/if}

package/dist/plugins/Selection/SelectionTool.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 interface Props {
     /** Whether to auto-enable lasso mode when the component mounts */
     enabled?: boolean;
+    /** Allow manually going into selection state */
+    selecting?: boolean;
     autoSelectNewEntities?: boolean;
     children?: Snippet;
 }

package/dist/plugins/TopDownLock/TopDownLock.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { useCameraControls } from '../../hooks/useControls.svelte'
+
+	const controls = useCameraControls()
+
+	$effect(() => {
+		if (!controls.current) return
+
+		const currentControls = controls.current
+
+		if ('minPolarAngle' in currentControls) {
+			const { minPolarAngle, maxPolarAngle } = currentControls
+
+			// Locks the camera to top down while this component is mounted
+			currentControls.polarAngle = 0
+			currentControls.minPolarAngle = 0
+			currentControls.maxPolarAngle = 0
+
+			return () => {
+				currentControls.minPolarAngle = minPolarAngle
+				currentControls.maxPolarAngle = maxPolarAngle
+			}
+		}
+	})
+</script>

package/dist/plugins/TopDownLock/TopDownLock.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TopDownLock: import("svelte").Component<Record<string, never>, {}, "">;
+type TopDownLock = ReturnType<typeof TopDownLock>;
+export default TopDownLock;

package/dist/plugins/index.d.ts

@@ -3,9 +3,12 @@ export * as selectionTraits from './Selection/traits';
 export * as selectionRelations from './Selection/relations';
 export { useSelectionPlugin } from './Selection/useSelectionPlugin.svelte';
 export { default as MeasureTool } from './MeasureTool/MeasureTool.svelte';
+export { default as TopDownLock } from './TopDownLock/TopDownLock.svelte';
 export { default as DrawService } from './DrawService/DrawService.svelte';
 export { default as Skybox } from './Skybox/Skybox.svelte';
 export { default as Debug } from './Debug/Debug.svelte';
+export { default as Logs } from './Logs/Logs.svelte';
+export { useLogs } from './Logs/useLogs.svelte';
 export { default as Focus } from './Focus/Focus.svelte';
 export { default as LLMSceneBuilder } from './LLMSceneBuilder/LLMSceneBuilder.svelte';
 export type { InferCallback, ComponentFrameInfo } from './LLMSceneBuilder/useSceneBuilder.svelte';

package/dist/plugins/index.js

@@ -4,14 +4,20 @@ export * as selectionTraits from './Selection/traits';
 export * as selectionRelations from './Selection/relations';
 export { useSelectionPlugin } from './Selection/useSelectionPlugin.svelte';
 export { default as MeasureTool } from './MeasureTool/MeasureTool.svelte';
+export { default as TopDownLock } from './TopDownLock/TopDownLock.svelte';
 // DrawService
 export { default as DrawService } from './DrawService/DrawService.svelte';
 // Skybox
 export { default as Skybox } from './Skybox/Skybox.svelte';
 // Debug
 export { default as Debug } from './Debug/Debug.svelte';
+// Logs
+export { default as Logs } from './Logs/Logs.svelte';
+export { useLogs } from './Logs/useLogs.svelte';
+// Focus
 export { default as Focus } from './Focus/Focus.svelte';
 // LLMSceneBuilder
 export { default as LLMSceneBuilder } from './LLMSceneBuilder/LLMSceneBuilder.svelte';
+// XR
 export { default as XR } from './XR/XR.svelte';
 export { default as XRSettings } from './XR/XRSettings.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.34.3",
+  "version": "1.34.5",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -30,7 +30,7 @@
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "^14.6.1",
     "@threlte/core": "8.5.14",
-    "@threlte/extras": "9.17.0",
+    "@threlte/extras": "9.21.0",
     "@threlte/rapier": "3.4.1",
     "@threlte/xr": "1.6.0",
     "@types/bun": "1.2.21",

package/dist/components/overlay/Logs.svelte

@@ -1,144 +0,0 @@
-<script lang="ts">
-	import { Portal } from '@threlte/extras'
-	import { PersistedState } from 'runed'
-
-	import { useLogs } from '../../hooks/useLogs.svelte'
-
-	import DashboardButton from './dashboard/Button.svelte'
-	import FloatingPanel from './FloatingPanel.svelte'
-
-	const logs = useLogs()
-
-	const isOpen = new PersistedState('logs-is-open', false)
-
-	let levels = new PersistedState('logs-selected-levels', {
-		info: true,
-		warn: true,
-		error: true,
-	})
-</script>
-
-<Portal id="dashboard">
-	<fieldset class="relative">
-		<DashboardButton
-			active={isOpen.current}
-			icon="article"
-			description="Logs"
-			onclick={() => {
-				isOpen.current = !isOpen.current
-			}}
-		/>
-		{#if logs.warnings.length > 0}
-			<span
-				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 w-4 rounded-full bg-yellow-700 text-center text-[10px] text-white"
-			>
-				{logs.warnings.length}
-			</span>
-		{/if}
-
-		{#if logs.errors.length > 0}
-			<span
-				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 rounded-full bg-red-700 px-1.25 text-center text-[10px] text-white"
-			>
-				{logs.errors.length}
-			</span>
-		{/if}
-	</fieldset>
-</Portal>
-
-<FloatingPanel
-	title="Logs"
-	bind:isOpen={isOpen.current}
-	defaultSize={{ width: 240, height: 315 }}
-	resizable
->
-	<div class="flex h-full flex-col">
-		<div class="flex gap-1 px-3 py-2">
-			<button
-				type="button"
-				class={[
-					'chip border px-2',
-					{
-						'border-danger-dark bg-danger-dark text-white hover:border-red-700 hover:bg-red-700':
-							levels.current.error,
-						'bg-light hover:bg-ghost-light hover:border-light border-light text-subtle-1':
-							!levels.current.error,
-					},
-				]}
-				onclick={() => {
-					levels.current.error = !levels.current.error
-				}}
-			>
-				error
-			</button>
-
-			<button
-				type="button"
-				class={[
-					'chip border',
-					{
-						'border-amber-400 bg-amber-400 text-white hover:border-amber-500 hover:bg-amber-500':
-							levels.current.warn,
-						'bg-light hover:bg-ghost-light hover:border-light border-light text-subtle-1':
-							!levels.current.warn,
-					},
-				]}
-				onclick={() => {
-					levels.current.warn = !levels.current.warn
-				}}
-			>
-				warn
-			</button>
-
-			<button
-				type="button"
-				class={[
-					'chip border',
-					{
-						'border-blue-400 bg-blue-400 text-white hover:border-blue-500 hover:bg-blue-500':
-							levels.current.info,
-						'bg-light hover:bg-ghost-light hover:border-light border-light text-subtle-1':
-							!levels.current.info,
-					},
-				]}
-				onclick={() => {
-					levels.current.info = !levels.current.info
-				}}
-			>
-				info
-			</button>
-		</div>
-
-		<div class="flex flex-col gap-2 overflow-auto px-3 pb-3 text-xs">
-			{#each logs.current as log (log.uuid)}
-				{#if levels.current[log.level]}
-					<div>
-						<div class="flex flex-wrap items-center gap-1.5">
-							<div
-								class={[
-									'h-2 w-2 rounded-full',
-									{
-										'bg-danger-dark': log.level === 'error',
-										'bg-amber-300': log.level === 'warn',
-										'bg-blue-400': log.level === 'info',
-									},
-								]}
-							></div>
-							<div class="text-subtle-2">{log.timestamp}</div>
-						</div>
-						<div>
-							{#if log.count > 1}
-								<span class="mr-1 rounded bg-green-700 px-1 py-0.5 text-xs text-white">
-									{log.count}
-								</span>
-							{/if}
-							{log.message}
-						</div>
-					</div>
-				{/if}
-			{:else}
-				No logs
-			{/each}
-		</div>
-	</div>
-</FloatingPanel>