diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 1e3a6e10ceee..91e51e6fbf02 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -106,7 +106,6 @@
"hast-util-to-text": "^4.0.2",
"ignore": "^7.0.5",
"katex": "^0.16.45",
- "leva": "^0.10.1",
"mermaid": "^11.15.0",
"motion": "^12.38.0",
"nanostores": "^1.3.0",
diff --git a/apps/desktop/src/components/Backdrop.tsx b/apps/desktop/src/components/Backdrop.tsx
index 31525b31ba2d..342f3d9169af 100644
--- a/apps/desktop/src/components/Backdrop.tsx
+++ b/apps/desktop/src/components/Backdrop.tsx
@@ -1,118 +1,24 @@
import { useStore } from '@nanostores/react'
-import { Leva, useControls } from 'leva'
-import { type CSSProperties, useEffect, useState } from 'react'
import { $backdrop } from '@/store/backdrop'
-const BLEND_MODES = [
- 'normal',
- 'multiply',
- 'screen',
- 'overlay',
- 'darken',
- 'lighten',
- 'color-dodge',
- 'color-burn',
- 'hard-light',
- 'soft-light',
- 'difference',
- 'exclusion',
- 'hue',
- 'saturation',
- 'color',
- 'luminosity'
-] as const
-
-type BlendMode = (typeof BLEND_MODES)[number]
const assetPath = (path: string) => `${import.meta.env.BASE_URL}${path.replace(/^\/+/, '')}`
export function Backdrop() {
- const [controlsOpen, setControlsOpen] = useState(false)
const on = useStore($backdrop)
- useEffect(() => {
- if (!import.meta.env.DEV) {
- return
- }
-
- const onKeyDown = (event: KeyboardEvent) => {
- const target = event.target as HTMLElement | null
-
- const editing =
- target?.isContentEditable ||
- target instanceof HTMLInputElement ||
- target instanceof HTMLTextAreaElement ||
- target instanceof HTMLSelectElement
-
- if (editing || event.repeat || event.altKey || event.ctrlKey || event.metaKey) {
- return
- }
-
- if (event.shiftKey && event.code === 'KeyY') {
- setControlsOpen(open => !open)
- }
- }
-
- window.addEventListener('keydown', onKeyDown)
-
- return () => window.removeEventListener('keydown', onKeyDown)
- }, [])
-
- const shape = useControls(
- 'UI / Shape',
- { radiusScalar: { value: 0.2, min: 0, max: 2, step: 0.1, label: 'radius scalar' } },
- { collapsed: true }
- )
-
- useEffect(() => {
- document.documentElement.style.setProperty('--radius-scalar', String(shape.radiusScalar))
- }, [shape.radiusScalar])
-
- const statue = useControls(
- 'Backdrop / Statue',
- {
- enabled: { value: true, label: 'on' },
- opacity: { value: 0.025, min: 0, max: 1, step: 0.005 },
- blendMode: { value: 'difference' as BlendMode, options: BLEND_MODES, label: 'blend' },
- invert: { value: true, label: 'invert color' },
- saturate: { value: 1, min: 0, max: 3, step: 0.05, label: 'saturate' },
- brightness: { value: 1, min: 0, max: 2, step: 0.05, label: 'brightness' },
- objectPosition: {
- value: 'top left',
- options: ['top left', 'top right', 'bottom left', 'bottom right', 'center', 'top', 'bottom', 'left', 'right'],
- label: 'position'
- },
- scale: { value: 160, min: 100, max: 300, step: 5, label: 'height (dvh)' }
- },
- { collapsed: true }
- )
+ if (!on) {
+ return null
+ }
return (
- <>
-
-
+