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 ( - <> -