@brandonlukas/luminar 0.1.1 → 0.2.1

package/src/modules/particle-system.ts

@@ -0,0 +1,329 @@
+import { BufferAttribute, BufferGeometry } from 'three'
+import { SimplexNoise } from 'three/examples/jsm/math/SimplexNoise.js'
+import type { VectorSample, VectorDatum, ColorPreset, ParticleParams, FieldTransform } from '../lib/types'
+import { WORLD_EXTENT, FLOW_SCALE, SPEED_TO_GLOW, JITTER, DEFAULT_COLOR_PRESET, COLOR_PRESETS } from '../lib/constants'
+
+export class ParticleSystem {
+    // Particle data buffers
+    private positions: Float32Array
+    private colors: Float32Array
+    private lifetimes: Float32Array
+
+    // Field data and transformation
+    private fieldData: VectorDatum[] | null = null
+    private fieldTransform: FieldTransform = { scale: 1, offsetX: 0, offsetY: 0 }
+
+    // Spatial grid for O(1) field lookups
+    private grid: Map<string, VectorDatum[]> = new Map()
+    private gridCellSize = 0.1
+
+    // Three.js resources
+    public geometry: BufferGeometry
+    private params: ParticleParams
+
+    // View and rendering state
+    private viewOffsetX: number
+    private activePalette: ColorPreset | null = null
+
+    // Noise generation
+    private noise: SimplexNoise
+    private readonly noiseScale = 0.9
+    private readonly noiseTimeScale = 0.15
+
+    constructor(
+        geometry: BufferGeometry,
+        params: ParticleParams,
+    ) {
+        this.geometry = geometry
+        this.params = params
+        this.viewOffsetX = 0
+        this.positions = new Float32Array(params.particleCount * 3)
+        this.colors = new Float32Array(params.particleCount * 3)
+        this.lifetimes = new Float32Array(params.particleCount)
+        this.noise = new SimplexNoise()
+
+        this.geometry.setAttribute('position', new BufferAttribute(this.positions, 3))
+        this.geometry.setAttribute('color', new BufferAttribute(this.colors, 3))
+    }
+
+    init() {
+        for (let i = 0; i < this.params.particleCount; i += 1) {
+            this.resetParticle(i)
+        }
+        this.updateBuffers()
+    }
+
+    setFieldData(data: VectorDatum[] | null, transform: FieldTransform) {
+        this.fieldData = data
+        this.fieldTransform = transform
+        this.buildSpatialGrid()
+    }
+
+    hasFieldData(): boolean {
+        return this.fieldData !== null && this.fieldData.length > 0
+    }
+
+    setViewOffset(offsetX: number) {
+        if (this.viewOffsetX !== offsetX) {
+            this.viewOffsetX = offsetX
+            // Reseed particles when offset changes to prevent gaps
+            for (let i = 0; i < this.params.particleCount; i += 1) {
+                this.resetParticle(i)
+            }
+            this.updateBuffers()
+        }
+    }
+
+    update(dt: number, palette: ColorPreset) {
+        const time = performance.now() * 0.001
+        this.activePalette = palette
+        const noiseEnabled = this.params.noiseStrength > 0
+        const speedMultiplier = FLOW_SCALE * this.params.speed * dt
+        const jitterRange = JITTER * dt
+
+        for (let i = 0; i < this.params.particleCount; i += 1) {
+            const i3 = i * 3
+            let x = this.positions[i3]
+            let y = this.positions[i3 + 1]
+
+            const v = this.sampleField(x, y, time)
+            if (!v) {
+                this.resetParticle(i)
+                continue
+            }
+
+            if (noiseEnabled) {
+                this.applyNoise(v, x, y, time)
+            }
+
+            x += v.x * speedMultiplier + this.randomRange(-jitterRange, jitterRange)
+            y += v.y * speedMultiplier + this.randomRange(-jitterRange, jitterRange)
+
+            const speed = Math.hypot(v.x, v.y)
+            const glow = Math.min(1, speed * SPEED_TO_GLOW)
+
+            this.applyColor(i3, glow, palette, false)
+
+            this.lifetimes[i] -= dt
+
+            if (this.shouldResetParticle(i, x, y)) {
+                this.resetParticle(i)
+            } else {
+                this.positions[i3] = x
+                this.positions[i3 + 1] = y
+            }
+        }
+
+        this.updateBuffers()
+    }
+
+    resizeBuffers(newCount: number) {
+        this.params.particleCount = newCount
+        this.positions = new Float32Array(newCount * 3)
+        this.colors = new Float32Array(newCount * 3)
+        this.lifetimes = new Float32Array(newCount)
+        this.geometry.setAttribute('position', new BufferAttribute(this.positions, 3))
+        this.geometry.setAttribute('color', new BufferAttribute(this.colors, 3))
+        this.init()
+    }
+
+    reseedLifetimes() {
+        for (let i = 0; i < this.params.particleCount; i += 1) {
+            this.lifetimes[i] = this.randomRange(this.params.lifeMin, this.params.lifeMax)
+        }
+    }
+
+    private shouldResetParticle(i: number, x: number, y: number): boolean {
+        return (
+            this.lifetimes[i] <= 0 ||
+            Math.abs(x - this.viewOffsetX) > WORLD_EXTENT ||
+            Math.abs(y) > WORLD_EXTENT
+        )
+    }
+
+    private applyNoise(velocity: VectorSample, x: number, y: number, time: number) {
+        const nX = this.noise.noise3d(x * this.noiseScale, y * this.noiseScale, time * this.noiseTimeScale)
+        const nY = this.noise.noise3d((x + 10) * this.noiseScale, (y + 10) * this.noiseScale, time * this.noiseTimeScale)
+        velocity.x += nX * this.params.noiseStrength
+        velocity.y += nY * this.params.noiseStrength
+    }
+
+    private resetParticle(i: number) {
+        const i3 = i * 3
+        const palette = this.activePalette ?? this.getActiveColorPreset()
+
+        if (this.hasFieldData()) {
+            this.resetParticleWithinField(i3)
+        } else {
+            this.resetParticleRandomly(i3)
+        }
+
+        this.lifetimes[i] = this.randomRange(this.params.lifeMin, this.params.lifeMax)
+        const glow = 0.4 + Math.random() * 0.2
+        this.applyColor(i3, glow, palette, true)
+    }
+
+    private resetParticleWithinField(i3: number) {
+        const randomPoint = this.fieldData![Math.floor(Math.random() * this.fieldData!.length)]
+        const jitterRange = this.params.fieldValidDistance * 0.3
+        const dataX = randomPoint.x + this.randomRange(-jitterRange, jitterRange) / this.fieldTransform.scale
+        const dataY = randomPoint.y + this.randomRange(-jitterRange, jitterRange) / this.fieldTransform.scale
+
+        this.positions[i3] = this.dataToWorldX(dataX)
+        this.positions[i3 + 1] = this.dataToWorldY(dataY)
+        this.positions[i3 + 2] = 0
+    }
+
+    private resetParticleRandomly(i3: number) {
+        this.positions[i3] = this.randomRange(-WORLD_EXTENT, WORLD_EXTENT) + this.viewOffsetX
+        this.positions[i3 + 1] = this.randomRange(-WORLD_EXTENT, WORLD_EXTENT)
+        this.positions[i3 + 2] = 0
+    }
+
+    private dataToWorldX(dataX: number): number {
+        return dataX * this.fieldTransform.scale + this.fieldTransform.offsetX + this.viewOffsetX
+    }
+
+    private dataToWorldY(dataY: number): number {
+        return dataY * this.fieldTransform.scale + this.fieldTransform.offsetY
+    }
+
+    private worldToDataX(worldX: number): number {
+        return (worldX - this.viewOffsetX - this.fieldTransform.offsetX) / this.fieldTransform.scale
+    }
+
+    private worldToDataY(worldY: number): number {
+        return (worldY - this.fieldTransform.offsetY) / this.fieldTransform.scale
+    }
+
+    private buildSpatialGrid() {
+        this.grid.clear()
+
+        if (!this.fieldData || this.fieldData.length === 0) {
+            return
+        }
+
+        // Find bounds
+        let minX = this.fieldData[0].x
+        let maxX = this.fieldData[0].x
+        let minY = this.fieldData[0].y
+        let maxY = this.fieldData[0].y
+
+        for (const d of this.fieldData) {
+            if (d.x < minX) minX = d.x
+            if (d.x > maxX) maxX = d.x
+            if (d.y < minY) minY = d.y
+            if (d.y > maxY) maxY = d.y
+        }
+
+        // Auto-adjust cell size based on data density
+        const width = maxX - minX
+        const height = maxY - minY
+        const avgDim = (width + height) / 2
+        const targetCellsPerDim = Math.ceil(Math.sqrt(this.fieldData.length))
+        this.gridCellSize = Math.max(0.01, avgDim / targetCellsPerDim)
+
+        // Populate grid
+        for (const datum of this.fieldData) {
+            const key = this.getGridKey(datum.x, datum.y)
+            const cell = this.grid.get(key)
+            if (cell) {
+                cell.push(datum)
+            } else {
+                this.grid.set(key, [datum])
+            }
+        }
+    }
+
+    private getGridKey(x: number, y: number): string {
+        const cellX = Math.floor(x / this.gridCellSize)
+        const cellY = Math.floor(y / this.gridCellSize)
+        return `${cellX},${cellY}`
+    }
+
+    private sampleField(x: number, y: number, _time: number): VectorSample | null {
+        if (!this.hasFieldData()) {
+            return { x: 1, y: 0 }
+        }
+
+        const dataX = this.worldToDataX(x)
+        const dataY = this.worldToDataY(y)
+        const nearest = this.findNearestFieldPoint(dataX, dataY)
+
+        if (!nearest) {
+            return null
+        }
+
+        return {
+            x: nearest.dx * this.fieldTransform.scale,
+            y: nearest.dy * this.fieldTransform.scale,
+        }
+    }
+
+    private findNearestFieldPoint(dataX: number, dataY: number): VectorDatum | null {
+        let nearest: VectorDatum | null = null
+        let bestDistSq = Number.MAX_VALUE
+        const thresholdSq = Math.pow(this.params.fieldValidDistance / this.fieldTransform.scale, 2)
+
+        // Search 3x3 grid of cells (current + 8 neighbors)
+        const cellX = Math.floor(dataX / this.gridCellSize)
+        const cellY = Math.floor(dataY / this.gridCellSize)
+
+        for (let dx = -1; dx <= 1; dx += 1) {
+            for (let dy = -1; dy <= 1; dy += 1) {
+                const cell = this.grid.get(`${cellX + dx},${cellY + dy}`)
+                if (!cell) continue
+
+                for (const d of cell) {
+                    const diffX = d.x - dataX
+                    const diffY = d.y - dataY
+                    const distSq = diffX * diffX + diffY * diffY
+                    if (distSq < bestDistSq) {
+                        bestDistSq = distSq
+                        nearest = d
+                    }
+                }
+            }
+        }
+
+        return bestDistSq <= thresholdSq ? nearest : null
+    }
+
+    private applyColor(i3: number, glow: number, palette: ColorPreset, isSpawn: boolean) {
+        const clampedGlow = Math.min(1, Math.max(0, glow))
+
+        // Preserve legacy look for the default palette
+        if (palette.key === DEFAULT_COLOR_PRESET) {
+            if (isSpawn) {
+                this.colors[i3] = 0.6 * clampedGlow
+                this.colors[i3 + 1] = 0.25 * clampedGlow
+                this.colors[i3 + 2] = 0.9 * clampedGlow
+            } else {
+                this.colors[i3] = 0.35 + clampedGlow * 0.9
+                this.colors[i3 + 1] = 0.18 + clampedGlow * 0.45
+                this.colors[i3 + 2] = 0.6 + clampedGlow * 0.35
+            }
+            return
+        }
+
+        const brightness = isSpawn ? clampedGlow : 0.35 + clampedGlow * 0.65
+        const [r, g, b] = palette.rgb
+        this.colors[i3] = r * brightness
+        this.colors[i3 + 1] = g * brightness
+        this.colors[i3 + 2] = b * brightness
+    }
+
+    private getActiveColorPreset(): ColorPreset {
+        return COLOR_PRESETS.find((preset) => preset.key === this.params.colorPresetA) ?? COLOR_PRESETS[0]
+    }
+
+    private randomRange(min: number, max: number) {
+        return min + Math.random() * (max - min)
+    }
+
+    private updateBuffers() {
+        this.geometry.attributes.position.needsUpdate = true
+        this.geometry.attributes.color.needsUpdate = true
+        this.geometry.computeBoundingSphere()
+    }
+}

package/src/modules/recording.ts

@@ -0,0 +1,227 @@
+import { WebGLRenderer } from 'three'
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'
+
+export class RecordingManager {
+    private mediaRecorder: MediaRecorder | null = null
+    private recordedChunks: Blob[] = []
+    private isRecording = false
+    private recordingStartTime = 0
+    private recordingDuration = 5
+    private recordingResolution: 'current' | '1080p' | '1440p' | '4k' = 'current'
+    private originalCanvasSize: { width: number; height: number } | null = null
+    private recordButton: HTMLButtonElement | null = null
+    private recordStatus: HTMLDivElement | null = null
+    private renderer: WebGLRenderer
+    private composer: EffectComposer
+    private bloomPass: UnrealBloomPass
+    private onResize: () => void
+
+    constructor(
+        renderer: WebGLRenderer,
+        composer: EffectComposer,
+        bloomPass: UnrealBloomPass,
+        onResize: () => void,
+    ) {
+        this.renderer = renderer
+        this.composer = composer
+        this.bloomPass = bloomPass
+        this.onResize = onResize
+    }
+
+    createControls(container: HTMLElement) {
+        const recordingSection = document.createElement('div')
+        recordingSection.className = 'controls__section'
+        recordingSection.innerHTML = '<div class="controls__subtitle">Export (WebM)</div>'
+
+        // Resolution selector
+        const resolutionRow = document.createElement('label')
+        resolutionRow.className = 'controls__row'
+        const resolutionLabel = document.createElement('span')
+        resolutionLabel.textContent = 'Resolution'
+        const resolutionSelect = document.createElement('select')
+        resolutionSelect.className = 'controls__select'
+        resolutionSelect.innerHTML = '<option value="current">Current window</option><option value="1080p">1080p (Full HD)</option><option value="1440p">1440p (2K)</option><option value="4k">4K (Ultra HD)</option>'
+        resolutionSelect.value = this.recordingResolution
+        resolutionSelect.addEventListener('change', (e) => {
+            this.recordingResolution = (e.target as HTMLSelectElement).value as typeof this.recordingResolution
+        })
+        resolutionRow.appendChild(resolutionLabel)
+        resolutionRow.appendChild(resolutionSelect)
+        recordingSection.appendChild(resolutionRow)
+
+        // Duration selector
+        const durationRow = document.createElement('label')
+        durationRow.className = 'controls__row'
+        const durationLabel = document.createElement('span')
+        durationLabel.textContent = 'Duration'
+        const durationSelect = document.createElement('select')
+        durationSelect.className = 'controls__select'
+        durationSelect.innerHTML = '<option value="3">3 seconds</option><option value="5">5 seconds</option><option value="10">10 seconds</option><option value="15">15 seconds</option>'
+        durationSelect.value = String(this.recordingDuration)
+        durationSelect.addEventListener('change', (e) => {
+            this.recordingDuration = parseInt((e.target as HTMLSelectElement).value)
+        })
+        durationRow.appendChild(durationLabel)
+        durationRow.appendChild(durationSelect)
+        recordingSection.appendChild(durationRow)
+
+        // Record button
+        this.recordButton = document.createElement('button')
+        this.recordButton.type = 'button'
+        this.recordButton.className = 'controls__button controls__button--record'
+        this.recordButton.textContent = '⏺ Start recording'
+        this.recordButton.addEventListener('click', () => {
+            if (this.isRecording) {
+                this.stop()
+            } else {
+                this.start()
+            }
+        })
+        recordingSection.appendChild(this.recordButton)
+
+        // Status
+        this.recordStatus = document.createElement('div')
+        this.recordStatus.className = 'controls__status'
+        this.recordStatus.style.display = 'none'
+        recordingSection.appendChild(this.recordStatus)
+
+        container.appendChild(recordingSection)
+    }
+
+    update() {
+        if (this.isRecording) {
+            const elapsed = (performance.now() - this.recordingStartTime) / 1000
+            this.updateStatus(elapsed)
+            if (elapsed >= this.recordingDuration) {
+                this.stop()
+            }
+        }
+    }
+
+    private start() {
+        if (this.isRecording) return
+
+        try {
+            const canvas = this.renderer.domElement
+
+            let recordWidth: number, recordHeight: number
+            const currentAspect = canvas.width / canvas.height
+
+            if (this.recordingResolution === 'current') {
+                recordWidth = canvas.width
+                recordHeight = canvas.height
+            } else {
+                this.originalCanvasSize = { width: canvas.width, height: canvas.height }
+
+                switch (this.recordingResolution) {
+                    case '1080p':
+                        recordHeight = 1080
+                        recordWidth = Math.round(recordHeight * currentAspect)
+                        break
+                    case '1440p':
+                        recordHeight = 1440
+                        recordWidth = Math.round(recordHeight * currentAspect)
+                        break
+                    case '4k':
+                        recordHeight = 2160
+                        recordWidth = Math.round(recordHeight * currentAspect)
+                        break
+                }
+
+                this.renderer.setSize(recordWidth, recordHeight, false)
+                this.composer.setSize(recordWidth, recordHeight)
+                this.bloomPass.setSize(recordWidth, recordHeight)
+            }
+
+            const stream = canvas.captureStream(60)
+            const pixelCount = recordWidth * recordHeight
+            const bitrate = Math.min(25000000, Math.max(8000000, pixelCount * 4))
+
+            this.recordedChunks = []
+            this.mediaRecorder = new MediaRecorder(stream, {
+                mimeType: 'video/webm;codecs=vp9',
+                videoBitsPerSecond: bitrate,
+            })
+
+            this.mediaRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    this.recordedChunks.push(event.data)
+                }
+            }
+
+            this.mediaRecorder.onstop = () => {
+                if (this.originalCanvasSize) {
+                    this.renderer.setSize(this.originalCanvasSize.width, this.originalCanvasSize.height, false)
+                    this.composer.setSize(this.originalCanvasSize.width, this.originalCanvasSize.height)
+                    this.bloomPass.setSize(this.originalCanvasSize.width, this.originalCanvasSize.height)
+                    this.originalCanvasSize = null
+                    this.onResize()
+                }
+
+                const blob = new Blob(this.recordedChunks, { type: 'video/webm' })
+                const url = URL.createObjectURL(blob)
+                const a = document.createElement('a')
+                a.href = url
+                a.download = `luminar-${recordWidth}x${recordHeight}-${Date.now()}.webm`
+                a.click()
+                URL.revokeObjectURL(url)
+
+                if (this.recordStatus) {
+                    this.recordStatus.textContent = 'Recording complete! Download started.'
+                    setTimeout(() => {
+                        if (this.recordStatus) this.recordStatus.style.display = 'none'
+                    }, 3000)
+                }
+            }
+
+            this.mediaRecorder.start()
+            this.isRecording = true
+            this.recordingStartTime = performance.now()
+
+            if (this.recordButton) {
+                this.recordButton.textContent = '⏹ Stop recording'
+                this.recordButton.style.opacity = '1'
+            }
+            if (this.recordStatus) {
+                this.recordStatus.style.display = 'block'
+                this.recordStatus.textContent = `Recording at ${recordWidth}x${recordHeight} (${(bitrate / 1000000).toFixed(0)} Mbps): 0.0s / ${this.recordingDuration}s`
+            }
+        } catch (error) {
+            console.error('Failed to start recording:', error)
+            if (this.originalCanvasSize) {
+                this.renderer.setSize(this.originalCanvasSize.width, this.originalCanvasSize.height, false)
+                this.composer.setSize(this.originalCanvasSize.width, this.originalCanvasSize.height)
+                this.bloomPass.setSize(this.originalCanvasSize.width, this.originalCanvasSize.height)
+                this.originalCanvasSize = null
+                this.onResize()
+            }
+            if (this.recordStatus) {
+                this.recordStatus.style.display = 'block'
+                this.recordStatus.textContent = 'Recording not supported in this browser.'
+            }
+        }
+    }
+
+    private stop() {
+        if (!this.isRecording || !this.mediaRecorder) return
+
+        this.isRecording = false
+        this.mediaRecorder.stop()
+        this.mediaRecorder = null
+
+        if (this.recordButton) {
+            this.recordButton.textContent = '▶ Start recording'
+            this.recordButton.style.opacity = '1'
+        }
+    }
+
+    private updateStatus(elapsed: number) {
+        if (this.recordStatus) {
+            const current = elapsed.toFixed(1)
+            const canvas = this.renderer.domElement
+            const bitrate = Math.min(25000000, Math.max(8000000, canvas.width * canvas.height * 4))
+            this.recordStatus.textContent = `Recording at ${canvas.width}x${canvas.height} (${(bitrate / 1000000).toFixed(0)} Mbps): ${current}s / ${this.recordingDuration}s`
+        }
+    }
+}

package/src/style.css

@@ -90,6 +90,52 @@ canvas {
   color: #9fb7ff;
 }
 
+.controls__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 10px;
+}
+
+.controls__toggle {
+  background: linear-gradient(120deg, rgba(120, 180, 255, 0.12), rgba(80, 120, 200, 0.08));
+  border: 1px solid rgba(120, 180, 255, 0.3);
+  color: #9fb7ff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 6px 10px;
+  margin: 0 0 0 8px;
+  line-height: 1;
+  display: inline-block;
+  border-radius: 6px;
+  transition: all 120ms ease;
+}
+
+.controls__toggle:hover {
+  color: #dfe8ff;
+  border-color: rgba(140, 200, 255, 0.6);
+  box-shadow: 0 0 12px rgba(120, 180, 255, 0.2);
+  background: linear-gradient(120deg, rgba(120, 180, 255, 0.18), rgba(80, 120, 200, 0.12));
+}
+
+.controls__toggle:active {
+  transform: translateY(1px);
+}
+
+.controls--collapsed {
+  width: auto !important;
+  padding: 10px 12px !important;
+}
+
+.controls--collapsed .controls__header {
+  margin-bottom: 0;
+}
+
+.controls--collapsed> :not(.controls__header) {
+  display: none !important;
+}
+
 .controls__row {
   display: grid;
   grid-template-columns: 1fr 1fr auto;
@@ -133,4 +179,88 @@ canvas {
 
 .controls__button:active {
   transform: translateY(1px);
+}
+
+.controls__button--record {
+  background: linear-gradient(120deg, rgba(255, 80, 120, 0.22), rgba(200, 80, 120, 0.14));
+  border-color: rgba(255, 120, 150, 0.4);
+}
+
+.controls__button--record:hover {
+  border-color: rgba(255, 140, 170, 0.8);
+  box-shadow: 0 0 18px rgba(255, 120, 150, 0.3);
+}
+
+.controls__section {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(120, 180, 255, 0.15);
+}
+
+.controls__subtitle {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 8px;
+  color: #9fb7ff;
+  opacity: 0.85;
+}
+
+.controls__status {
+  font-size: 11px;
+  margin-top: 8px;
+  padding: 6px 8px;
+  background: rgba(100, 180, 255, 0.1);
+  border: 1px solid rgba(120, 180, 255, 0.2);
+  border-radius: 6px;
+  color: #b3d4ff;
+  text-align: center;
+}
+
+.controls__select {
+  width: 100%;
+  padding: 4px 6px;
+  background: rgba(20, 30, 50, 0.5);
+  border: 1px solid rgba(120, 180, 255, 0.25);
+  border-radius: 6px;
+  color: #dfe8ff;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.controls__select:hover {
+  border-color: rgba(140, 200, 255, 0.5);
+}
+
+.controls__advanced {
+  margin-top: 8px;
+}
+
+.drop-overlay {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #d7e2ff;
+  font-size: 18px;
+  letter-spacing: 0.02em;
+  z-index: 20;
+  pointer-events: none;
+  backdrop-filter: blur(4px);
+  font-weight: 600;
+  inset: 0;
+  width: 50%;
+  background: rgba(80, 140, 255, 0.2);
+}
+
+.drop-overlay--left {
+  left: 0;
+  right: auto;
+  border-right: 3px solid rgba(120, 180, 255, 0.4);
+}
+
+.drop-overlay--right {
+  left: auto;
+  right: 0;
+  border-left: 3px solid rgba(120, 180, 255, 0.4);
 }