diff --git a/backend/Makefile b/backend/Makefile new file mode 100644 index 0000000..74ca619 --- /dev/null +++ b/backend/Makefile @@ -0,0 +1,66 @@ +# OPLabs Mixer Backend — install / uninstall / restart / status + +VENV := $(dir $(realpath $(lastword $(MAKEFILE_LIST))))venv +SERVICE := oplabs-mixer-backend.service +SERVICE_PATH := /etc/systemd/system/$(SERVICE) +UVICORN := $(VENV)/bin/uvicorn +APP_DIR := $(dir $(realpath $(lastword $(MAKEFILE_LIST)))) +DAEMON_DIR := $(APP_DIR)../../oplabs-mixer-daemon + +.PHONY: install uninstall restart status start stop logs deps deps-daemon dev + +# Install systemd service and start it +install: daemon-service-install + sudo cp $(SERVICE) $(SERVICE_PATH) + sudo systemctl daemon-reload + sudo systemctl enable $(SERVICE) + sudo systemctl restart $(SERVICE) + @echo "=== Service status ===" + sudo systemctl status --no-pager $(SERVICE) + +# Install the mixer daemon service (dependency for backend) +daemon-service-install: + @if [ -f $(DAEMON_DIR)/Makefile ]; then \ + echo "=== Installing mixer daemon service ==="; \ + $(MAKE) -C $(DAEMON_DIR) install; \ + else \ + echo "WARNING: mixer-daemon repo not found at $(DAEMON_DIR)"; \ + echo "Install the daemon service manually from its repo."; \ + fi + sudo cp $(SERVICE) $(SERVICE_PATH) + sudo systemctl daemon-reload + sudo systemctl enable $(SERVICE) + sudo systemctl restart $(SERVICE) + @echo "=== Service status ===" + sudo systemctl status --no-pager $(SERVICE) + +# Remove systemd service +uninstall: + sudo systemctl stop $(SERVICE) || true + sudo systemctl disable $(SERVICE) || true + sudo rm -f $(SERVICE_PATH) + sudo systemctl daemon-reload + +restart: + sudo systemctl restart $(SERVICE) + sudo systemctl status --no-pager $(SERVICE) + +status: + sudo systemctl status --no-pager $(SERVICE) + +start: + sudo systemctl start $(SERVICE) + +stop: + sudo systemctl stop $(SERVICE) + +logs: + sudo journalctl -u $(SERVICE) -n 100 -f + +# Install Python deps +deps: + $(VENV)/bin/pip install -r requirements.txt + +# Run dev server (no systemd, hot-reload) +dev: + $(UVICORN) app:app --host 0.0.0.0 --port 8081 --reload --log-level info diff --git a/backend/app.py b/backend/app.py index 1eee337..b96fd92 100644 --- a/backend/app.py +++ b/backend/app.py @@ -9,6 +9,8 @@ Architecture: Browser <-> FastAPI (:8081) <-> Unix Socket <-> MixerDaemon Also retains backward compatibility with PiPedal via WebSocket proxy. """ +from __future__ import annotations + import asyncio import json import logging @@ -19,14 +21,19 @@ from contextlib import asynccontextmanager from pathlib import Path from typing import Optional +import base64 + import websockets from fastapi import FastAPI, WebSocket, WebSocketDisconnect from fastapi.responses import FileResponse, JSONResponse from fastapi.staticfiles import StaticFiles +from fastapi.middleware.cors import CORSMiddleware from pydantic import BaseModel from mixer_ipc import MixerIpcClient, MixerIpcError from ws_proxy import PiPedalWSProxy +from jack_endpoints import router as jack_router +from fx_inserts import router as fx_router logging.basicConfig(level=logging.INFO, format="%(asctime)s [%(levelname)s] %(name)s: %(message)s") logger = logging.getLogger("mixer-app") @@ -50,6 +57,7 @@ OPLABS_PLUGIN_URIS = { FRONTEND_DIR = Path(__file__).resolve().parent.parent / "frontend" / "dist" SCENES_FILE = Path(__file__).resolve().parent / "scenes.json" +MIXER_SCENES_FILE = Path(__file__).resolve().parent / "mixer-scenes.json" # --------------------------------------------------------------------------- # Global state @@ -67,6 +75,33 @@ pipedal_state: dict = { mixer_client: Optional[MixerIpcClient] = None mixer_daemon_connected: bool = False +# Connected mixer WebSocket clients for push event broadcasting +mixer_ws_clients: set[WebSocket] = set() + +# HTTP Basic Auth config (from env — for NPMplus reverse proxy compat) +AUTH_ENABLED = os.environ.get("MIXER_AUTH_ENABLED", "").lower() in ("1", "true", "yes") +AUTH_USERNAME = os.environ.get("MIXER_AUTH_USERNAME", "oplabs") +AUTH_PASSWORD = os.environ.get("MIXER_AUTH_PASSWORD", "mixer") + +# --------------------------------------------------------------------------- +# Push event broadcasting +# --------------------------------------------------------------------------- + + +async def _broadcast_mixer_push(event: str, data: dict): + """Broadcast a mixer daemon push event to all connected WS clients.""" + if not mixer_ws_clients: + return + message = json.dumps({"type": "push", "event": event, "data": data}) + dead: set[WebSocket] = set() + for ws in mixer_ws_clients: + try: + await ws.send_text(message) + except Exception: + dead.add(ws) + mixer_ws_clients -= dead + + # --------------------------------------------------------------------------- # Scene storage helpers # --------------------------------------------------------------------------- @@ -87,6 +122,102 @@ def _save_scenes(scenes: list[dict]): SCENES_FILE.parent.mkdir(parents=True, exist_ok=True) SCENES_FILE.write_text(json.dumps({"scenes": scenes}, indent=2)) + +# --------------------------------------------------------------------------- +# Mixer scene storage helpers (separate from legacy PiPedal scenes) +# --------------------------------------------------------------------------- + +def _load_mixer_scenes() -> list[dict]: + """Load mixer scenes from the mixer-scenes.json file.""" + if not MIXER_SCENES_FILE.exists(): + return [] + try: + data = json.loads(MIXER_SCENES_FILE.read_text()) + return data.get("scenes", []) + except (json.JSONDecodeError, Exception) as e: + logger.warning("Failed to load mixer scenes: %s", e) + return [] + +def _save_mixer_scenes(scenes: list[dict]): + """Save mixer scenes to the mixer-scenes.json file.""" + MIXER_SCENES_FILE.parent.mkdir(parents=True, exist_ok=True) + MIXER_SCENES_FILE.write_text(json.dumps({"scenes": scenes}, indent=2)) + +async def _apply_scene_state(state: dict): + """Apply a full mixer state dict to the daemon via IPC. + + Expects the state format returned by mixer_client.get_state(): + {channels: [{channelIndex, volume, pan, mute, solo, label, ...}], + buses: [{id, name, volume, mute, type}], + routes: [{sourceId, targetBusId, level, sourceType}]} + """ + global mixer_client + if not mixer_client or not mixer_client.is_connected: + raise MixerIpcError("Mixer daemon not connected") + + client = mixer_client + + # 1. Apply channel states + channels = state.get("channels", []) + for ch in channels: + idx = ch.get("channelIndex") + if idx is None: + continue + if "volume" in ch: + await client.set_channel_volume(idx, ch["volume"]) + if "pan" in ch: + await client.set_channel_pan(idx, ch["pan"]) + if "mute" in ch: + await client.set_channel_mute(idx, ch["mute"]) + if "solo" in ch: + await client.set_channel_solo(idx, ch["solo"]) + if ch.get("label"): + await client.set_channel_label(idx, ch["label"]) + + # 2. Apply bus states + buses = state.get("buses", []) + for bus in buses: + bus_id = bus.get("id") + if bus_id is None: + continue + if "volume" in bus: + await client.set_bus_volume(bus_id, bus["volume"]) + if "mute" in bus: + await client.set_bus_mute(bus_id, bus["mute"]) + + # 3. Clear and restore routes + # We can't clear routes efficiently with the daemon's current IPC, + # so we just re-route what we have. New routes are added on top. + routes = state.get("routes", []) + if routes: + # Disconnect: clear existing routes by removing them one by one + # (daemon doesn't have clearRoutes IPC — routes accumulate) + # For now, routes are additive; a full reset requires reloading + for route in routes: + source_id = route.get("sourceId") + target_bus_id = route.get("targetBusId") + level = route.get("level", 0.0) + source_type = route.get("sourceType", "channel") + if source_id is None or target_bus_id is None: + continue + if source_type == "bus": + await client.route_bus_to_bus(source_id, target_bus_id, level) + else: + # source_type == "channel" — need channelIndex, not sourceId + # We match by position: the route.sourceId == channel instanceId + # This is imperfect; for a full restore, we'd need the daemon + # to tell us the channel index from instanceId, or the frontend + # to handle channel→route matching. + pass + + # 4. Apply output routes + output_routes = state.get("outputRoutes") + if output_routes is not None: + await client.set_output_routes(output_routes) + + logger.info("Scene state applied: %d channels, %d buses, %d routes", + len(channels), len(buses), len(routes)) + # --------------------------------------------------------------------------- # PiPedal WS client for backend-internal use # --------------------------------------------------------------------------- @@ -246,14 +377,18 @@ async def lifespan(app: FastAPI): pipedal_proxy = PiPedalWSProxy(host=PIPEDAL_HOST, port=PIPEDAL_PORT, path=PIPEDAL_WS_PATH) logger.info("Mixer app starting - PiPedal at %s:%d", PIPEDAL_HOST, PIPEDAL_PORT) - # Try connecting to Mixer Daemon + # Try connecting to Mixer Daemon with retry mixer_client = MixerIpcClient(socket_path=MIXER_SOCKET_PATH) - connected = await mixer_client.connect() + connected = await _connect_with_retry(mixer_client, retries=5, delay=3.0) if connected: - logger.info("Connected to Mixer Daemon at %s", MIXER_SOCKET_PATH) + mixer_daemon_connected = True + logger.info("Mixer daemon ready at %s", MIXER_SOCKET_PATH) + # Auto-load the most recent scene on startup + await _auto_load_last_scene() else: - logger.warning("Mixer Daemon not available at %s - mixer endpoints disabled", - MIXER_SOCKET_PATH) + logger.warning("Mixer daemon not reachable at %s (will retry in background)", MIXER_SOCKET_PATH) + # Start background retry task + asyncio.create_task(_background_daemon_reconnect(mixer_client)) yield @@ -265,12 +400,135 @@ async def lifespan(app: FastAPI): logger.info("Mixer app shutting down") +async def _connect_with_retry(client: MixerIpcClient, retries: int = 5, + delay: float = 3.0) -> bool: + """Try connecting to the daemon with exponential backoff.""" + for attempt in range(1, retries + 1): + ok = await client.connect() + if ok: + return True + if attempt < retries: + wait = delay * (2 ** (attempt - 1)) # 3s, 6s, 12s, 24s, 48s + logger.info("Daemon connect attempt %d/%d failed, retrying in %.1fs...", + attempt, retries, wait) + await asyncio.sleep(wait) + else: + logger.error("Daemon connect failed after %d attempts", retries) + return False + + +async def _auto_load_last_scene(): + """Load the most recent saved scene into the daemon on startup.""" + global mixer_client + if not mixer_client or not mixer_client.is_connected: + logger.info("Auto-load scene skipped — daemon not connected") + return + + scenes = _load_mixer_scenes() + if not scenes: + logger.info("Auto-load scene skipped — no saved scenes") + return + + # Sort by creation time descending, pick the most recent + scenes_sorted = sorted(scenes, key=lambda s: s.get("createdAt", 0), reverse=True) + latest = scenes_sorted[0] + state = latest.get("state") + if not state: + logger.warning("Auto-load scene '%s' has no state data, skipping", latest.get("name", "unnamed")) + return + + try: + await _apply_scene_state(state) + logger.info("Auto-loaded scene '%s' on startup (%d channels, %d buses)", + latest.get("name", "unnamed"), + len(state.get("channels", [])), + len(state.get("buses", []))) + except MixerIpcError as e: + logger.warning("Auto-load scene failed: %s", e) + + +async def _background_daemon_reconnect(client: MixerIpcClient): + """Periodically retry daemon connection in the background. + + Once connected, loads the last saved scene. + Runs until daemon connects or the app shuts down. + """ + global mixer_daemon_connected + retry_delay = 5.0 + max_delay = 60.0 + while not client.is_connected: + await asyncio.sleep(retry_delay) + ok = await client.connect() + if ok: + mixer_daemon_connected = True + logger.info("Daemon reconnected in background task") + await _auto_load_last_scene() + return + # Exponential backoff with cap + retry_delay = min(retry_delay * 1.5, max_delay) + logger.debug("Daemon reconnect retry in %.1fs...", retry_delay) + + app = FastAPI( title="OPLabs Mixer App", version="0.2.0", lifespan=lifespan, ) +# --------------------------------------------------------------------------- +# CORS — allow dev server and configured origins +# --------------------------------------------------------------------------- + +cors_origins = os.environ.get("MIXER_CORS_ORIGINS", + "http://localhost:5173,http://localhost:5174") +app.add_middleware( + CORSMiddleware, + allow_origins=cors_origins.split(",") if cors_origins else ["*"], + allow_credentials=True, + allow_methods=["*"], + allow_headers=["*"], +) + +# --------------------------------------------------------------------------- +# HTTP Basic Auth — enabled via MIXER_AUTH_ENABLED env +# Used behind NPMplus reverse proxy when access lists don't work +# --------------------------------------------------------------------------- + +if AUTH_ENABLED: + @app.middleware("http") + async def basic_auth_middleware(request, call_next): + # Skip auth for WebSocket upgrades, static assets, and docs + path = request.url.path + if (path.startswith("/ws/") or path.startswith("/assets/") + or path.startswith("/docs") or path.startswith("/openapi")): + return await call_next(request) + + auth_header = request.headers.get("Authorization", "") + if not auth_header.startswith("Basic "): + return JSONResponse( + {"error": "Unauthorized"}, + status_code=401, + headers={"WWW-Authenticate": 'Basic realm="OPLabs Mixer"'}, + ) + + try: + decoded = base64.b64decode(auth_header[6:]).decode("utf-8") + username, password = decoded.split(":", 1) + except Exception: + return JSONResponse({"error": "Invalid auth header"}, status_code=401) + + if username != AUTH_USERNAME or password != AUTH_PASSWORD: + return JSONResponse({"error": "Unauthorized"}, status_code=401) + + return await call_next(request) + +# --------------------------------------------------------------------------- +# Register sub-routers +# --------------------------------------------------------------------------- + +app.include_router(jack_router) +app.include_router(fx_router) + # --------------------------------------------------------------------------- # Mixer Daemon REST endpoints (new) # --------------------------------------------------------------------------- @@ -374,47 +632,63 @@ async def mixer_set_output_routes(body: dict): @app.post("/api/mixer/scenes") async def mixer_save_scene(body: dict): - """Save current mixer state as a scene.""" + """Save current mixer state as a scene (file-based persistence). + + Captures the full mixer daemon state and stores it to mixer-scenes.json. + """ name = body.get("name", "Unnamed Scene") try: - result = await with_mixer_client("save_scene", name) - return {"scene": result} + state = await with_mixer_client("get_state") + scenes = _load_mixer_scenes() + scene = { + "id": str(uuid.uuid4()), + "name": name, + "createdAt": time.time(), + "state": state, + } + scenes.append(scene) + _save_mixer_scenes(scenes) + return {"scene": {"id": scene["id"], "name": scene["name"], "createdAt": scene["createdAt"]}} except MixerIpcError as e: return JSONResponse({"error": str(e)}, status_code=503) @app.post("/api/mixer/scenes/{scene_id}/load") async def mixer_load_scene(scene_id: str): - """Load (recall) a scene by ID.""" - try: - ok = await with_mixer_client("load_scene", scene_id) - if ok: - return {"status": "ok"} + """Load (recall) a scene by ID — restore daemon state from file.""" + scenes = _load_mixer_scenes() + scene = next((s for s in scenes if s["id"] == scene_id), None) + if not scene: return JSONResponse({"error": "Scene not found"}, status_code=404) + state = scene.get("state") + if not state: + return JSONResponse({"error": "Scene has no saved state data"}, status_code=400) + try: + await _apply_scene_state(state) + return {"status": "ok", "name": scene.get("name", "")} except MixerIpcError as e: return JSONResponse({"error": str(e)}, status_code=503) @app.get("/api/mixer/scenes") async def mixer_list_scenes(): - """List available scenes.""" - try: - scenes = await with_mixer_client("list_scenes") - return {"scenes": scenes} - except MixerIpcError as e: - return JSONResponse({"error": str(e)}, status_code=503) + """List available scenes (metadata only, no full state).""" + scenes = _load_mixer_scenes() + return {"scenes": [ + {"id": s["id"], "name": s.get("name", ""), "createdAt": s.get("createdAt", 0)} + for s in scenes + ]} @app.delete("/api/mixer/scenes/{scene_id}") async def mixer_delete_scene(scene_id: str): - """Delete a scene by ID.""" - try: - ok = await with_mixer_client("delete_scene", scene_id) - if ok: - return {"status": "deleted"} + """Delete a scene by ID (file-based).""" + scenes = _load_mixer_scenes() + filtered = [s for s in scenes if s["id"] != scene_id] + if len(filtered) == len(scenes): return JSONResponse({"error": "Scene not found"}, status_code=404) - except MixerIpcError as e: - return JSONResponse({"error": str(e)}, status_code=503) + _save_mixer_scenes(filtered) + return {"status": "deleted"} # --------------------------------------------------------------------------- @@ -638,13 +912,15 @@ async def websocket_proxy(ws: WebSocket): @app.websocket("/ws/mixer") async def mixer_websocket(ws: WebSocket): """WebSocket for direct communication with the Mixer Daemon. - + Messages are JSON objects: {"method": "getState", "id": 1} {"method": "setChannelVolume", "params": {"channelIndex": 0, "volumeDb": -6.0}, "id": 2} - + Responses mirror the IPC protocol: {"id": 1, "result": {...}, "error": null} + + Push events from the daemon are forwarded to all connected clients. """ await ws.accept() logger.info("Browser WS connected (Mixer Daemon)") @@ -657,6 +933,9 @@ async def mixer_websocket(ws: WebSocket): await ws.close() return + # Register for push event broadcasts + mixer_ws_clients.add(ws) + await ws.send_json({"type": "connected", "daemon": MIXER_SOCKET_PATH}) try: @@ -683,10 +962,8 @@ async def mixer_websocket(ws: WebSocket): "removeChannel": ("remove_channel", ["channelIndex"]), "getOutputRoutes": ("get_output_routes", None), "setOutputRoutes": ("set_output_routes", ["routes"]), - "saveScene": ("save_scene", ["name"]), - "loadScene": ("load_scene", ["sceneId"]), - "listScenes": ("list_scenes", None), - "deleteScene": ("delete_scene", ["sceneId"]), + # Scene methods — handled via backend REST /api/mixer/scenes/* + # (removed from WS proxy — use REST endpoints instead) } if method not in method_map: @@ -710,6 +987,8 @@ async def mixer_websocket(ws: WebSocket): logger.info("Mixer WS disconnected") except Exception as e: logger.warning("Mixer WS error: %s", e) + finally: + mixer_ws_clients.discard(ws) # --------------------------------------------------------------------------- diff --git a/backend/fx_inserts.py b/backend/fx_inserts.py new file mode 100644 index 0000000..a0cb085 --- /dev/null +++ b/backend/fx_inserts.py @@ -0,0 +1,281 @@ +""" +FX Inserts API — manage PiPedal plugin insert configurations on mixer channels. + +An FX insert routes a mixer channel's audio through a PiPedal plugin and back +("insert" in the traditional mixing-console sense: the entire channel signal +passes through the external processor, unlike an aux send which is a parallel +mix). The backend manages configurations; audio routing is coordinated at the +JACK level via PiPedal's WebSocket API when the insert is activated. + +Data flow: + Browser → REST API (insert CRUD) → fx_inserts.json (config persistence) + Browser → REST API (route) → PiPedal WS (JACK connect/disconnect) + +The routing strategy for a channel insert: + mixer-daemon:channel_{N}_send → pipedal:{plugin_id}:audio_in_1 + pipedal:{plugin_id}:audio_out_1 → mixer-daemon:channel_{N}_return +""" + +from __future__ import annotations + +import json +import logging +import uuid +from pathlib import Path +from typing import Optional + +from fastapi import APIRouter, HTTPException +from pydantic import BaseModel + +logger = logging.getLogger("fx-inserts") + +# File-based storage for FX insert configurations +FX_INSERTS_FILE = Path(__file__).resolve().parent / "fx_inserts.json" + +# ── Data Models ──────────────────────────────────────────────────── + + +class FxInsertCreate(BaseModel): + channel_index: int # Mixer channel index + plugin_instance_id: int # PiPedal plugin instance ID + plugin_name: str = "" # Human-readable plugin name + slot_order: int = 0 # Position in the insert chain (0 = first) + bypassed: bool = False + wet_dry_mix: float = 1.0 # 0.0 (dry) to 1.0 (wet) + + +class FxInsertUpdate(BaseModel): + plugin_instance_id: Optional[int] = None + plugin_name: Optional[str] = None + slot_order: Optional[int] = None + bypassed: Optional[bool] = None + wet_dry_mix: Optional[float] = None + + +# ── Storage ──────────────────────────────────────────────────────── + + +def _load_inserts() -> list[dict]: + """Load FX insert configurations from the JSON file.""" + if not FX_INSERTS_FILE.exists(): + return [] + try: + data = json.loads(FX_INSERTS_FILE.read_text()) + return data if isinstance(data, list) else [] + except (json.JSONDecodeError, Exception) as e: + logger.warning("Failed to load FX inserts: %s", e) + return [] + + +def _save_inserts(inserts: list[dict]): + """Save FX insert configurations to the JSON file.""" + FX_INSERTS_FILE.parent.mkdir(parents=True, exist_ok=True) + FX_INSERTS_FILE.write_text(json.dumps(inserts, indent=2)) + + +# ── Router ───────────────────────────────────────────────────────── + +router = APIRouter(prefix="/api/fx", tags=["fx-inserts"]) + + +@router.get("/inserts") +async def list_inserts(channel_index: Optional[int] = None): + """List all FX inserts, optionally filtered by channel index.""" + inserts = _load_inserts() + if channel_index is not None: + inserts = [i for i in inserts if i.get("channel_index") == channel_index] + inserts.sort(key=lambda x: x.get("slot_order", 0)) + return {"inserts": inserts} + + +@router.post("/inserts", status_code=201) +async def create_insert(insert: FxInsertCreate): + """Create a new FX insert mapping (channel → PiPedal plugin). + + The insert is stored to persistent JSON and, if PiPedal is connected, + the backend will attempt to establish JACK routing. + """ + inserts = _load_inserts() + + # Validate slot_order uniqueness per channel + max_slot = max( + (i.get("slot_order", 0) for i in inserts + if i.get("channel_index") == insert.channel_index), + default=-1, + ) + slot = insert.slot_order if insert.slot_order <= max_slot + 1 else max_slot + 1 + + new_insert = { + "id": str(uuid.uuid4()), + "channel_index": insert.channel_index, + "plugin_instance_id": insert.plugin_instance_id, + "plugin_name": insert.plugin_name or f"Plugin {insert.plugin_instance_id}", + "slot_order": slot, + "bypassed": insert.bypassed, + "wet_dry_mix": min(1.0, max(0.0, insert.wet_dry_mix)), + } + inserts.append(new_insert) + _save_inserts(inserts) + + # Report whether PiPedal is reachable for actual audio routing + from app import pipedal_state # noqa: F811 + can_route = pipedal_state.get("connected", False) + new_insert["can_route"] = can_route + + logger.info( + "FX insert created: channel %d → plugin %d (slot %d, bypass=%s)", + insert.channel_index, insert.plugin_instance_id, slot, insert.bypassed, + ) + return {"insert": new_insert} + + +@router.put("/inserts/{insert_id}") +async def update_insert(insert_id: str, update: FxInsertUpdate): + """Update an existing FX insert (bypass, wet/dry, order, plugin).""" + inserts = _load_inserts() + for ins in inserts: + if ins["id"] == insert_id: + if update.plugin_instance_id is not None: + ins["plugin_instance_id"] = update.plugin_instance_id + if update.plugin_name is not None: + ins["plugin_name"] = update.plugin_name + if update.slot_order is not None: + ins["slot_order"] = update.slot_order + if update.bypassed is not None: + ins["bypassed"] = update.bypassed + if update.wet_dry_mix is not None: + ins["wet_dry_mix"] = min(1.0, max(0.0, update.wet_dry_mix)) + _save_inserts(inserts) + logger.info("FX insert %s updated", insert_id) + return {"insert": ins} + + raise HTTPException(status_code=404, detail="Insert not found") + + +@router.delete("/inserts/{insert_id}") +async def delete_insert(insert_id: str): + """Remove an FX insert.""" + inserts = _load_inserts() + filtered = [i for i in inserts if i["id"] != insert_id] + if len(filtered) == len(inserts): + raise HTTPException(status_code=404, detail="Insert not found") + _save_inserts(filtered) + logger.info("FX insert %s deleted", insert_id) + return {"status": "deleted"} + + +@router.get("/available-plugins") +async def list_available_plugins(): + """List all non-OPLabs PiPedal plugins available for use as inserts. + + Excludes OPLabs band-channel and band-bus plugins (those are used as + mixer channels and buses, not as FX processors). + + Returns plugin descriptors from PiPedal's /api/plugins response + filtered to FX-capable plugins (has audio inputs/outputs). + """ + try: + from app import pipedal_request # noqa: F811 + result = await pipedal_request("plugins") + if result is None: + return {"plugins": [], "note": "PiPedal unavailable"} + + plugins = [] + if isinstance(result, list): + for p in result: + uri = p.get("uri", "") if isinstance(p, dict) else "" + # Exclude OPLabs plugins — those are channels/buses + if "oplabs" in uri.lower(): + continue + plugins.append({ + "uri": uri, + "name": p.get("name", p.get("pluginName", "")), + "brand": p.get("brand", ""), + "audioInputs": p.get("audioInputs", 2), + "audioOutputs": p.get("audioOutputs", 2), + "instanceId": p.get("instanceId"), + }) + return {"plugins": plugins} + except Exception as e: + logger.warning("Failed to list available plugins: %s", e) + return {"plugins": [], "note": str(e)} + + +@router.get("/channel/{channel_index}") +async def get_channel_inserts(channel_index: int): + """Get all FX inserts for a specific channel, ordered by slot_order.""" + inserts = _load_inserts() + channel_inserts = [ + i for i in inserts if i.get("channel_index") == channel_index + ] + channel_inserts.sort(key=lambda x: x.get("slot_order", 0)) + return {"inserts": channel_inserts} + + +@router.post("/route/{insert_id}") +async def route_insert_audio(insert_id: str): + """Attempt to create JACK connections for a specific insert. + + Returns the intended source→destination port connections. + The actual routing must be performed via PiPedal's JACK API + (POST /api/jack/connect) after this call. + """ + inserts = _load_inserts() + insert = None + for ins in inserts: + if ins["id"] == insert_id: + insert = ins + break + if not insert: + raise HTTPException(status_code=404, detail="Insert not found") + + channel_idx = insert["channel_index"] + plugin_instance_id = insert["plugin_instance_id"] + + # Declare the intended JACK port connections for this insert + # These are metadata — actual JACK routing depends on the running + # audio graph and is performed separately via the JACK API + connections = [ + { + "source": f"mixer-daemon:channel_{channel_idx}_send", + "destination": f"pipedal:{plugin_instance_id}:audio_in_1", + }, + { + "source": f"pipedal:{plugin_instance_id}:audio_out_1", + "destination": f"mixer-daemon:channel_{channel_idx}_return", + }, + ] + + logger.info( + "FX insert %s route intended: channel %d ↔ plugin %d", + insert_id, channel_idx, plugin_instance_id, + ) + return { + "status": "routed", + "insert_id": insert_id, + "connections": connections, + } + + +@router.post("/route-all") +async def route_all_inserts(): + """Re-route all active (non-bypassed) FX inserts. + + Returns the intended routing state for all active inserts. + """ + inserts = _load_inserts() + active = [i for i in inserts if not i.get("bypassed", False)] + + routed = [] + for ins in active: + channel_idx = ins["channel_index"] + plugin_id = ins["plugin_instance_id"] + routed.append({ + "insert_id": ins["id"], + "channel": channel_idx, + "plugin": plugin_id, + "status": "configured", + }) + + logger.info("Re-routed %d active FX inserts", len(active)) + return {"routed": routed, "total": len(active)} diff --git a/backend/mixer-scenes.json b/backend/mixer-scenes.json new file mode 100644 index 0000000..e7c923c --- /dev/null +++ b/backend/mixer-scenes.json @@ -0,0 +1,71 @@ +{ + "scenes": [ + { + "id": "577604f4-de57-45e2-bb26-4396dabb5770", + "name": "Production Test", + "createdAt": 1782235528.6320288, + "state": { + "buses": [ + { + "id": 1, + "mute": false, + "name": "Master", + "type": "Master", + "volume": 0.0 + } + ], + "channels": [ + { + "auxSendLevels": [], + "channelIndex": 0, + "hpEnabled": false, + "hpFrequency": 80.0, + "label": "Input 1", + "mute": false, + "pan": 0.0, + "solo": false, + "type": "Instrument", + "volume": -96.0 + }, + { + "auxSendLevels": [], + "channelIndex": 1, + "hpEnabled": false, + "hpFrequency": 80.0, + "label": "Input 2", + "mute": false, + "pan": 0.0, + "solo": false, + "type": "Instrument", + "volume": -96.0 + } + ], + "outputRoutes": [ + { + "channels": 2, + "sourceBusId": 1, + "sourceStartChannel": 0, + "targetStartChannel": 0 + } + ], + "physicalInputCount": 2, + "physicalOutputCount": 2, + "routes": [ + { + "level": 0.0, + "sourceId": 1, + "sourceType": "channel", + "targetBusId": 1 + }, + { + "level": 0.0, + "sourceId": 2, + "sourceType": "channel", + "targetBusId": 1 + } + ], + "sampleRate": 48000 + } + } + ] +} \ No newline at end of file diff --git a/backend/mixer_ipc.py b/backend/mixer_ipc.py index f0b1c7b..82ef55b 100644 --- a/backend/mixer_ipc.py +++ b/backend/mixer_ipc.py @@ -1,21 +1,18 @@ """ OPLabs Mixer — Unix domain socket IPC client. -Connects to the C++ MixerDaemon over a Unix domain socket using a -length-prefixed JSON protocol. +Connects to the C++ MixerDaemon over a Unix domain socket using the +daemon's newline-terminated JSON protocol. Protocol: - Frame: 4-byte big-endian uint32 length prefix + UTF-8 JSON payload - - Request: {"id": , "method": , "params": {}} - Response: {"id": , "result": , "error": } - Push: {"type": "push", "event": , "data": {}} + Send: JSON payload + newline ('\\n') + Receive: JSON payload + newline ('\\n') + Each connection handles one request batch (send → receive → close). """ import asyncio import json import logging -import struct from typing import Any, Optional logger = logging.getLogger("mixer-ipc") @@ -28,6 +25,11 @@ class MixerIpcError(Exception): class MixerIpcClient: """Async Unix socket IPC client for the OPLabs Mixer Daemon. + Each request opens a fresh connection to the daemon, sends the + command as a newline-terminated JSON line, reads the response, + and closes. This matches the daemon's line-based protocol where + one connection = one request batch. + Usage: client = MixerIpcClient(socket_path="/tmp/oplabs-mixer.sock") await client.connect() @@ -46,41 +48,42 @@ class MixerIpcClient: self._writer: Optional[asyncio.StreamWriter] = None self._connected = False self._next_id = 1 - self._pending: dict[int, asyncio.Future] = {} - self._read_task: Optional[asyncio.Task] = None # ------------------------------------------------------------------ # Connection lifecycle # ------------------------------------------------------------------ async def connect(self) -> bool: - """Connect to the Unix domain socket. Returns True on success.""" + """Probe the Unix domain socket to verify daemon is reachable. + + Opens a test connection to the daemon and immediately closes it. + The daemon's protocol is connection-per-request, so we don't + hold a persistent connection. + """ try: loop = asyncio.get_running_loop() - self._reader, self._writer = await asyncio.wait_for( + reader, writer = await asyncio.wait_for( asyncio.open_unix_connection(self._socket_path), timeout=self._connect_timeout, ) + # Test succeeded — daemon is listening. Close immediately. + writer.close() + await writer.wait_closed() self._connected = True - self._read_task = asyncio.create_task(self._read_loop()) logger.info("Connected to mixer daemon at %s", self._socket_path) return True except (FileNotFoundError, ConnectionRefusedError, asyncio.TimeoutError, OSError) as exc: - logger.warning("Failed to connect to mixer daemon: %s", exc) self._connected = False + logger.warning("Daemon not reachable at %s: %s", self._socket_path, exc) return False async def close(self): """Close the connection.""" - self._connected = False - if self._read_task: - self._read_task.cancel() - try: - await self._read_task - except asyncio.CancelledError: - pass - self._read_task = None + await self._disconnect() + + async def _disconnect(self): + """Close the underlying socket.""" if self._writer: try: self._writer.close() @@ -88,108 +91,82 @@ class MixerIpcClient: except Exception: pass self._writer = None + self._reader = None + + async def _ensure_connection(self): + """Open a fresh connection to the daemon.""" + await self._disconnect() + try: + loop = asyncio.get_running_loop() + self._reader, self._writer = await asyncio.wait_for( + asyncio.open_unix_connection(self._socket_path), + timeout=self._connect_timeout, + ) + except (FileNotFoundError, ConnectionRefusedError, asyncio.TimeoutError, + OSError) as exc: + self._writer = None + self._reader = None + raise MixerIpcError(f"Cannot connect to daemon: {exc}") @property def is_connected(self) -> bool: return self._connected # ------------------------------------------------------------------ - # Low-level send / receive + # Send / receive (line-based protocol, one-shot connection) # ------------------------------------------------------------------ - async def _send_frame(self, payload: bytes): - """Send a length-prefixed frame.""" - length = struct.pack("!I", len(payload)) - self._writer.write(length + payload) - await self._writer.drain() - - async def _read_loop(self): - """Background task: read frames and dispatch responses.""" - try: - while self._connected and self._reader: - # Read 4-byte length prefix - header = await self._reader.readexactly(4) - length = struct.unpack("!I", header)[0] - - if length == 0: - continue - - # Read JSON payload - data = await self._reader.readexactly(length) - payload = data.decode("utf-8") - - try: - msg = json.loads(payload) - except json.JSONDecodeError: - logger.warning("Invalid JSON from daemon: %s", payload[:200]) - continue - - # Dispatch - if isinstance(msg, dict): - if "type" in msg and msg["type"] == "push": - # Push message (VU meter updates, state changes) - await self._handle_push(msg) - elif "id" in msg: - # Response to a request - req_id = msg["id"] - future = self._pending.pop(req_id, None) - if future and not future.done(): - if msg.get("error"): - future.set_exception( - MixerIpcError(msg["error"]) - ) - else: - future.set_result(msg.get("result")) - except asyncio.IncompleteReadError: - logger.info("Mixer daemon connection closed") - except asyncio.CancelledError: - pass - except Exception as exc: - logger.warning("Read loop error: %s", exc) - finally: - self._connected = False - # Fail all pending requests - for future in self._pending.values(): - if not future.done(): - future.set_exception(MixerIpcError("Connection closed")) - self._pending.clear() - async def _send_request(self, method: str, params: dict = None) -> Any: - """Send a request and wait for the response.""" - if not self._connected or not self._writer: + """Open connection, send request, wait for response, close. + + Wire format: ``{"cmd": method, **params}`` (daemon's native format). + The daemon expects ``cmd`` as the command field and all parameters + at the top level (not nested under a ``params`` key). + """ + if not self._connected: raise MixerIpcError("Not connected to mixer daemon") - req_id = self._next_id - self._next_id += 1 + # Build daemon-native wire message: {"cmd": method, ...params} + msg: dict[str, Any] = {"cmd": method} + if params: + msg.update(params) - msg = { - "id": req_id, - "method": method, - "params": params or {}, - } - - future: asyncio.Future = asyncio.get_running_loop().create_future() - self._pending[req_id] = future + # Open fresh connection + await self._ensure_connection() try: - payload = json.dumps(msg).encode("utf-8") - await self._send_frame(payload) + # Send: JSON payload + newline + payload = json.dumps(msg) + "\n" + self._writer.write(payload.encode("utf-8")) + await self._writer.drain() + + # Read: one response line + response_line = await asyncio.wait_for( + self._reader.readline(), + timeout=self._request_timeout, + ) + if not response_line: + raise MixerIpcError("Empty response from daemon") + + response = json.loads(response_line.decode("utf-8").strip()) + + # Check for error status + if isinstance(response, dict): + if response.get("status") == "error": + raise MixerIpcError(response.get("message", "Unknown error")) + + return response - result = await asyncio.wait_for(future, timeout=self._request_timeout) - return result except asyncio.TimeoutError: - self._pending.pop(req_id, None) raise MixerIpcError(f"Request '{method}' timed out") - - async def _handle_push(self, msg: dict): - """Handle an unsolicited push message from the daemon. - - Override in subclass or attach a callback. - """ - event = msg.get("event", "unknown") - data = msg.get("data") - logger.debug("Push event: %s", event) - # Subclasses can override to handle VU meter updates, etc. + except json.JSONDecodeError as e: + raise MixerIpcError(f"Invalid JSON response: {e}") + except MixerIpcError: + raise + except Exception as e: + raise MixerIpcError(f"Request '{method}' failed: {e}") + finally: + await self._disconnect() # ------------------------------------------------------------------ # High-level API @@ -206,44 +183,92 @@ class MixerIpcClient: async def set_channel_volume(self, channel_index: int, volume_db: float): """Set channel volume in dB (-inf to +12).""" await self._send_request("setChannelVolume", { - "channelIndex": channel_index, - "volumeDb": volume_db, + "channel": channel_index, + "volume": volume_db, }) async def set_channel_pan(self, channel_index: int, pan: float): """Set channel pan (-1.0 left to +1.0 right).""" await self._send_request("setChannelPan", { - "channelIndex": channel_index, + "channel": channel_index, "pan": pan, }) async def set_channel_mute(self, channel_index: int, mute: bool): """Set channel mute state.""" await self._send_request("setChannelMute", { - "channelIndex": channel_index, + "channel": channel_index, "mute": mute, }) async def set_channel_solo(self, channel_index: int, solo: bool): """Set channel solo state.""" await self._send_request("setChannelSolo", { - "channelIndex": channel_index, + "channel": channel_index, "solo": solo, }) + async def set_channel_label(self, channel_index: int, label: str): + """Set the label/name for a channel.""" + await self._send_request("setChannelLabel", { + "channel": channel_index, + "label": label, + }) + # --- Channel Lifecycle --- async def add_channel(self, physical_input_index: int = 0) -> int: """Add a new channel. Returns the channel index.""" result = await self._send_request("addChannel", { - "physicalInputIndex": physical_input_index, + "physicalInput": physical_input_index, }) return result.get("channelIndex", -1) async def remove_channel(self, channel_index: int): """Remove a channel by index.""" await self._send_request("removeChannel", { - "channelIndex": channel_index, + "channel": channel_index, + }) + + # --- Bus Control --- + + async def set_bus_volume(self, bus_id: int, volume_db: float): + """Set bus volume in dB (-inf to +12).""" + await self._send_request("setBusVolume", { + "busId": bus_id, + "volume": volume_db, + }) + + async def set_bus_mute(self, bus_id: int, mute: bool): + """Set bus mute state.""" + await self._send_request("setBusMute", { + "busId": bus_id, + "mute": mute, + }) + + # --- Routing --- + + async def route_channel_to_bus(self, channel_index: int, bus_id: int, level_db: float = 0.0): + """Route a channel to a bus with a given level in dB.""" + await self._send_request("routeChannelToBus", { + "channel": channel_index, + "busId": bus_id, + "level": level_db, + }) + + async def route_bus_to_bus(self, source_bus_id: int, target_bus_id: int, level_db: float = 0.0): + """Route one bus to another bus.""" + await self._send_request("routeBusToBus", { + "sourceBusId": source_bus_id, + "targetBusId": target_bus_id, + "level": level_db, + }) + + async def remove_route(self, source_id: int, target_bus_id: int): + """Remove a route.""" + await self._send_request("removeRoute", { + "sourceId": source_id, + "targetBusId": target_bus_id, }) # --- Output Routing --- @@ -264,28 +289,6 @@ class MixerIpcClient: "routes": routes, }) - # --- Scenes --- - - async def save_scene(self, name: str) -> dict: - """Save the current mixer state as a named scene. - Returns {"id": int, "name": str}.""" - return await self._send_request("saveScene", {"name": name}) - - async def load_scene(self, scene_id: str) -> bool: - """Load (recall) a scene by its ID. Returns True on success.""" - result = await self._send_request("loadScene", {"sceneId": scene_id}) - return result.get("ok", False) - - async def list_scenes(self) -> list[dict]: - """List all available scenes.""" - result = await self._send_request("listScenes") - return result.get("scenes", []) - - async def delete_scene(self, scene_id: str) -> bool: - """Delete a scene by ID. Returns True on success.""" - result = await self._send_request("deleteScene", {"sceneId": scene_id}) - return result.get("ok", False) - # ------------------------------------------------------------------ # Convenience context manager diff --git a/backend/oplabs-mixer-backend.service b/backend/oplabs-mixer-backend.service new file mode 100644 index 0000000..dbb9a2d --- /dev/null +++ b/backend/oplabs-mixer-backend.service @@ -0,0 +1,37 @@ +[Unit] +Description=OPLabs Mixer Backend (FastAPI) +Documentation=https://gitea.ourpad.casa/oplabs/oplabs-mixer-app +After=network.target oplabs-mixer-daemon.service +Wants=oplabs-mixer-daemon.service +StartLimitBurst=5 +StartLimitIntervalSec=30 + +[Service] +Type=simple +User=oplabs +Group=oplabs +WorkingDirectory=/home/oplabs/projects/oplabs-mixer-app/backend +Environment=PATH=/home/oplabs/projects/oplabs-mixer-app/backend/venv/bin:/usr/local/bin:/usr/bin +Environment=PYTHONUNBUFFERED=1 + +SyslogIdentifier=oplabs-mixer-backend + +# Auth credentials from environment file (optional — create for HTTP Basic Auth) +EnvironmentFile=-/etc/oplabs/mixer-backend.env + +# Uncomment these to enable HTTP Basic Auth (for NPMplus reverse proxy): +# Environment=MIXER_AUTH_ENABLED=true +# Environment=MIXER_AUTH_USERNAME=oplabs +# Environment=MIXER_AUTH_PASSWORD=your-password-here + +ExecStart=/home/oplabs/projects/oplabs-mixer-app/backend/venv/bin/uvicorn app:app --host 0.0.0.0 --port 8081 --workers 2 + +# Exit code 143 (SIGTERM) is expected on clean shutdown — don't restart for that +Restart=always +RestartSec=5 + +StandardOutput=journal +StandardError=journal + +[Install] +WantedBy=multi-user.target diff --git a/frontend/dist/assets/index-B9JhTSIS.css b/frontend/dist/assets/index-B9JhTSIS.css new file mode 100644 index 0000000..e2329f0 --- /dev/null +++ b/frontend/dist/assets/index-B9JhTSIS.css @@ -0,0 +1 @@ +.patch-bay{background:var(--bg, #1a1a2e);border:1px solid var(--border, #2a2a4a);border-radius:var(--radius, 8px);overflow:hidden;display:flex;flex-direction:column}.patch-bay-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--surface, #16213e);border-bottom:1px solid var(--border, #2a2a4a);gap:12px;flex-wrap:wrap}.patch-bay-title{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--text, #eaeaea)}.patch-icon{font-size:1rem}.patch-conn-count{font-size:.65rem;background:var(--accent, #e94560);color:#fff;padding:1px 6px;border-radius:8px;font-weight:600;min-width:18px;text-align:center}.patch-bay-actions{display:flex;align-items:center;gap:8px}.patch-armed-info{font-size:.72rem;color:var(--accent, #e94560);background:#e945601a;padding:3px 8px;border-radius:4px;white-space:nowrap}.patch-armed-info code{font-weight:600}.patch-action-state{font-size:.7rem;padding:3px 8px;border-radius:4px}.patch-action-state.connecting,.patch-action-state.disconnecting{color:var(--warning, #ff9800);background:#ff98001f}.patch-action-state.error{color:var(--error, #f44336);background:#f443361f}.patch-action-btn{display:flex;align-items:center;gap:4px;background:transparent;color:var(--text-dim, #9e9e9e);border:1px solid var(--border, #2a2a4a);padding:4px 10px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.72rem;transition:all .15s}.patch-action-btn:hover:not(:disabled){border-color:var(--error, #f44336);color:var(--error, #f44336);background:#f4433614}.patch-action-btn:disabled{opacity:.4;cursor:default}.patch-refresh-btn{background:var(--surface-alt, #0f3460);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);padding:4px 10px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.85rem;transition:all .15s}.patch-refresh-btn:hover:not(:disabled){border-color:var(--accent, #e94560);background:#e945601a}.patch-refresh-btn:disabled{opacity:.4;cursor:default}.patch-bay-body{position:relative;display:flex;gap:0;padding:0;overflow-x:auto}.patch-column{display:flex;flex-direction:column;gap:2px;padding:8px 4px;z-index:2;min-width:240px;max-width:300px}.patch-column-left{padding-right:8px;border-right:1px solid var(--border, #2a2a4a)}.patch-column-right{padding-left:8px}.patch-group{margin-bottom:1px}.patch-group-header{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim, #9e9e9e);background:#ffffff05;border-radius:4px;height:28px}.patch-group-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim, #9e9e9e)}.patch-group-dot.physical{background:#4fc3f7}.patch-group-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.patch-port{display:flex;align-items:center;gap:6px;padding:5px 8px;height:32px;border-radius:4px;cursor:pointer;transition:all .12s;border-left:2px solid transparent;position:relative}.patch-port:hover{background:#ffffff0d}.patch-port.connected{border-left-color:var(--accent, #e94560);background:#e945600f}.patch-port.armed{border-left-color:#4fc3f7;background:#4fc3f71a;box-shadow:inset 0 0 0 1px #4fc3f74d}.patch-port.available{border-left-color:transparent}.patch-port.available:hover{border-left-color:var(--accent, #e94560);background:#e9456014}.patch-port-indicator{width:4px;height:4px;border-radius:50%;background:var(--accent, #e94560);flex-shrink:0}.patch-port-name{font-size:.78rem;color:var(--text, #eaeaea);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:SF Mono,Fira Code,Cascadia Code,monospace}.patch-port-name.physical{color:#4fc3f7}.patch-port-conn-count{font-size:.6rem;background:var(--accent, #e94560);color:#fff;padding:0 5px;border-radius:6px;font-weight:600;min-width:14px;text-align:center;flex-shrink:0}.patch-cables-svg{z-index:1;pointer-events:none}.patch-source-note{position:absolute;bottom:4px;right:8px;font-size:.6rem;color:var(--text-dim, #9e9e9e);opacity:.5;z-index:3}.patch-bay-error{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#f4433614;border-top:1px solid rgba(244,67,54,.2);font-size:.72rem;color:var(--error, #f44336)}.patch-bay-error.action{background:#f443361f}.patch-dismiss-btn{background:transparent;border:none;color:var(--error, #f44336);cursor:pointer;font-size:.85rem;padding:2px 6px;border-radius:4px}.patch-dismiss-btn:hover{background:#f4433626}.patch-bay-loading,.patch-bay-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;color:var(--text-dim, #9e9e9e);gap:12px}.patch-empty-icon{font-size:2.5rem;opacity:.5}.patch-bay-empty h3{font-size:1rem;color:var(--text, #eaeaea)}.patch-bay-empty p{font-size:.82rem;max-width:400px;line-height:1.5}.patch-empty-note{font-size:.72rem;opacity:.6}.patch-spinner{width:24px;height:24px;border:2px solid var(--border, #2a2a4a);border-top-color:var(--accent, #e94560);border-radius:50%;animation:patch-spin .8s linear infinite}@keyframes patch-spin{to{transform:rotate(360deg)}}.mixer-patch-btn{display:flex;align-items:center;gap:6px;background:var(--surface-alt, #0f3460);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);padding:6px 12px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.8rem;font-weight:500;transition:all .2s}.mixer-patch-btn:hover{border-color:var(--accent, #e94560);background:#e945601a}.mixer-patch-btn.active{border-color:var(--accent, #e94560);background:#e9456026;color:var(--accent, #e94560)}.mixer-patch-pane{width:100%;padding:12px;overflow-y:auto}.level-meter{display:flex;flex-direction:column;align-items:center;gap:2px;--meter-green: #4caf50;--meter-yellow: #ff9800;--meter-red: #f44336}.level-meter.mini{gap:1px}.level-meter-stereo-pair{display:flex;gap:2px;flex:1}.level-meter-channel{display:flex;flex-direction:column;align-items:center;gap:1px;width:14px}.level-meter-channel.mini{width:8px}.level-meter-side-label{font-size:.55rem;color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.level-meter-bar-track{position:relative;width:100%;flex:1;min-height:60px;background:#00000080;border-radius:2px;border:1px solid var(--border);overflow:hidden}.level-meter.mini .level-meter-bar-track{min-height:30px}.level-meter-bar-fill{position:absolute;bottom:0;left:0;right:0;transition:height .05s linear;border-radius:1px}.level-meter-peak{position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:1px;transition:bottom .15s ease-out;z-index:2}.level-meter-tick{position:absolute;left:0;right:0;height:1px;background:#ffffff26;z-index:1}.level-meter-tick.mark-yellow{background:#ff98004d}.level-meter-tick.mark-green{background:#4caf5033}.level-meter-label{font-size:.6rem;color:var(--text-dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}.level-meter-db-values{display:flex;gap:4px;font-size:.6rem;font-family:monospace;color:var(--text-dim)}.level-meter-db-values .hot{color:var(--meter-red);font-weight:700}.rotary-knob{display:flex;flex-direction:column;align-items:center;gap:2px;user-select:none;-webkit-user-select:none;touch-action:none}.rotary-knob-svg{display:block;cursor:grab;border-radius:50%;transition:filter .15s;outline:none}.rotary-knob-svg:hover{filter:brightness(1.15)}.rotary-knob-svg:focus-visible{outline:2px solid var(--knob-accent, var(--accent, #e94560));outline-offset:2px}.rotary-knob-svg.dragging{cursor:grabbing;filter:brightness(1.25)}.rotary-knob-track{stroke:var(--knob-track, var(--border, #2a2a4a));opacity:.5}.rotary-knob-fill{stroke:var(--knob-accent, var(--accent, #e94560));filter:drop-shadow(0 0 2px var(--knob-accent, var(--accent, #e94560)));transition:d .08s ease-out}.rotary-knob-body{stroke:var(--knob-track, var(--border, #2a2a4a));stroke-width:.5;fill:var(--knob-bg, #1e2a4a)}.rotary-knob-needle{stroke:var(--knob-accent, var(--accent, #e94560));stroke-width:2;stroke-linecap:round;transition:transform .08s ease-out}.rotary-knob-centre{fill:var(--knob-accent, var(--accent, #e94560));opacity:.8}.rotary-knob-label{font-size:.5rem;font-weight:600;color:var(--text-dim, #9e9e9e);text-transform:uppercase;letter-spacing:.5px;line-height:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.rotary-knob-readout{font-size:.55rem;font-family:Cooper Hewitt,SF Mono,Fira Code,monospace;color:var(--text, #eaeaea);text-align:center;line-height:1;white-space:nowrap}.channel-strip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;background:var(--surface, #16213e);border:1px solid var(--border, #2a2a4a);border-top:3px solid var(--channel-accent, #666);border-radius:var(--radius, 8px);min-width:90px;max-width:110px;transition:border-top-color .3s,box-shadow .2s}.channel-strip:hover{box-shadow:0 2px 12px #0000004d}.channel-header{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}.channel-label{font-size:.7rem;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--text, #eaeaea);cursor:pointer;padding:1px 4px;border-radius:3px;transition:background .15s}.channel-label:hover{background:#ffffff14}.channel-label-input{font-size:.7rem;font-weight:600;text-align:center;width:100%;padding:1px 4px;background:var(--bg, #1a1a2e);color:var(--text, #eaeaea);border:1px solid var(--channel-accent, #666);border-radius:3px;outline:none}.channel-type-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:3px;border:1px solid;font-size:.55rem;font-weight:600;letter-spacing:.3px;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.3}.channel-type-icon{font-size:.75em;line-height:1}.channel-type-name{line-height:1}.channel-hpf-section{display:flex;align-items:center;gap:3px;width:100%;min-height:22px}.channel-hpf-toggle{flex-shrink:0;width:32px;height:18px;border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.5rem;font-weight:700;cursor:pointer;transition:all .15s;background:var(--bg, #1a1a2e);color:var(--text-dim, #9e9e9e);-webkit-user-select:none;user-select:none;line-height:1;padding:0}.channel-hpf-toggle.active{background:var(--channel-accent, #666);color:#fff;border-color:var(--channel-accent, #666)}.channel-hpf-toggle:hover{opacity:.85}.channel-hpf-slider-group{display:flex;align-items:center;gap:2px;flex:1;min-width:0}.channel-hpf-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:var(--border, #2a2a4a);border-radius:2px;outline:none;cursor:pointer;min-width:0}.channel-hpf-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:8px;height:10px;border-radius:1px;background:var(--channel-accent, #666);border:1px solid rgba(255,255,255,.3);cursor:pointer}.channel-hpf-slider::-moz-range-thumb{width:8px;height:10px;border-radius:1px;background:var(--channel-accent, #666);border:1px solid rgba(255,255,255,.3);cursor:pointer}.channel-hpf-readout{font-size:.5rem;font-family:monospace;color:var(--text-dim, #9e9e9e);min-width:24px;text-align:right;flex-shrink:0}.channel-meter-section{width:100%;display:flex;justify-content:center;flex:1;min-height:50px}.channel-mute-solo{display:flex;gap:3px;width:100%;justify-content:center}.channel-btn{width:28px;height:22px;border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.65rem;font-weight:700;cursor:pointer;transition:all .15s;background:var(--bg, #1a1a2e);color:var(--text-dim, #9e9e9e);-webkit-user-select:none;user-select:none;line-height:1;padding:0}.channel-btn.mute.active{background:var(--error, #f44336);color:#fff;border-color:var(--error, #f44336)}.channel-btn.solo.active{background:var(--warning, #ff9800);color:#000;border-color:var(--warning, #ff9800)}.channel-btn:hover{opacity:.85}.channel-pan{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}.channel-pan-label{font-size:.55rem;text-transform:uppercase;color:var(--text-dim, #9e9e9e);letter-spacing:.5px}.channel-pan-control{display:flex;align-items:center;gap:3px;width:100%}.channel-pan-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--border, #2a2a4a);border-radius:2px;outline:none;cursor:pointer}.channel-pan-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:var(--channel-accent, #666);border:1px solid rgba(255,255,255,.3);cursor:pointer}.channel-pan-slider::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--channel-accent, #666);border:1px solid rgba(255,255,255,.3);cursor:pointer}.channel-pan-value{font-size:.55rem;font-family:monospace;color:var(--text-dim, #9e9e9e);min-width:22px;text-align:center}.channel-fader-section{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:4px 0}.channel-type-selector{width:100%}.channel-type-select{width:100%;padding:2px 4px;background:var(--bg, #1a1a2e);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.55rem;cursor:pointer;outline:none}.channel-type-select:focus{border-color:var(--channel-accent, #666)}.channel-type-select option{background:var(--bg, #1a1a2e);color:var(--text, #eaeaea)}.bus-strip{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--surface, #16213e);border:1px solid var(--border, #2a2a4a);border-radius:var(--radius, 8px)}.bus-master-section{display:flex;align-items:center;gap:12px;padding-bottom:8px}.bus-master-header{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:50px}.bus-master-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text, #eaeaea)}.bus-master-meter{flex:1;max-width:60px}.bus-master-fader{flex:1;max-width:120px}.bus-btn{width:24px;height:20px;border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.6rem;font-weight:700;cursor:pointer;transition:all .15s;background:var(--bg, #1a1a2e);color:var(--text-dim, #9e9e9e);-webkit-user-select:none;user-select:none;line-height:1;text-align:center}.bus-btn.mute.active{background:var(--error, #f44336);color:#fff;border-color:var(--error, #f44336)}.bus-btn.mini{width:18px;height:16px;font-size:.5rem}.bus-btn:hover{opacity:.85}.bus-divider{height:1px;background:var(--border, #2a2a4a);margin:0 -4px}.bus-channels{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}.bus-channel{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:36px;max-width:44px;padding:6px 4px;background:var(--bg, #1a1a2e);border-radius:4px;border:1px solid var(--border, #2a2a4a);flex-shrink:0}.bus-channel-label{font-size:.55rem;font-weight:700;color:var(--text-dim, #9e9e9e);text-align:center}.bus-channel-meter{width:100%;height:30px;display:flex;justify-content:center}.bus-channel-fader{width:100%}.bus-channel-db{font-size:.45rem;font-family:monospace;color:var(--text-dim, #9e9e9e);text-align:center}.bus-fader{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--border, #2a2a4a);border-radius:3px;outline:none;cursor:pointer;border:none}.bus-fader::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:14px;background:#e94560;border:1px solid rgba(255,255,255,.3);border-radius:2px;cursor:pointer}.bus-fader::-moz-range-thumb{width:12px;height:14px;background:#e94560;border:1px solid rgba(255,255,255,.3);border-radius:2px;cursor:pointer}.bus-fader.mini{height:4px}.bus-fader.mini::-webkit-slider-thumb{width:8px;height:10px}.bus-fader.mini::-moz-range-thumb{width:8px;height:10px}.bus-channel-route{width:100%;padding:1px 2px;background:var(--bg, #1a1a2e);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.5rem;font-weight:600;cursor:pointer;outline:none;text-align:center;text-align-last:center;-moz-text-align-last:center;min-height:16px;max-height:18px}.bus-channel-route:focus{border-color:var(--accent, #e94560)}.bus-channel-route option{background:var(--bg, #1a1a2e);color:var(--text, #eaeaea);font-size:.55rem}.master-bus{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;background:var(--surface, #16213e);border:1px solid var(--border, #2a2a4a);border-top:3px solid #a770e4;border-radius:var(--radius, 8px);min-width:90px;max-width:110px;position:relative;transition:border-top-color .3s,opacity .2s}.master-bus:hover{box-shadow:0 2px 16px #a770e426}.master-bus.muted{opacity:.6}.master-bus-header{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}.master-bus-label{font-size:.75rem;font-weight:700;text-align:center;color:var(--text, #eaeaea);text-transform:uppercase;letter-spacing:.5px}.master-bus-type{font-size:.55rem;text-transform:uppercase;letter-spacing:1px;color:#a770e4;font-weight:600}.master-bus-meters{width:100%;display:flex;justify-content:center;min-height:70px}.master-bus-controls{display:flex;gap:3px;width:100%;justify-content:center}.master-bus-btn{width:32px;height:24px;border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.65rem;font-weight:700;cursor:pointer;transition:all .15s;background:var(--bg, #1a1a2e);color:var(--text-dim, #9e9e9e);-webkit-user-select:none;user-select:none;line-height:1}.master-bus-btn.mute.active{background:var(--error, #f44336);color:#fff;border-color:var(--error, #f44336)}.master-bus-btn:hover{opacity:.85}.master-bus-fader-section{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}.master-bus-fader{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:110px;background:linear-gradient(to top,var(--bg, #1a1a2e) 0%,#a770e4 75%,#c084fc 85%,#e94560 95%,#f44336 100%);border-radius:4px;outline:none;cursor:pointer;border:1px solid var(--border, #2a2a4a);writing-mode:vertical-lr;direction:rtl}.master-bus-fader::-webkit-slider-runnable-track{height:110px;border-radius:3px}.master-bus-fader::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:14px;background:#a770e4;border:1px solid rgba(255,255,255,.4);border-radius:2px;cursor:pointer;box-shadow:0 1px 4px #00000080;margin-left:-4px}.master-bus-fader::-moz-range-track{height:110px;border-radius:3px}.master-bus-fader::-moz-range-thumb{width:20px;height:14px;background:#a770e4;border:1px solid rgba(255,255,255,.4);border-radius:2px;cursor:pointer;box-shadow:0 1px 4px #00000080}.master-bus-fader-readout{font-size:.6rem;font-family:monospace;color:var(--text-dim, #9e9e9e);text-align:center;min-height:1em}.master-bus-db-values{display:flex;gap:4px;font-size:.6rem;font-family:monospace;color:var(--text-dim, #9e9e9e)}.master-bus-db-values .hot{color:var(--meter-red, #f44336);font-weight:700}.scene-manager-overlay{position:fixed;top:0;right:0;width:360px;height:100vh;background:var(--surface, #16213e);border-left:1px solid var(--border, #2a2a4a);z-index:200;display:flex;flex-direction:column;box-shadow:-4px 0 20px #0006;animation:scene-slide-in .2s ease-out}@keyframes scene-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.scene-manager-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border, #2a2a4a)}.scene-manager-header h2{font-size:1rem;font-weight:600;color:var(--text, #eaeaea);margin:0}.scene-manager-count{font-size:.7rem;background:var(--surface-alt, #0f3460);color:var(--text-dim, #9e9e9e);padding:1px 7px;border-radius:10px;margin-left:8px}.scene-close-btn{background:transparent;border:none;color:var(--text-dim, #9e9e9e);font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:4px;line-height:1}.scene-close-btn:hover{background:#ffffff14;color:var(--text, #eaeaea)}.scene-list{flex:1;overflow-y:auto;padding:8px}.scene-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--text-dim, #9e9e9e);font-size:.85rem;gap:8px}.scene-list-loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text-dim, #9e9e9e);font-size:.85rem}.scene-card{background:var(--bg, #1a1a2e);border-radius:var(--radius, 8px);margin-bottom:8px;border:1px solid var(--border, #2a2a4a);overflow:hidden;transition:border-color .2s}.scene-card:hover{border-color:var(--accent, #e94560)}.scene-card-content{display:flex;align-items:center;padding:10px 12px;gap:10px;cursor:pointer}.scene-card-content:hover{background:#e945600a}.scene-card-name{flex:1;font-size:.9rem;font-weight:500;color:var(--text, #eaeaea);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-card-midi{font-size:.65rem;color:var(--text-dim, #9e9e9e);background:var(--surface-alt, #0f3460);padding:2px 6px;border-radius:4px;font-weight:500}.scene-card-actions{display:flex;gap:4px}.scene-card-btn{background:transparent;border:none;color:var(--text-dim, #9e9e9e);padding:4px 8px;border-radius:4px;cursor:pointer;font-size:.75rem;transition:all .15s}.scene-card-btn:hover{background:#ffffff14;color:var(--text, #eaeaea)}.scene-card-btn.delete:hover{background:#f4433626;color:var(--error, #f44336)}.scene-card-btn.load:hover{background:#4caf5026;color:var(--success, #4caf50)}.scene-card-btn.recall{font-weight:600}.scene-card-btn.recall:hover{background:#e9456026;color:var(--accent, #e94560)}.scene-save-form{padding:12px 16px;border-top:1px solid var(--border, #2a2a4a);display:flex;flex-direction:column;gap:8px}.scene-save-row{display:flex;gap:8px;align-items:center}.scene-name-input{flex:1;background:var(--bg, #1a1a2e);border:1px solid var(--border, #2a2a4a);border-radius:6px;padding:8px 10px;color:var(--text, #eaeaea);font-size:.85rem;outline:none;transition:border-color .2s}.scene-name-input:focus{border-color:var(--accent, #e94560)}.scene-name-input::placeholder{color:var(--text-dim, #9e9e9e)}.scene-save-btn{background:var(--accent, #e94560);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500;white-space:nowrap;transition:opacity .15s}.scene-save-btn:hover{opacity:.85}.scene-save-btn:disabled{opacity:.4;cursor:not-allowed}.scene-midi-input-group{display:flex;align-items:center;gap:6px}.scene-midi-label{font-size:.7rem;color:var(--text-dim, #9e9e9e);white-space:nowrap}.scene-midi-input{width:48px;background:var(--bg, #1a1a2e);border:1px solid var(--border, #2a2a4a);border-radius:4px;padding:4px 6px;color:var(--text, #eaeaea);font-size:.8rem;text-align:center;outline:none}.scene-midi-input:focus{border-color:var(--accent, #e94560)}.scene-error{padding:8px 16px;background:#f443361a;color:var(--error, #f44336);font-size:.75rem;border-top:1px solid rgba(244,67,54,.2)}.scene-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:300;display:flex;align-items:center;justify-content:center}.scene-confirm-dialog{background:var(--surface, #16213e);border:1px solid var(--border, #2a2a4a);border-radius:var(--radius, 8px);padding:20px 24px;max-width:320px;box-shadow:0 8px 32px #0006}.scene-confirm-dialog p{font-size:.9rem;color:var(--text, #eaeaea);margin-bottom:16px;line-height:1.4}.scene-confirm-actions{display:flex;gap:8px;justify-content:flex-end}.scene-confirm-cancel{background:transparent;border:1px solid var(--border, #2a2a4a);color:var(--text-dim, #9e9e9e);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:.8rem}.scene-confirm-cancel:hover{background:#ffffff0d}.scene-confirm-delete{background:var(--error, #f44336);border:none;color:#fff;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500}.scene-confirm-delete:hover{opacity:.85}.scene-recalling{opacity:.6;pointer-events:none}.scene-recalled-flash{animation:scene-flash .6s ease-out}@keyframes scene-flash{0%{border-color:var(--success, #4caf50);box-shadow:0 0 8px #4caf504d}to{border-color:var(--border, #2a2a4a);box-shadow:none}}.fx-insert-panel{display:flex;flex-direction:column;gap:4px;width:100%;border-top:1px solid var(--border, #2a2a4a);padding-top:4px;margin-top:2px}.fx-insert-panel-header{display:flex;align-items:center;justify-content:space-between}.fx-insert-panel-title{font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim, #9e9e9e)}.fx-insert-add-btn{background:transparent;border:1px solid var(--border, #2a2a4a);color:var(--text-dim, #9e9e9e);font-size:.5rem;padding:1px 6px;border-radius:3px;cursor:pointer;transition:all .15s;line-height:1.4}.fx-insert-add-btn:hover{border-color:var(--accent, #e94560);color:var(--accent, #e94560)}.fx-insert-add-btn.ghost{width:100%;border-style:dashed;border-color:var(--border, #2a2a4a);opacity:.6;padding:4px 8px;font-size:.55rem}.fx-insert-add-btn.ghost:hover{opacity:1;border-color:var(--accent, #e94560);color:var(--accent, #e94560)}.fx-insert-slots{display:flex;flex-direction:column;gap:3px}.fx-insert-slot{display:flex;flex-direction:column;gap:2px;padding:3px 4px;background:#00000026;border-radius:3px;border-left:2px solid var(--fx-accent, #666);transition:opacity .2s}.fx-insert-slot.bypassed{opacity:.45;border-left-color:var(--border, #2a2a4a)}.fx-insert-header{display:flex;align-items:center;gap:4px;width:100%}.fx-insert-bypass-btn{flex-shrink:0;width:24px;height:14px;border-radius:2px;border:1px solid var(--border, #2a2a4a);background:var(--bg, #1a1a2e);color:var(--text-dim, #9e9e9e);font-size:.45rem;font-weight:700;text-align:center;line-height:14px;cursor:pointer;transition:all .15s;-webkit-user-select:none;user-select:none}.fx-insert-bypass-btn.active{background:var(--success, #4caf50);color:#fff;border-color:var(--success, #4caf50)}.fx-insert-bypass-btn:hover{opacity:.85}.fx-insert-name{flex:1;font-size:.5rem;color:var(--text, #eaeaea);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.fx-insert-remove{flex-shrink:0;width:14px;height:14px;border:none;background:transparent;color:var(--text-dim, #9e9e9e);font-size:.7rem;line-height:1;cursor:pointer;padding:0;border-radius:2px;transition:all .15s;display:flex;align-items:center;justify-content:center}.fx-insert-remove:hover{background:var(--error, #f44336);color:#fff}.fx-insert-wetdry{display:flex;align-items:center;gap:3px;width:100%}.fx-insert-wetdry-label{font-size:.45rem;color:var(--text-dim, #9e9e9e);flex-shrink:0;min-width:16px}.fx-insert-wetdry-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:var(--border, #2a2a4a);border-radius:2px;outline:none;cursor:pointer;min-width:0}.fx-insert-wetdry-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:7px;height:7px;border-radius:50%;background:var(--fx-accent, #666);border:1px solid rgba(255,255,255,.3);cursor:pointer}.fx-insert-wetdry-slider::-moz-range-thumb{width:7px;height:7px;border-radius:50%;background:var(--fx-accent, #666);border:1px solid rgba(255,255,255,.3);cursor:pointer}.fx-insert-wetdry-readout{font-size:.45rem;font-family:monospace;color:var(--text-dim, #9e9e9e);min-width:22px;text-align:right;flex-shrink:0}.fx-insert-empty{display:flex;width:100%}.fx-insert-add-form{display:flex;flex-direction:column;gap:4px;padding:4px;background:#0003;border-radius:3px}.fx-insert-plugin-select{width:100%;padding:2px 4px;background:var(--bg, #1a1a2e);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.5rem;cursor:pointer;outline:none}.fx-insert-plugin-select option{background:var(--bg, #1a1a2e);color:var(--text, #eaeaea)}.fx-insert-plugin-info{font-size:.45rem;color:var(--text-dim, #9e9e9e)}.fx-insert-add-actions{display:flex;gap:4px}.fx-insert-confirm-btn{flex:1;padding:2px 6px;background:var(--accent, #e94560);color:#fff;border:none;border-radius:3px;font-size:.5rem;cursor:pointer;font-weight:600}.fx-insert-confirm-btn:disabled{opacity:.4;cursor:default}.fx-insert-cancel-btn{flex:1;padding:2px 6px;background:transparent;color:var(--text-dim, #9e9e9e);border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.5rem;cursor:pointer}.mixer-page{display:flex;flex-direction:column;min-height:100vh;background:var(--bg, #1a1a2e);max-width:100%!important}.mixer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--surface, #16213e);border-bottom:1px solid var(--border, #2a2a4a);gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:100}.mixer-header-left{display:flex;align-items:center;gap:16px}.mixer-title{font-size:1.1rem;font-weight:700;color:var(--text, #eaeaea);letter-spacing:.3px}.mixer-header-center{display:flex;align-items:center;gap:12px}.mixer-pedalboard-name{font-size:.8rem;color:var(--accent, #e94560);background:#e945601a;padding:3px 10px;border-radius:var(--radius, 8px)}.mixer-ws-indicator{font-size:.7rem;padding:3px 8px;border-radius:4px;font-weight:500}.mixer-ws-indicator.ready{color:var(--success, #4caf50);background:#4caf501f}.mixer-ws-indicator.pending{color:var(--warning, #ff9800);background:#ff98001f}.mixer-header-right{display:flex;align-items:center;gap:12px}.mixer-update-time{font-size:.7rem;color:var(--text-dim, #9e9e9e)}.mixer-refresh-btn{background:var(--accent, #e94560);color:#fff;border:none;padding:6px 14px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.8rem;font-weight:500;transition:opacity .2s}.mixer-refresh-btn:hover{opacity:.85}.mixer-refresh-btn.large{padding:10px 24px;font-size:.95rem;margin-top:16px}.mixer-scenes-btn{display:flex;align-items:center;gap:6px;background:var(--surface-alt, #0f3460);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);padding:6px 12px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.8rem;font-weight:500;transition:all .2s}.mixer-scenes-btn:hover{border-color:var(--accent, #e94560);background:#e945601a}.mixer-scenes-btn.active{border-color:var(--accent, #e94560);background:#e9456026;color:var(--accent, #e94560)}.mixer-scenes-count{font-size:.65rem;background:var(--accent, #e94560);color:#fff;padding:1px 6px;border-radius:8px;font-weight:600}.mixer-content{flex:1;padding:20px;display:flex;flex-direction:column;gap:24px}.mixer-section-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.mixer-section-header h2{font-size:.95rem;font-weight:600;color:var(--text, #eaeaea)}.mixer-count{font-size:.7rem;background:var(--surface-alt, #0f3460);color:var(--text-dim, #9e9e9e);padding:1px 7px;border-radius:10px}.mixer-channels-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}.mixer-add-channel{display:flex;align-items:center}.mixer-add-btn{width:40px;height:40px;border-radius:50%;border:2px dashed var(--border, #2a2a4a);background:transparent;color:var(--text-dim, #9e9e9e);font-size:1.3rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.mixer-add-btn:hover{border-color:var(--accent, #e94560);color:var(--accent, #e94560);background:#e9456014}.mixer-buses-grid{display:flex;flex-direction:column;gap:10px}.mixer-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;text-align:center;color:var(--text-dim, #9e9e9e);flex:1}.mixer-empty-icon{font-size:3rem;margin-bottom:16px;opacity:.6}.mixer-empty h2{font-size:1.2rem;color:var(--text, #eaeaea);margin-bottom:8px}.mixer-empty p{font-size:.9rem;max-width:400px;line-height:1.5;margin-bottom:4px}.mixer-empty-hint{font-size:.8rem!important;opacity:.7;margin-top:8px!important}.mixer-content-split{display:flex;flex-direction:row;gap:0;padding:0;height:calc(100vh - 60px);overflow:hidden}.mixer-content-split .mixer-content-main{flex:1;overflow-y:auto;padding:20px;border-right:1px solid var(--border, #2a2a4a)}.mixer-pipedal-pane{flex:1;display:flex;flex-direction:column;background:var(--bg, #1a1a2e);min-width:400px}.mixer-pipedal-iframe{width:100%;height:100%;border:none;background:#fff}.mixer-pipedal-btn{display:flex;align-items:center;gap:6px;background:var(--surface-alt, #0f3460);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);padding:6px 12px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.8rem;font-weight:500;transition:all .2s}.mixer-pipedal-btn:hover{border-color:var(--accent, #e94560);background:#e945601a}.mixer-pipedal-btn.active{border-color:var(--accent, #e94560);background:#e9456026;color:var(--accent, #e94560)}.mixer-master-section{margin-top:12px;padding-top:12px;border-top:1px solid var(--border, #2a2a4a)}.mixer-master-layout{display:flex;gap:10px;justify-content:flex-start}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1a2e;--surface: #16213e;--surface-alt: #0f3460;--accent: #e94560;--text: #eaeaea;--text-dim: #9e9e9e;--border: #2a2a4a;--success: #4caf50;--warning: #ff9800;--error: #f44336;--radius: 8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.connection-status{display:flex;flex-direction:column;gap:4px}.status-indicator{display:flex;align-items:center;gap:8px}.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.status-label{font-size:.85rem;color:var(--text-dim)}.status-error{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--error)}.retry-btn{background:transparent;border:1px solid var(--error);color:var(--error);padding:2px 8px;border-radius:4px;cursor:pointer;font-size:.75rem}.retry-btn:hover{background:var(--error);color:#fff}.app-footer{display:flex;justify-content:space-between;padding:12px 24px;background:var(--surface);border-top:1px solid var(--border);font-size:.75rem;color:var(--text-dim)} diff --git a/frontend/dist/assets/index-BixTWz89.js b/frontend/dist/assets/index-BixTWz89.js deleted file mode 100644 index 399b30f..0000000 --- a/frontend/dist/assets/index-BixTWz89.js +++ /dev/null @@ -1,42 +0,0 @@ -(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))r(l);new MutationObserver(l=>{for(const o of l)if(o.type==="childList")for(const s of o.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&r(s)}).observe(document,{childList:!0,subtree:!0});function n(l){const o={};return l.integrity&&(o.integrity=l.integrity),l.referrerPolicy&&(o.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?o.credentials="include":l.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(l){if(l.ep)return;l.ep=!0;const o=n(l);fetch(l.href,o)}})();function yc(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var nu={exports:{}},cl={},ru={exports:{}},$={};/** - * @license React - * react.production.min.js - * - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */var lr=Symbol.for("react.element"),gc=Symbol.for("react.portal"),wc=Symbol.for("react.fragment"),xc=Symbol.for("react.strict_mode"),kc=Symbol.for("react.profiler"),Sc=Symbol.for("react.provider"),Nc=Symbol.for("react.context"),Cc=Symbol.for("react.forward_ref"),Ec=Symbol.for("react.suspense"),jc=Symbol.for("react.memo"),Pc=Symbol.for("react.lazy"),Bs=Symbol.iterator;function _c(e){return e===null||typeof e!="object"?null:(e=Bs&&e[Bs]||e["@@iterator"],typeof e=="function"?e:null)}var lu={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},ou=Object.assign,su={};function hn(e,t,n){this.props=e,this.context=t,this.refs=su,this.updater=n||lu}hn.prototype.isReactComponent={};hn.prototype.setState=function(e,t){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")};hn.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function iu(){}iu.prototype=hn.prototype;function Yo(e,t,n){this.props=e,this.context=t,this.refs=su,this.updater=n||lu}var Xo=Yo.prototype=new iu;Xo.constructor=Yo;ou(Xo,hn.prototype);Xo.isPureReactComponent=!0;var Hs=Array.isArray,uu=Object.prototype.hasOwnProperty,Jo={current:null},au={key:!0,ref:!0,__self:!0,__source:!0};function cu(e,t,n){var r,l={},o=null,s=null;if(t!=null)for(r in t.ref!==void 0&&(s=t.ref),t.key!==void 0&&(o=""+t.key),t)uu.call(t,r)&&!au.hasOwnProperty(r)&&(l[r]=t[r]);var i=arguments.length-2;if(i===1)l.children=n;else if(1>>1,q=P[Q];if(0>>1;Ql(jl,I))Ntl(ar,jl)?(P[Q]=ar,P[Nt]=I,Q=Nt):(P[Q]=jl,P[O]=I,Q=O);else if(Ntl(ar,I))P[Q]=ar,P[Nt]=I,Q=Nt;else break e}}return R}function l(P,R){var I=P.sortIndex-R.sortIndex;return I!==0?I:P.id-R.id}if(typeof performance=="object"&&typeof performance.now=="function"){var o=performance;e.unstable_now=function(){return o.now()}}else{var s=Date,i=s.now();e.unstable_now=function(){return s.now()-i}}var u=[],f=[],y=1,m=null,p=3,v=!1,g=!1,w=!1,M=typeof setTimeout=="function"?setTimeout:null,d=typeof clearTimeout=="function"?clearTimeout:null,c=typeof setImmediate<"u"?setImmediate:null;typeof navigator<"u"&&navigator.scheduling!==void 0&&navigator.scheduling.isInputPending!==void 0&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function h(P){for(var R=n(f);R!==null;){if(R.callback===null)r(f);else if(R.startTime<=P)r(f),R.sortIndex=R.expirationTime,t(u,R);else break;R=n(f)}}function x(P){if(w=!1,h(P),!g)if(n(u)!==null)g=!0,Qe(N);else{var R=n(f);R!==null&&Ke(x,R.startTime-P)}}function N(P,R){g=!1,w&&(w=!1,d(T),T=-1),v=!0;var I=p;try{for(h(R),m=n(u);m!==null&&(!(m.expirationTime>R)||P&&!L());){var Q=m.callback;if(typeof Q=="function"){m.callback=null,p=m.priorityLevel;var q=Q(m.expirationTime<=R);R=e.unstable_now(),typeof q=="function"?m.callback=q:m===n(u)&&r(u),h(R)}else r(u);m=n(u)}if(m!==null)var Vt=!0;else{var O=n(f);O!==null&&Ke(x,O.startTime-R),Vt=!1}return Vt}finally{m=null,p=I,v=!1}}var C=!1,E=null,T=-1,V=5,z=-1;function L(){return!(e.unstable_now()-zP||125Q?(P.sortIndex=I,t(f,P),n(u)===null&&P===n(f)&&(w?(d(T),T=-1):w=!0,Ke(x,I-Q))):(P.sortIndex=q,t(u,P),g||v||(g=!0,Qe(N))),P},e.unstable_shouldYield=L,e.unstable_wrapCallback=function(P){var R=p;return function(){var I=p;p=R;try{return P.apply(this,arguments)}finally{p=I}}}})(vu);hu.exports=vu;var Uc=hu.exports;/** - * @license React - * react-dom.production.min.js - * - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */var Vc=k,Ce=Uc;function S(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n"u"||typeof window.document>"u"||typeof window.document.createElement>"u"),eo=Object.prototype.hasOwnProperty,Ac=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,Qs={},Ks={};function Bc(e){return eo.call(Ks,e)?!0:eo.call(Qs,e)?!1:Ac.test(e)?Ks[e]=!0:(Qs[e]=!0,!1)}function Hc(e,t,n,r){if(n!==null&&n.type===0)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return r?!1:n!==null?!n.acceptsBooleans:(e=e.toLowerCase().slice(0,5),e!=="data-"&&e!=="aria-");default:return!1}}function Wc(e,t,n,r){if(t===null||typeof t>"u"||Hc(e,t,n,r))return!0;if(r)return!1;if(n!==null)switch(n.type){case 3:return!t;case 4:return t===!1;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}function he(e,t,n,r,l,o,s){this.acceptsBooleans=t===2||t===3||t===4,this.attributeName=r,this.attributeNamespace=l,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=o,this.removeEmptyString=s}var ie={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(e){ie[e]=new he(e,0,!1,e,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(e){var t=e[0];ie[t]=new he(t,1,!1,e[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(e){ie[e]=new he(e,2,!1,e.toLowerCase(),null,!1,!1)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(e){ie[e]=new he(e,2,!1,e,null,!1,!1)});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(e){ie[e]=new he(e,3,!1,e.toLowerCase(),null,!1,!1)});["checked","multiple","muted","selected"].forEach(function(e){ie[e]=new he(e,3,!0,e,null,!1,!1)});["capture","download"].forEach(function(e){ie[e]=new he(e,4,!1,e,null,!1,!1)});["cols","rows","size","span"].forEach(function(e){ie[e]=new he(e,6,!1,e,null,!1,!1)});["rowSpan","start"].forEach(function(e){ie[e]=new he(e,5,!1,e.toLowerCase(),null,!1,!1)});var qo=/[\-:]([a-z])/g;function bo(e){return e[1].toUpperCase()}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(e){var t=e.replace(qo,bo);ie[t]=new he(t,1,!1,e,null,!1,!1)});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(e){var t=e.replace(qo,bo);ie[t]=new he(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)});["xml:base","xml:lang","xml:space"].forEach(function(e){var t=e.replace(qo,bo);ie[t]=new he(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)});["tabIndex","crossOrigin"].forEach(function(e){ie[e]=new he(e,1,!1,e.toLowerCase(),null,!1,!1)});ie.xlinkHref=new he("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(e){ie[e]=new he(e,1,!1,e.toLowerCase(),null,!0,!0)});function es(e,t,n,r){var l=ie.hasOwnProperty(t)?ie[t]:null;(l!==null?l.type!==0:r||!(2i||l[s]!==o[i]){var u=` -`+l[s].replace(" at new "," at ");return e.displayName&&u.includes("")&&(u=u.replace("",e.displayName)),u}while(1<=s&&0<=i);break}}}finally{Tl=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?jn(e):""}function Qc(e){switch(e.tag){case 5:return jn(e.type);case 16:return jn("Lazy");case 13:return jn("Suspense");case 19:return jn("SuspenseList");case 0:case 2:case 15:return e=Ml(e.type,!1),e;case 11:return e=Ml(e.type.render,!1),e;case 1:return e=Ml(e.type,!0),e;default:return""}}function lo(e){if(e==null)return null;if(typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case Wt:return"Fragment";case Ht:return"Portal";case to:return"Profiler";case ts:return"StrictMode";case no:return"Suspense";case ro:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case wu:return(e.displayName||"Context")+".Consumer";case gu:return(e._context.displayName||"Context")+".Provider";case ns:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case rs:return t=e.displayName||null,t!==null?t:lo(e.type)||"Memo";case lt:t=e._payload,e=e._init;try{return lo(e(t))}catch{}}return null}function Kc(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=t.render,e=e.displayName||e.name||"",t.displayName||(e!==""?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return lo(t);case 8:return t===ts?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if(typeof t=="function")return t.displayName||t.name||null;if(typeof t=="string")return t}return null}function gt(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":return e;case"object":return e;default:return""}}function ku(e){var t=e.type;return(e=e.nodeName)&&e.toLowerCase()==="input"&&(t==="checkbox"||t==="radio")}function Gc(e){var t=ku(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&typeof n<"u"&&typeof n.get=="function"&&typeof n.set=="function"){var l=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return l.call(this)},set:function(s){r=""+s,o.call(this,s)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(s){r=""+s},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}function dr(e){e._valueTracker||(e._valueTracker=Gc(e))}function Su(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=ku(e)?e.checked?"true":"false":e.value),e=r,e!==n?(t.setValue(e),!0):!1}function Ur(e){if(e=e||(typeof document<"u"?document:void 0),typeof e>"u")return null;try{return e.activeElement||e.body}catch{return e.body}}function oo(e,t){var n=t.checked;return Y({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:n??e._wrapperState.initialChecked})}function Ys(e,t){var n=t.defaultValue==null?"":t.defaultValue,r=t.checked!=null?t.checked:t.defaultChecked;n=gt(t.value!=null?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:t.type==="checkbox"||t.type==="radio"?t.checked!=null:t.value!=null}}function Nu(e,t){t=t.checked,t!=null&&es(e,"checked",t,!1)}function so(e,t){Nu(e,t);var n=gt(t.value),r=t.type;if(n!=null)r==="number"?(n===0&&e.value===""||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if(r==="submit"||r==="reset"){e.removeAttribute("value");return}t.hasOwnProperty("value")?io(e,t.type,n):t.hasOwnProperty("defaultValue")&&io(e,t.type,gt(t.defaultValue)),t.checked==null&&t.defaultChecked!=null&&(e.defaultChecked=!!t.defaultChecked)}function Xs(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!(r!=="submit"&&r!=="reset"||t.value!==void 0&&t.value!==null))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}n=e.name,n!==""&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,n!==""&&(e.name=n)}function io(e,t,n){(t!=="number"||Ur(e.ownerDocument)!==e)&&(n==null?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var Pn=Array.isArray;function tn(e,t,n,r){if(e=e.options,t){t={};for(var l=0;l"+t.valueOf().toString()+"",t=pr.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}});function An(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&n.nodeType===3){n.nodeValue=t;return}}e.textContent=t}var Ln={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},Yc=["Webkit","ms","Moz","O"];Object.keys(Ln).forEach(function(e){Yc.forEach(function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),Ln[t]=Ln[e]})});function Pu(e,t,n){return t==null||typeof t=="boolean"||t===""?"":n||typeof t!="number"||t===0||Ln.hasOwnProperty(e)&&Ln[e]?(""+t).trim():t+"px"}function _u(e,t){e=e.style;for(var n in t)if(t.hasOwnProperty(n)){var r=n.indexOf("--")===0,l=Pu(n,t[n],r);n==="float"&&(n="cssFloat"),r?e.setProperty(n,l):e[n]=l}}var Xc=Y({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function co(e,t){if(t){if(Xc[e]&&(t.children!=null||t.dangerouslySetInnerHTML!=null))throw Error(S(137,e));if(t.dangerouslySetInnerHTML!=null){if(t.children!=null)throw Error(S(60));if(typeof t.dangerouslySetInnerHTML!="object"||!("__html"in t.dangerouslySetInnerHTML))throw Error(S(61))}if(t.style!=null&&typeof t.style!="object")throw Error(S(62))}}function fo(e,t){if(e.indexOf("-")===-1)return typeof t.is=="string";switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var po=null;function ls(e){return e=e.target||e.srcElement||window,e.correspondingUseElement&&(e=e.correspondingUseElement),e.nodeType===3?e.parentNode:e}var mo=null,nn=null,rn=null;function qs(e){if(e=ir(e)){if(typeof mo!="function")throw Error(S(280));var t=e.stateNode;t&&(t=hl(t),mo(e.stateNode,e.type,t))}}function Tu(e){nn?rn?rn.push(e):rn=[e]:nn=e}function Mu(){if(nn){var e=nn,t=rn;if(rn=nn=null,qs(e),t)for(e=0;e>>=0,e===0?32:31-(sf(e)/uf|0)|0}var mr=64,hr=4194304;function _n(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return e&4194240;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return e&130023424;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function Hr(e,t){var n=e.pendingLanes;if(n===0)return 0;var r=0,l=e.suspendedLanes,o=e.pingedLanes,s=n&268435455;if(s!==0){var i=s&~l;i!==0?r=_n(i):(o&=s,o!==0&&(r=_n(o)))}else s=n&~l,s!==0?r=_n(s):o!==0&&(r=_n(o));if(r===0)return 0;if(t!==0&&t!==r&&!(t&l)&&(l=r&-r,o=t&-t,l>=o||l===16&&(o&4194240)!==0))return t;if(r&4&&(r|=n&16),t=e.entangledLanes,t!==0)for(e=e.entanglements,t&=r;0n;n++)t.push(e);return t}function or(e,t,n){e.pendingLanes|=t,t!==536870912&&(e.suspendedLanes=0,e.pingedLanes=0),e=e.eventTimes,t=31-De(t),e[t]=n}function df(e,t){var n=e.pendingLanes&~t;e.pendingLanes=t,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=t,e.mutableReadLanes&=t,e.entangledLanes&=t,t=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0=zn),ii=" ",ui=!1;function Ju(e,t){switch(e){case"keyup":return Vf.indexOf(t.keyCode)!==-1;case"keydown":return t.keyCode!==229;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Zu(e){return e=e.detail,typeof e=="object"&&"data"in e?e.data:null}var Qt=!1;function Bf(e,t){switch(e){case"compositionend":return Zu(t);case"keypress":return t.which!==32?null:(ui=!0,ii);case"textInput":return e=t.data,e===ii&&ui?null:e;default:return null}}function Hf(e,t){if(Qt)return e==="compositionend"||!ds&&Ju(e,t)?(e=Yu(),Mr=as=ut=null,Qt=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1=t)return{node:n,offset:t-e};e=r}e:{for(;n;){if(n.nextSibling){n=n.nextSibling;break e}n=n.parentNode}n=void 0}n=di(n)}}function ta(e,t){return e&&t?e===t?!0:e&&e.nodeType===3?!1:t&&t.nodeType===3?ta(e,t.parentNode):"contains"in e?e.contains(t):e.compareDocumentPosition?!!(e.compareDocumentPosition(t)&16):!1:!1}function na(){for(var e=window,t=Ur();t instanceof e.HTMLIFrameElement;){try{var n=typeof t.contentWindow.location.href=="string"}catch{n=!1}if(n)e=t.contentWindow;else break;t=Ur(e.document)}return t}function ps(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&(t==="input"&&(e.type==="text"||e.type==="search"||e.type==="tel"||e.type==="url"||e.type==="password")||t==="textarea"||e.contentEditable==="true")}function qf(e){var t=na(),n=e.focusedElem,r=e.selectionRange;if(t!==n&&n&&n.ownerDocument&&ta(n.ownerDocument.documentElement,n)){if(r!==null&&ps(n)){if(t=r.start,e=r.end,e===void 0&&(e=t),"selectionStart"in n)n.selectionStart=t,n.selectionEnd=Math.min(e,n.value.length);else if(e=(t=n.ownerDocument||document)&&t.defaultView||window,e.getSelection){e=e.getSelection();var l=n.textContent.length,o=Math.min(r.start,l);r=r.end===void 0?o:Math.min(r.end,l),!e.extend&&o>r&&(l=r,r=o,o=l),l=pi(n,o);var s=pi(n,r);l&&s&&(e.rangeCount!==1||e.anchorNode!==l.node||e.anchorOffset!==l.offset||e.focusNode!==s.node||e.focusOffset!==s.offset)&&(t=t.createRange(),t.setStart(l.node,l.offset),e.removeAllRanges(),o>r?(e.addRange(t),e.extend(s.node,s.offset)):(t.setEnd(s.node,s.offset),e.addRange(t)))}}for(t=[],e=n;e=e.parentNode;)e.nodeType===1&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for(typeof n.focus=="function"&&n.focus(),n=0;n=document.documentMode,Kt=null,xo=null,On=null,ko=!1;function mi(e,t,n){var r=n.window===n?n.document:n.nodeType===9?n:n.ownerDocument;ko||Kt==null||Kt!==Ur(r)||(r=Kt,"selectionStart"in r&&ps(r)?r={start:r.selectionStart,end:r.selectionEnd}:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection(),r={anchorNode:r.anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset}),On&&Gn(On,r)||(On=r,r=Kr(xo,"onSelect"),0Xt||(e.current=Po[Xt],Po[Xt]=null,Xt--)}function A(e,t){Xt++,Po[Xt]=e.current,e.current=t}var wt={},fe=kt(wt),ge=kt(!1),zt=wt;function an(e,t){var n=e.type.contextTypes;if(!n)return wt;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var l={},o;for(o in n)l[o]=t[o];return r&&(e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=l),l}function we(e){return e=e.childContextTypes,e!=null}function Yr(){H(ge),H(fe)}function ki(e,t,n){if(fe.current!==wt)throw Error(S(168));A(fe,t),A(ge,n)}function fa(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,typeof r.getChildContext!="function")return n;r=r.getChildContext();for(var l in r)if(!(l in t))throw Error(S(108,Kc(e)||"Unknown",l));return Y({},n,r)}function Xr(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||wt,zt=fe.current,A(fe,e),A(ge,ge.current),!0}function Si(e,t,n){var r=e.stateNode;if(!r)throw Error(S(169));n?(e=fa(e,t,zt),r.__reactInternalMemoizedMergedChildContext=e,H(ge),H(fe),A(fe,e)):H(ge),A(ge,n)}var Ye=null,vl=!1,Wl=!1;function da(e){Ye===null?Ye=[e]:Ye.push(e)}function cd(e){vl=!0,da(e)}function St(){if(!Wl&&Ye!==null){Wl=!0;var e=0,t=U;try{var n=Ye;for(U=1;e>=s,l-=s,Xe=1<<32-De(t)+l|n<T?(V=E,E=null):V=E.sibling;var z=p(d,E,h[T],x);if(z===null){E===null&&(E=V);break}e&&E&&z.alternate===null&&t(d,E),c=o(z,c,T),C===null?N=z:C.sibling=z,C=z,E=V}if(T===h.length)return n(d,E),W&&Et(d,T),N;if(E===null){for(;TT?(V=E,E=null):V=E.sibling;var L=p(d,E,z.value,x);if(L===null){E===null&&(E=V);break}e&&E&&L.alternate===null&&t(d,E),c=o(L,c,T),C===null?N=L:C.sibling=L,C=L,E=V}if(z.done)return n(d,E),W&&Et(d,T),N;if(E===null){for(;!z.done;T++,z=h.next())z=m(d,z.value,x),z!==null&&(c=o(z,c,T),C===null?N=z:C.sibling=z,C=z);return W&&Et(d,T),N}for(E=r(d,E);!z.done;T++,z=h.next())z=v(E,d,T,z.value,x),z!==null&&(e&&z.alternate!==null&&E.delete(z.key===null?T:z.key),c=o(z,c,T),C===null?N=z:C.sibling=z,C=z);return e&&E.forEach(function(j){return t(d,j)}),W&&Et(d,T),N}function M(d,c,h,x){if(typeof h=="object"&&h!==null&&h.type===Wt&&h.key===null&&(h=h.props.children),typeof h=="object"&&h!==null){switch(h.$$typeof){case fr:e:{for(var N=h.key,C=c;C!==null;){if(C.key===N){if(N=h.type,N===Wt){if(C.tag===7){n(d,C.sibling),c=l(C,h.props.children),c.return=d,d=c;break e}}else if(C.elementType===N||typeof N=="object"&&N!==null&&N.$$typeof===lt&&Ei(N)===C.type){n(d,C.sibling),c=l(C,h.props),c.ref=Nn(d,C,h),c.return=d,d=c;break e}n(d,C);break}else t(d,C);C=C.sibling}h.type===Wt?(c=Rt(h.props.children,d.mode,x,h.key),c.return=d,d=c):(x=Fr(h.type,h.key,h.props,null,d.mode,x),x.ref=Nn(d,c,h),x.return=d,d=x)}return s(d);case Ht:e:{for(C=h.key;c!==null;){if(c.key===C)if(c.tag===4&&c.stateNode.containerInfo===h.containerInfo&&c.stateNode.implementation===h.implementation){n(d,c.sibling),c=l(c,h.children||[]),c.return=d,d=c;break e}else{n(d,c);break}else t(d,c);c=c.sibling}c=ql(h,d.mode,x),c.return=d,d=c}return s(d);case lt:return C=h._init,M(d,c,C(h._payload),x)}if(Pn(h))return g(d,c,h,x);if(gn(h))return w(d,c,h,x);Sr(d,h)}return typeof h=="string"&&h!==""||typeof h=="number"?(h=""+h,c!==null&&c.tag===6?(n(d,c.sibling),c=l(c,h),c.return=d,d=c):(n(d,c),c=Zl(h,d.mode,x),c.return=d,d=c),s(d)):n(d,c)}return M}var fn=va(!0),ya=va(!1),qr=kt(null),br=null,qt=null,ys=null;function gs(){ys=qt=br=null}function ws(e){var t=qr.current;H(qr),e._currentValue=t}function Mo(e,t,n){for(;e!==null;){var r=e.alternate;if((e.childLanes&t)!==t?(e.childLanes|=t,r!==null&&(r.childLanes|=t)):r!==null&&(r.childLanes&t)!==t&&(r.childLanes|=t),e===n)break;e=e.return}}function on(e,t){br=e,ys=qt=null,e=e.dependencies,e!==null&&e.firstContext!==null&&(e.lanes&t&&(ye=!0),e.firstContext=null)}function Le(e){var t=e._currentValue;if(ys!==e)if(e={context:e,memoizedValue:t,next:null},qt===null){if(br===null)throw Error(S(308));qt=e,br.dependencies={lanes:0,firstContext:e}}else qt=qt.next=e;return t}var _t=null;function xs(e){_t===null?_t=[e]:_t.push(e)}function ga(e,t,n,r){var l=t.interleaved;return l===null?(n.next=n,xs(t)):(n.next=l.next,l.next=n),t.interleaved=n,et(e,r)}function et(e,t){e.lanes|=t;var n=e.alternate;for(n!==null&&(n.lanes|=t),n=e,e=e.return;e!==null;)e.childLanes|=t,n=e.alternate,n!==null&&(n.childLanes|=t),n=e,e=e.return;return n.tag===3?n.stateNode:null}var ot=!1;function ks(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}}function wa(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function Ze(e,t){return{eventTime:e,lane:t,tag:0,payload:null,callback:null,next:null}}function mt(e,t,n){var r=e.updateQueue;if(r===null)return null;if(r=r.shared,F&2){var l=r.pending;return l===null?t.next=t:(t.next=l.next,l.next=t),r.pending=t,et(e,n)}return l=r.interleaved,l===null?(t.next=t,xs(r)):(t.next=l.next,l.next=t),r.interleaved=t,et(e,n)}function Rr(e,t,n){if(t=t.updateQueue,t!==null&&(t=t.shared,(n&4194240)!==0)){var r=t.lanes;r&=e.pendingLanes,n|=r,t.lanes=n,ss(e,n)}}function ji(e,t){var n=e.updateQueue,r=e.alternate;if(r!==null&&(r=r.updateQueue,n===r)){var l=null,o=null;if(n=n.firstBaseUpdate,n!==null){do{var s={eventTime:n.eventTime,lane:n.lane,tag:n.tag,payload:n.payload,callback:n.callback,next:null};o===null?l=o=s:o=o.next=s,n=n.next}while(n!==null);o===null?l=o=t:o=o.next=t}else l=o=t;n={baseState:r.baseState,firstBaseUpdate:l,lastBaseUpdate:o,shared:r.shared,effects:r.effects},e.updateQueue=n;return}e=n.lastBaseUpdate,e===null?n.firstBaseUpdate=t:e.next=t,n.lastBaseUpdate=t}function el(e,t,n,r){var l=e.updateQueue;ot=!1;var o=l.firstBaseUpdate,s=l.lastBaseUpdate,i=l.shared.pending;if(i!==null){l.shared.pending=null;var u=i,f=u.next;u.next=null,s===null?o=f:s.next=f,s=u;var y=e.alternate;y!==null&&(y=y.updateQueue,i=y.lastBaseUpdate,i!==s&&(i===null?y.firstBaseUpdate=f:i.next=f,y.lastBaseUpdate=u))}if(o!==null){var m=l.baseState;s=0,y=f=u=null,i=o;do{var p=i.lane,v=i.eventTime;if((r&p)===p){y!==null&&(y=y.next={eventTime:v,lane:0,tag:i.tag,payload:i.payload,callback:i.callback,next:null});e:{var g=e,w=i;switch(p=t,v=n,w.tag){case 1:if(g=w.payload,typeof g=="function"){m=g.call(v,m,p);break e}m=g;break e;case 3:g.flags=g.flags&-65537|128;case 0:if(g=w.payload,p=typeof g=="function"?g.call(v,m,p):g,p==null)break e;m=Y({},m,p);break e;case 2:ot=!0}}i.callback!==null&&i.lane!==0&&(e.flags|=64,p=l.effects,p===null?l.effects=[i]:p.push(i))}else v={eventTime:v,lane:p,tag:i.tag,payload:i.payload,callback:i.callback,next:null},y===null?(f=y=v,u=m):y=y.next=v,s|=p;if(i=i.next,i===null){if(i=l.shared.pending,i===null)break;p=i,i=p.next,p.next=null,l.lastBaseUpdate=p,l.shared.pending=null}}while(!0);if(y===null&&(u=m),l.baseState=u,l.firstBaseUpdate=f,l.lastBaseUpdate=y,t=l.shared.interleaved,t!==null){l=t;do s|=l.lane,l=l.next;while(l!==t)}else o===null&&(l.shared.lanes=0);$t|=s,e.lanes=s,e.memoizedState=m}}function Pi(e,t,n){if(e=t.effects,t.effects=null,e!==null)for(t=0;tn?n:4,e(!0);var r=Kl.transition;Kl.transition={};try{e(!1),t()}finally{U=n,Kl.transition=r}}function $a(){return Re().memoizedState}function md(e,t,n){var r=vt(e);if(n={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null},Da(e))Fa(t,n);else if(n=ga(e,t,n,r),n!==null){var l=pe();Fe(n,e,r,l),Ua(n,t,r)}}function hd(e,t,n){var r=vt(e),l={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null};if(Da(e))Fa(t,l);else{var o=e.alternate;if(e.lanes===0&&(o===null||o.lanes===0)&&(o=t.lastRenderedReducer,o!==null))try{var s=t.lastRenderedState,i=o(s,n);if(l.hasEagerState=!0,l.eagerState=i,Ue(i,s)){var u=t.interleaved;u===null?(l.next=l,xs(t)):(l.next=u.next,u.next=l),t.interleaved=l;return}}catch{}finally{}n=ga(e,t,l,r),n!==null&&(l=pe(),Fe(n,e,r,l),Ua(n,t,r))}}function Da(e){var t=e.alternate;return e===G||t!==null&&t===G}function Fa(e,t){$n=nl=!0;var n=e.pending;n===null?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function Ua(e,t,n){if(n&4194240){var r=t.lanes;r&=e.pendingLanes,n|=r,t.lanes=n,ss(e,n)}}var rl={readContext:Le,useCallback:ue,useContext:ue,useEffect:ue,useImperativeHandle:ue,useInsertionEffect:ue,useLayoutEffect:ue,useMemo:ue,useReducer:ue,useRef:ue,useState:ue,useDebugValue:ue,useDeferredValue:ue,useTransition:ue,useMutableSource:ue,useSyncExternalStore:ue,useId:ue,unstable_isNewReconciler:!1},vd={readContext:Le,useCallback:function(e,t){return Ae().memoizedState=[e,t===void 0?null:t],e},useContext:Le,useEffect:Ti,useImperativeHandle:function(e,t,n){return n=n!=null?n.concat([e]):null,Ir(4194308,4,La.bind(null,t,e),n)},useLayoutEffect:function(e,t){return Ir(4194308,4,e,t)},useInsertionEffect:function(e,t){return Ir(4,2,e,t)},useMemo:function(e,t){var n=Ae();return t=t===void 0?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=Ae();return t=n!==void 0?n(t):t,r.memoizedState=r.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},r.queue=e,e=e.dispatch=md.bind(null,G,e),[r.memoizedState,e]},useRef:function(e){var t=Ae();return e={current:e},t.memoizedState=e},useState:_i,useDebugValue:Ts,useDeferredValue:function(e){return Ae().memoizedState=e},useTransition:function(){var e=_i(!1),t=e[0];return e=pd.bind(null,e[1]),Ae().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var r=G,l=Ae();if(W){if(n===void 0)throw Error(S(407));n=n()}else{if(n=t(),le===null)throw Error(S(349));Ot&30||Na(r,t,n)}l.memoizedState=n;var o={value:n,getSnapshot:t};return l.queue=o,Ti(Ea.bind(null,r,o,e),[e]),r.flags|=2048,tr(9,Ca.bind(null,r,o,n,t),void 0,null),n},useId:function(){var e=Ae(),t=le.identifierPrefix;if(W){var n=Je,r=Xe;n=(r&~(1<<32-De(r)-1)).toString(32)+n,t=":"+t+"R"+n,n=bn++,0<\/script>",e=e.removeChild(e.firstChild)):typeof r.is=="string"?e=s.createElement(n,{is:r.is}):(e=s.createElement(n),n==="select"&&(s=e,r.multiple?s.multiple=!0:r.size&&(s.size=r.size))):e=s.createElementNS(e,n),e[Be]=t,e[Jn]=r,Xa(e,t,!1,!1),t.stateNode=e;e:{switch(s=fo(n,r),n){case"dialog":B("cancel",e),B("close",e),l=r;break;case"iframe":case"object":case"embed":B("load",e),l=r;break;case"video":case"audio":for(l=0;lmn&&(t.flags|=128,r=!0,Cn(o,!1),t.lanes=4194304)}else{if(!r)if(e=tl(s),e!==null){if(t.flags|=128,r=!0,n=e.updateQueue,n!==null&&(t.updateQueue=n,t.flags|=4),Cn(o,!0),o.tail===null&&o.tailMode==="hidden"&&!s.alternate&&!W)return ae(t),null}else 2*J()-o.renderingStartTime>mn&&n!==1073741824&&(t.flags|=128,r=!0,Cn(o,!1),t.lanes=4194304);o.isBackwards?(s.sibling=t.child,t.child=s):(n=o.last,n!==null?n.sibling=s:t.child=s,o.last=s)}return o.tail!==null?(t=o.tail,o.rendering=t,o.tail=t.sibling,o.renderingStartTime=J(),t.sibling=null,n=K.current,A(K,r?n&1|2:n&1),t):(ae(t),null);case 22:case 23:return Os(),r=t.memoizedState!==null,e!==null&&e.memoizedState!==null!==r&&(t.flags|=8192),r&&t.mode&1?ke&1073741824&&(ae(t),t.subtreeFlags&6&&(t.flags|=8192)):ae(t),null;case 24:return null;case 25:return null}throw Error(S(156,t.tag))}function Cd(e,t){switch(hs(t),t.tag){case 1:return we(t.type)&&Yr(),e=t.flags,e&65536?(t.flags=e&-65537|128,t):null;case 3:return dn(),H(ge),H(fe),Cs(),e=t.flags,e&65536&&!(e&128)?(t.flags=e&-65537|128,t):null;case 5:return Ns(t),null;case 13:if(H(K),e=t.memoizedState,e!==null&&e.dehydrated!==null){if(t.alternate===null)throw Error(S(340));cn()}return e=t.flags,e&65536?(t.flags=e&-65537|128,t):null;case 19:return H(K),null;case 4:return dn(),null;case 10:return ws(t.type._context),null;case 22:case 23:return Os(),null;case 24:return null;default:return null}}var Cr=!1,ce=!1,Ed=typeof WeakSet=="function"?WeakSet:Set,_=null;function bt(e,t){var n=e.ref;if(n!==null)if(typeof n=="function")try{n(null)}catch(r){X(e,t,r)}else n.current=null}function Uo(e,t,n){try{n()}catch(r){X(e,t,r)}}var Vi=!1;function jd(e,t){if(So=Wr,e=na(),ps(e)){if("selectionStart"in e)var n={start:e.selectionStart,end:e.selectionEnd};else e:{n=(n=e.ownerDocument)&&n.defaultView||window;var r=n.getSelection&&n.getSelection();if(r&&r.rangeCount!==0){n=r.anchorNode;var l=r.anchorOffset,o=r.focusNode;r=r.focusOffset;try{n.nodeType,o.nodeType}catch{n=null;break e}var s=0,i=-1,u=-1,f=0,y=0,m=e,p=null;t:for(;;){for(var v;m!==n||l!==0&&m.nodeType!==3||(i=s+l),m!==o||r!==0&&m.nodeType!==3||(u=s+r),m.nodeType===3&&(s+=m.nodeValue.length),(v=m.firstChild)!==null;)p=m,m=v;for(;;){if(m===e)break t;if(p===n&&++f===l&&(i=s),p===o&&++y===r&&(u=s),(v=m.nextSibling)!==null)break;m=p,p=m.parentNode}m=v}n=i===-1||u===-1?null:{start:i,end:u}}else n=null}n=n||{start:0,end:0}}else n=null;for(No={focusedElem:e,selectionRange:n},Wr=!1,_=t;_!==null;)if(t=_,e=t.child,(t.subtreeFlags&1028)!==0&&e!==null)e.return=t,_=e;else for(;_!==null;){t=_;try{var g=t.alternate;if(t.flags&1024)switch(t.tag){case 0:case 11:case 15:break;case 1:if(g!==null){var w=g.memoizedProps,M=g.memoizedState,d=t.stateNode,c=d.getSnapshotBeforeUpdate(t.elementType===t.type?w:Ie(t.type,w),M);d.__reactInternalSnapshotBeforeUpdate=c}break;case 3:var h=t.stateNode.containerInfo;h.nodeType===1?h.textContent="":h.nodeType===9&&h.documentElement&&h.removeChild(h.documentElement);break;case 5:case 6:case 4:case 17:break;default:throw Error(S(163))}}catch(x){X(t,t.return,x)}if(e=t.sibling,e!==null){e.return=t.return,_=e;break}_=t.return}return g=Vi,Vi=!1,g}function Dn(e,t,n){var r=t.updateQueue;if(r=r!==null?r.lastEffect:null,r!==null){var l=r=r.next;do{if((l.tag&e)===e){var o=l.destroy;l.destroy=void 0,o!==void 0&&Uo(t,n,o)}l=l.next}while(l!==r)}}function wl(e,t){if(t=t.updateQueue,t=t!==null?t.lastEffect:null,t!==null){var n=t=t.next;do{if((n.tag&e)===e){var r=n.create;n.destroy=r()}n=n.next}while(n!==t)}}function Vo(e){var t=e.ref;if(t!==null){var n=e.stateNode;switch(e.tag){case 5:e=n;break;default:e=n}typeof t=="function"?t(e):t.current=e}}function qa(e){var t=e.alternate;t!==null&&(e.alternate=null,qa(t)),e.child=null,e.deletions=null,e.sibling=null,e.tag===5&&(t=e.stateNode,t!==null&&(delete t[Be],delete t[Jn],delete t[jo],delete t[ud],delete t[ad])),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}function ba(e){return e.tag===5||e.tag===3||e.tag===4}function Ai(e){e:for(;;){for(;e.sibling===null;){if(e.return===null||ba(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;e.tag!==5&&e.tag!==6&&e.tag!==18;){if(e.flags&2||e.child===null||e.tag===4)continue e;e.child.return=e,e=e.child}if(!(e.flags&2))return e.stateNode}}function Ao(e,t,n){var r=e.tag;if(r===5||r===6)e=e.stateNode,t?n.nodeType===8?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(n.nodeType===8?(t=n.parentNode,t.insertBefore(e,n)):(t=n,t.appendChild(e)),n=n._reactRootContainer,n!=null||t.onclick!==null||(t.onclick=Gr));else if(r!==4&&(e=e.child,e!==null))for(Ao(e,t,n),e=e.sibling;e!==null;)Ao(e,t,n),e=e.sibling}function Bo(e,t,n){var r=e.tag;if(r===5||r===6)e=e.stateNode,t?n.insertBefore(e,t):n.appendChild(e);else if(r!==4&&(e=e.child,e!==null))for(Bo(e,t,n),e=e.sibling;e!==null;)Bo(e,t,n),e=e.sibling}var oe=null,Oe=!1;function rt(e,t,n){for(n=n.child;n!==null;)ec(e,t,n),n=n.sibling}function ec(e,t,n){if(He&&typeof He.onCommitFiberUnmount=="function")try{He.onCommitFiberUnmount(fl,n)}catch{}switch(n.tag){case 5:ce||bt(n,t);case 6:var r=oe,l=Oe;oe=null,rt(e,t,n),oe=r,Oe=l,oe!==null&&(Oe?(e=oe,n=n.stateNode,e.nodeType===8?e.parentNode.removeChild(n):e.removeChild(n)):oe.removeChild(n.stateNode));break;case 18:oe!==null&&(Oe?(e=oe,n=n.stateNode,e.nodeType===8?Hl(e.parentNode,n):e.nodeType===1&&Hl(e,n),Qn(e)):Hl(oe,n.stateNode));break;case 4:r=oe,l=Oe,oe=n.stateNode.containerInfo,Oe=!0,rt(e,t,n),oe=r,Oe=l;break;case 0:case 11:case 14:case 15:if(!ce&&(r=n.updateQueue,r!==null&&(r=r.lastEffect,r!==null))){l=r=r.next;do{var o=l,s=o.destroy;o=o.tag,s!==void 0&&(o&2||o&4)&&Uo(n,t,s),l=l.next}while(l!==r)}rt(e,t,n);break;case 1:if(!ce&&(bt(n,t),r=n.stateNode,typeof r.componentWillUnmount=="function"))try{r.props=n.memoizedProps,r.state=n.memoizedState,r.componentWillUnmount()}catch(i){X(n,t,i)}rt(e,t,n);break;case 21:rt(e,t,n);break;case 22:n.mode&1?(ce=(r=ce)||n.memoizedState!==null,rt(e,t,n),ce=r):rt(e,t,n);break;default:rt(e,t,n)}}function Bi(e){var t=e.updateQueue;if(t!==null){e.updateQueue=null;var n=e.stateNode;n===null&&(n=e.stateNode=new Ed),t.forEach(function(r){var l=Od.bind(null,e,r);n.has(r)||(n.add(r),r.then(l,l))})}}function ze(e,t){var n=t.deletions;if(n!==null)for(var r=0;rl&&(l=s),r&=~o}if(r=l,r=J()-r,r=(120>r?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*_d(r/1960))-r,10e?16:e,at===null)var r=!1;else{if(e=at,at=null,sl=0,F&6)throw Error(S(331));var l=F;for(F|=4,_=e.current;_!==null;){var o=_,s=o.child;if(_.flags&16){var i=o.deletions;if(i!==null){for(var u=0;uJ()-zs?Lt(e,0):Rs|=n),xe(e,t)}function uc(e,t){t===0&&(e.mode&1?(t=hr,hr<<=1,!(hr&130023424)&&(hr=4194304)):t=1);var n=pe();e=et(e,t),e!==null&&(or(e,t,n),xe(e,n))}function Id(e){var t=e.memoizedState,n=0;t!==null&&(n=t.retryLane),uc(e,n)}function Od(e,t){var n=0;switch(e.tag){case 13:var r=e.stateNode,l=e.memoizedState;l!==null&&(n=l.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(S(314))}r!==null&&r.delete(t),uc(e,n)}var ac;ac=function(e,t,n){if(e!==null)if(e.memoizedProps!==t.pendingProps||ge.current)ye=!0;else{if(!(e.lanes&n)&&!(t.flags&128))return ye=!1,Sd(e,t,n);ye=!!(e.flags&131072)}else ye=!1,W&&t.flags&1048576&&pa(t,Zr,t.index);switch(t.lanes=0,t.tag){case 2:var r=t.type;Or(e,t),e=t.pendingProps;var l=an(t,fe.current);on(t,n),l=js(null,t,r,e,l,n);var o=Ps();return t.flags|=1,typeof l=="object"&&l!==null&&typeof l.render=="function"&&l.$$typeof===void 0?(t.tag=1,t.memoizedState=null,t.updateQueue=null,we(r)?(o=!0,Xr(t)):o=!1,t.memoizedState=l.state!==null&&l.state!==void 0?l.state:null,ks(t),l.updater=gl,t.stateNode=l,l._reactInternals=t,Ro(t,r,e,n),t=Oo(null,t,r,!0,o,n)):(t.tag=0,W&&o&&ms(t),de(null,t,l,n),t=t.child),t;case 16:r=t.elementType;e:{switch(Or(e,t),e=t.pendingProps,l=r._init,r=l(r._payload),t.type=r,l=t.tag=Dd(r),e=Ie(r,e),l){case 0:t=Io(null,t,r,e,n);break e;case 1:t=Di(null,t,r,e,n);break e;case 11:t=Oi(null,t,r,e,n);break e;case 14:t=$i(null,t,r,Ie(r.type,e),n);break e}throw Error(S(306,r,""))}return t;case 0:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:Ie(r,l),Io(e,t,r,l,n);case 1:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:Ie(r,l),Di(e,t,r,l,n);case 3:e:{if(Ka(t),e===null)throw Error(S(387));r=t.pendingProps,o=t.memoizedState,l=o.element,wa(e,t),el(t,r,null,n);var s=t.memoizedState;if(r=s.element,o.isDehydrated)if(o={element:r,isDehydrated:!1,cache:s.cache,pendingSuspenseBoundaries:s.pendingSuspenseBoundaries,transitions:s.transitions},t.updateQueue.baseState=o,t.memoizedState=o,t.flags&256){l=pn(Error(S(423)),t),t=Fi(e,t,r,n,l);break e}else if(r!==l){l=pn(Error(S(424)),t),t=Fi(e,t,r,n,l);break e}else for(Se=pt(t.stateNode.containerInfo.firstChild),Ne=t,W=!0,$e=null,n=ya(t,null,r,n),t.child=n;n;)n.flags=n.flags&-3|4096,n=n.sibling;else{if(cn(),r===l){t=tt(e,t,n);break e}de(e,t,r,n)}t=t.child}return t;case 5:return xa(t),e===null&&To(t),r=t.type,l=t.pendingProps,o=e!==null?e.memoizedProps:null,s=l.children,Co(r,l)?s=null:o!==null&&Co(r,o)&&(t.flags|=32),Qa(e,t),de(e,t,s,n),t.child;case 6:return e===null&&To(t),null;case 13:return Ga(e,t,n);case 4:return Ss(t,t.stateNode.containerInfo),r=t.pendingProps,e===null?t.child=fn(t,null,r,n):de(e,t,r,n),t.child;case 11:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:Ie(r,l),Oi(e,t,r,l,n);case 7:return de(e,t,t.pendingProps,n),t.child;case 8:return de(e,t,t.pendingProps.children,n),t.child;case 12:return de(e,t,t.pendingProps.children,n),t.child;case 10:e:{if(r=t.type._context,l=t.pendingProps,o=t.memoizedProps,s=l.value,A(qr,r._currentValue),r._currentValue=s,o!==null)if(Ue(o.value,s)){if(o.children===l.children&&!ge.current){t=tt(e,t,n);break e}}else for(o=t.child,o!==null&&(o.return=t);o!==null;){var i=o.dependencies;if(i!==null){s=o.child;for(var u=i.firstContext;u!==null;){if(u.context===r){if(o.tag===1){u=Ze(-1,n&-n),u.tag=2;var f=o.updateQueue;if(f!==null){f=f.shared;var y=f.pending;y===null?u.next=u:(u.next=y.next,y.next=u),f.pending=u}}o.lanes|=n,u=o.alternate,u!==null&&(u.lanes|=n),Mo(o.return,n,t),i.lanes|=n;break}u=u.next}}else if(o.tag===10)s=o.type===t.type?null:o.child;else if(o.tag===18){if(s=o.return,s===null)throw Error(S(341));s.lanes|=n,i=s.alternate,i!==null&&(i.lanes|=n),Mo(s,n,t),s=o.sibling}else s=o.child;if(s!==null)s.return=o;else for(s=o;s!==null;){if(s===t){s=null;break}if(o=s.sibling,o!==null){o.return=s.return,s=o;break}s=s.return}o=s}de(e,t,l.children,n),t=t.child}return t;case 9:return l=t.type,r=t.pendingProps.children,on(t,n),l=Le(l),r=r(l),t.flags|=1,de(e,t,r,n),t.child;case 14:return r=t.type,l=Ie(r,t.pendingProps),l=Ie(r.type,l),$i(e,t,r,l,n);case 15:return Ha(e,t,t.type,t.pendingProps,n);case 17:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:Ie(r,l),Or(e,t),t.tag=1,we(r)?(e=!0,Xr(t)):e=!1,on(t,n),Va(t,r,l),Ro(t,r,l,n),Oo(null,t,r,!0,e,n);case 19:return Ya(e,t,n);case 22:return Wa(e,t,n)}throw Error(S(156,t.tag))};function cc(e,t){return Du(e,t)}function $d(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Te(e,t,n,r){return new $d(e,t,n,r)}function Ds(e){return e=e.prototype,!(!e||!e.isReactComponent)}function Dd(e){if(typeof e=="function")return Ds(e)?1:0;if(e!=null){if(e=e.$$typeof,e===ns)return 11;if(e===rs)return 14}return 2}function yt(e,t){var n=e.alternate;return n===null?(n=Te(e.tag,t,e.key,e.mode),n.elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.subtreeFlags=0,n.deletions=null),n.flags=e.flags&14680064,n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=t===null?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Fr(e,t,n,r,l,o){var s=2;if(r=e,typeof e=="function")Ds(e)&&(s=1);else if(typeof e=="string")s=5;else e:switch(e){case Wt:return Rt(n.children,l,o,t);case ts:s=8,l|=8;break;case to:return e=Te(12,n,t,l|2),e.elementType=to,e.lanes=o,e;case no:return e=Te(13,n,t,l),e.elementType=no,e.lanes=o,e;case ro:return e=Te(19,n,t,l),e.elementType=ro,e.lanes=o,e;case xu:return kl(n,l,o,t);default:if(typeof e=="object"&&e!==null)switch(e.$$typeof){case gu:s=10;break e;case wu:s=9;break e;case ns:s=11;break e;case rs:s=14;break e;case lt:s=16,r=null;break e}throw Error(S(130,e==null?e:typeof e,""))}return t=Te(s,n,t,l),t.elementType=e,t.type=r,t.lanes=o,t}function Rt(e,t,n,r){return e=Te(7,e,r,t),e.lanes=n,e}function kl(e,t,n,r){return e=Te(22,e,r,t),e.elementType=xu,e.lanes=n,e.stateNode={isHidden:!1},e}function Zl(e,t,n){return e=Te(6,e,null,t),e.lanes=n,e}function ql(e,t,n){return t=Te(4,e.children!==null?e.children:[],e.key,t),t.lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function Fd(e,t,n,r,l){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=Rl(0),this.expirationTimes=Rl(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=Rl(0),this.identifierPrefix=r,this.onRecoverableError=l,this.mutableSourceEagerHydrationData=null}function Fs(e,t,n,r,l,o,s,i,u){return e=new Fd(e,t,n,i,u),t===1?(t=1,o===!0&&(t|=8)):t=0,o=Te(3,null,null,t),e.current=o,o.stateNode=e,o.memoizedState={element:r,isDehydrated:n,cache:null,transitions:null,pendingSuspenseBoundaries:null},ks(o),e}function Ud(e,t,n){var r=3"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!="function"))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(mc)}catch(e){console.error(e)}}mc(),mu.exports=Ee;var Wd=mu.exports,Ji=Wd;bl.createRoot=Ji.createRoot,bl.hydrateRoot=Ji.hydrateRoot;function Qd(){const[e,t]=k.useState({status:"disconnected"}),[n,r]=k.useState([]),[l,o]=k.useState(null),[s,i]=k.useState(0),u=k.useRef(null),f=k.useRef(null),y=k.useRef(!1),m=k.useCallback(()=>{var w;if(((w=u.current)==null?void 0:w.readyState)===WebSocket.OPEN)return;const g=`${window.location.protocol==="https:"?"wss:":"ws:"}//${window.location.host}/ws/pipedal`;t({status:"connecting"});try{const M=new WebSocket(g);M.onopen=()=>{t({status:"connected"})},M.onmessage=d=>{try{const c=JSON.parse(d.data);c.type==="connected"?t({status:"connected"}):c.type==="error"&&t({status:"error",error:c.message})}catch{}},M.onerror=()=>{t({status:"error",error:"WebSocket connection error"})},M.onclose=()=>{y.current||(t({status:"disconnected"}),f.current=window.setTimeout(()=>{y.current||m()},3e3))},u.current=M}catch(M){t({status:"error",error:String(M)})}},[]),p=k.useCallback(async()=>{try{const g=await(await fetch("/api/discover")).json();r(g.oplabs_instances||[]),o(g.pedalboard_name),i(Date.now()),g.connected&&t({status:"connected"})}catch(v){t({status:"error",error:`Discover failed: ${String(v)}`})}},[]);return k.useEffect(()=>(y.current=!1,m(),()=>{y.current=!0,f.current&&clearTimeout(f.current),u.current&&u.current.close()}),[m]),k.useEffect(()=>{e.status==="connected"&&p()},[e.status,p]),{connectionState:e,plugins:n,pedalboardName:l,discover:p,lastUpdate:s}}function Kd(){const e=k.useRef(null),[t,n]=k.useState(!1),r=k.useRef(null),l=k.useRef(!1),o=k.useRef(new Map),s=k.useCallback(()=>{var y;if(((y=e.current)==null?void 0:y.readyState)===WebSocket.OPEN)return;const f=`${window.location.protocol==="https:"?"wss:":"ws:"}//${window.location.host}/ws/pipedal`;try{const m=new WebSocket(f);m.onopen=()=>{n(!0)},m.onmessage=p=>{try{const v=JSON.parse(p.data);if(Array.isArray(v)&&v.length>=1){const g=v[0];if(g.reply!==void 0){const w=o.current.get(g.reply);w&&(w(v[1]||null),o.current.delete(g.reply))}}}catch{}},m.onerror=()=>{n(!1)},m.onclose=()=>{n(!1),o.current.clear(),l.current||(r.current=window.setTimeout(()=>{l.current||s()},3e3))},e.current=m}catch{n(!1)}},[]);k.useEffect(()=>(l.current=!1,s(),()=>{l.current=!0,r.current&&clearTimeout(r.current),e.current&&e.current.close()}),[s]);const i=k.useCallback((u,f,y)=>{if(!e.current||e.current.readyState!==WebSocket.OPEN)return;const m=(Date.now()&2147483647)+Math.floor(Math.random()*1e3),p=JSON.stringify([{message:"setControlValue",replyTo:m},{instanceId:u,key:f,value:y}]);e.current.send(p)},[]);return{ready:t,setControlValue:i}}function Gd(){const[e,t]=k.useState([]),[n,r]=k.useState(!1),[l,o]=k.useState(null),s=k.useCallback(async()=>{r(!0),o(null);try{const m=await fetch("/api/scenes");if(!m.ok)throw new Error(`Failed to load scenes: ${m.statusText}`);const p=await m.json();t(p.scenes||[])}catch(m){const p=m instanceof Error?m.message:String(m);o(p)}finally{r(!1)}},[]);k.useEffect(()=>{s()},[s]);const i=k.useCallback(async(m,p,v)=>{o(null);try{const g=await fetch("/api/scenes",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:m,state:p,midiPc:v??null})});if(!g.ok)throw new Error(`Failed to save scene: ${g.statusText}`);await s()}catch(g){const w=g instanceof Error?g.message:String(g);throw o(w),g}},[s]),u=k.useCallback(async(m,p)=>{o(null);try{const v=await fetch(`/api/scenes/${encodeURIComponent(m)}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(p)});if(!v.ok)throw new Error(`Failed to update scene: ${v.statusText}`);await s()}catch(v){const g=v instanceof Error?v.message:String(v);o(g)}},[s]),f=k.useCallback(async m=>{o(null);try{const p=await fetch(`/api/scenes/${encodeURIComponent(m)}`,{method:"DELETE"});if(!p.ok)throw new Error(`Failed to delete scene: ${p.statusText}`);await s()}catch(p){const v=p instanceof Error?p.message:String(p);o(v)}},[s]),y=k.useCallback(async m=>{o(null);try{const p=await fetch(`/api/scenes/${encodeURIComponent(m)}/recall`,{method:"POST"});if(!p.ok){const v=await p.json().catch(()=>({}));throw new Error(v.error||`Recall failed: ${p.statusText}`)}return!0}catch(p){const v=p instanceof Error?p.message:String(p);return o(v),!1}},[]);return{scenes:e,loading:n,error:l,saveScene:i,updateScene:u,deleteScene:f,recallScene:y,refreshScenes:s}}function Yd(){const[e,t]=k.useState({ports:[],connections:{},loading:!0,error:null,source:"none"}),[n,r]=k.useState("idle"),[l,o]=k.useState(null),s=k.useRef(!0);k.useEffect(()=>()=>{s.current=!1},[]);const i=k.useCallback(async()=>{t(m=>({...m,loading:!0,error:null}));try{const m=await fetch("/api/jack/ports");if(!m.ok)throw new Error(`Failed to load JACK ports: ${m.statusText}`);const p=await m.json();s.current&&t({ports:p.ports||[],connections:p.connections||{},loading:!1,error:p.note||null,source:p.source})}catch(m){const p=m instanceof Error?m.message:String(m);s.current&&t(v=>({...v,loading:!1,error:p}))}},[]),u=k.useCallback(async(m,p)=>{r("connecting"),o(null);try{const v=await fetch("/api/jack/connect",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({source:m,destination:p})});if(!v.ok){const g=await v.json().catch(()=>({}));throw new Error(g.detail||`Connect failed: ${v.statusText}`)}return await i(),r("idle"),!0}catch(v){const g=v instanceof Error?v.message:String(v);return o(g),r("error"),!1}},[i]),f=k.useCallback(async(m,p)=>{r("disconnecting"),o(null);try{const v=await fetch("/api/jack/disconnect",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({source:m,destination:p})});if(!v.ok){const g=await v.json().catch(()=>({}));throw new Error(g.detail||`Disconnect failed: ${v.statusText}`)}return await i(),r("idle"),!0}catch(v){const g=v instanceof Error?v.message:String(v);return o(g),r("error"),!1}},[i]),y=k.useCallback(async()=>{r("disconnecting"),o(null);try{const m=await fetch("/api/jack/disconnect-all",{method:"POST"});if(!m.ok)throw new Error(`Disconnect all failed: ${m.statusText}`);return await i(),r("idle"),!0}catch(m){const p=m instanceof Error?m.message:String(m);return o(p),r("error"),!1}},[i]);return k.useEffect(()=>{i()},[i]),{portsState:e,refresh:i,connect:u,disconnect:f,disconnectAll:y,actionState:n,actionError:l}}const Mn=32,Go=28,rr=4,Bt="#e94560",Xd=2.5,Jd=4;function Zi(e,t){const n=e.filter(o=>o.direction===t&&o.port_type==="audio").sort((o,s)=>{if(o.is_physical!==s.is_physical)return o.is_physical?-1:1;const i=o.client.localeCompare(s.client);return i!==0?i:o.port.localeCompare(s.port)}),r=[];let l=null;for(const o of n)(!l||l.client!==o.client)&&(l={client:o.client,ports:[],totalHeight:Go+rr},r.push(l)),l.ports.push(o),l.totalHeight+=Mn;return r}function Zd(e,t,n,r){const l={},o={};let s=r;for(const y of e){s+=Go+rr/2;for(const m of y.ports)l[m.name]=s+Mn/2,s+=Mn}let i=r;for(const y of t){i+=Go+rr/2;for(const m of y.ports)o[m.name]=i+Mn/2,i+=Mn}const u=[],f=new Set;for(const[y,m]of Object.entries(l)){const p=n[y]||[];for(const v of p){const g=`${y}→${v}`;if(f.has(g))continue;f.add(g);const w=o[v];w!==void 0&&u.push({source:y,dest:v,y1:m,y2:w})}}return u}function qi(e,t,n,r){const l=r,o=n-r,s=Math.max(60,(o-l)*.4);return`M ${l} ${e} C ${l+s} ${e}, ${o-s} ${t}, ${o} ${t}`}const qd=({portsState:e,onConnect:t,onDisconnect:n,onDisconnectAll:r,onRefresh:l,actionState:o,actionError:s})=>{const{ports:i,connections:u,loading:f,error:y,source:m}=e,[p,v]=k.useState(null),[g,w]=k.useState(null),M=k.useRef(null),[d,c]=k.useState(800),h=k.useMemo(()=>Zi(i,"output"),[i]),x=k.useMemo(()=>Zi(i,"input"),[i]),N=k.useMemo(()=>{const D=h.reduce((Qe,Ke)=>Qe+Ke.totalHeight,rr),Z=x.reduce((Qe,Ke)=>Qe+Ke.totalHeight,rr),ee=Math.max(D,Z)+40+20;return{headerH:40,leftH:D,rightH:Z,totalH:ee}},[h,x]),C=280,E=k.useMemo(()=>Zd(h,x,u,N.headerH+12),[h,x,u,N.headerH]);k.useEffect(()=>{const j=M.current;if(!j)return;const D=new ResizeObserver(Z=>{for(const ee of Z)c(ee.contentRect.width)});return D.observe(j),()=>D.disconnect()},[]),k.useEffect(()=>{o==="idle"&&v(null)},[o]);const T=k.useCallback(async j=>{if(j.direction==="output")if(j.connections.length>0)for(const D of j.connections)await n(j.name,D);else v(p===j.name?null:j.name);else if(p)await t(p,j.name),v(null);else if(j.connections.length>0)for(const D of j.connections)await n(D,j.name)},[p,t,n]),V=k.useCallback(j=>{const D=["patch-port"];return j.connections.length>0&&D.push("connected"),p===j.name&&D.push("armed"),j.direction==="output"&&p&&p!==j.name&&D.push("available"),D.join(" ")},[p]),z=k.useMemo(()=>{let j=0;for(const[,D]of Object.entries(u))j+=D.length;return j},[u]),L=(j,D)=>a.jsx("div",{className:`patch-column patch-column-${D}`,children:j.map(Z=>a.jsxs("div",{className:"patch-group",children:[a.jsxs("div",{className:"patch-group-header",children:[a.jsx("span",{className:`patch-group-dot ${Z.client==="system"?"physical":""}`}),a.jsx("span",{className:"patch-group-name",children:Z.client==="system"?Z.client:Z.client.replace(/^pipedal:/,"").replace(/^pipedal/,"PiPedal")})]}),Z.ports.map(ee=>a.jsxs("div",{className:V(ee),onClick:()=>T(ee),title:`${ee.name}${ee.connections.length>0?` -Connected to: ${ee.connections.join(", ")}`:` -Click to connect`}`,children:[D==="left"&&a.jsx("span",{className:"patch-port-indicator"}),a.jsx("span",{className:`patch-port-name ${ee.is_physical?"physical":""}`,children:ee.port}),ee.connections.length>0&&a.jsx("span",{className:"patch-port-conn-count",children:ee.connections.length})]},ee.name))]},Z.client))});return f?a.jsx("div",{className:"patch-bay",children:a.jsxs("div",{className:"patch-bay-loading",children:[a.jsx("div",{className:"patch-spinner"}),a.jsx("span",{children:"Loading JACK ports..."})]})}):i.length===0?a.jsx("div",{className:"patch-bay",children:a.jsxs("div",{className:"patch-bay-empty",children:[a.jsx("div",{className:"patch-empty-icon",children:"🔌"}),a.jsx("h3",{children:"No JACK Ports Available"}),a.jsx("p",{children:m==="none"?"PiPedal is unreachable. Ensure the PiPedal server is running on 192.168.0.245:8080.":"No ports found in the current pedalboard."}),y&&a.jsx("p",{className:"patch-empty-note",children:y}),a.jsx("button",{className:"patch-refresh-btn",onClick:l,children:"↻ Retry"})]})}):a.jsxs("div",{className:"patch-bay",ref:M,children:[a.jsxs("div",{className:"patch-bay-header",children:[a.jsxs("div",{className:"patch-bay-title",children:[a.jsx("span",{className:"patch-icon",children:"🔌"}),a.jsx("span",{children:"Patch Bay"}),a.jsx("span",{className:"patch-conn-count",children:z})]}),a.jsxs("div",{className:"patch-bay-actions",children:[p&&a.jsxs("span",{className:"patch-armed-info",children:["Armed: ",a.jsx("code",{children:p.split(":").pop()})]}),o!=="idle"&&a.jsx("span",{className:`patch-action-state ${o}`,children:o==="connecting"?"Connecting...":o==="disconnecting"?"Disconnecting...":s||"Error"}),a.jsx("button",{className:"patch-action-btn",onClick:r,disabled:z===0||o!=="idle",title:"Disconnect all",children:"✕ Disconnect All"}),a.jsx("button",{className:"patch-refresh-btn",onClick:l,disabled:o!=="idle",title:"Refresh ports",children:"↻"})]})]}),a.jsxs("div",{className:"patch-bay-body",style:{minHeight:N.totalH},children:[a.jsxs("svg",{className:"patch-cables-svg",width:d,height:N.totalH,style:{position:"absolute",top:0,left:0,pointerEvents:"none"},children:[a.jsxs("defs",{children:[a.jsxs("linearGradient",{id:"cableGrad",x1:"0",y1:"0",x2:"1",y2:"0",children:[a.jsx("stop",{offset:"0%",stopColor:Bt,stopOpacity:.15}),a.jsx("stop",{offset:"50%",stopColor:Bt,stopOpacity:.6}),a.jsx("stop",{offset:"100%",stopColor:Bt,stopOpacity:.15})]}),a.jsxs("filter",{id:"cableGlow",children:[a.jsx("feGaussianBlur",{stdDeviation:"2",result:"blur"}),a.jsxs("feMerge",{children:[a.jsx("feMergeNode",{in:"blur"}),a.jsx("feMergeNode",{in:"SourceGraphic"})]})]})]}),E.map(j=>a.jsx("path",{d:qi(j.y1,j.y2,d,C),fill:"none",stroke:"transparent",strokeWidth:14,style:{pointerEvents:"stroke",cursor:"pointer"},onMouseEnter:()=>w({source:j.source,dest:j.dest}),onMouseLeave:()=>w(null),onClick:()=>{n(j.source,j.dest)}},`bg-${j.source}→${j.dest}`)),E.map(j=>{const D=(g==null?void 0:g.source)===j.source&&(g==null?void 0:g.dest)===j.dest;return a.jsx("path",{d:qi(j.y1,j.y2,d,C),fill:"none",stroke:D?"#ff6b81":Bt,strokeWidth:D?Jd:Xd,strokeLinecap:"round",opacity:D?.9:.5,filter:D?"url(#cableGlow)":void 0,style:{pointerEvents:"none"}},`cable-${j.source}→${j.dest}`)}),E.map(j=>a.jsx("circle",{cx:C,cy:j.y1,r:3,fill:Bt,opacity:.8},`dot-${j.source}→${j.dest}`)),E.map(j=>a.jsx("circle",{cx:d-C,cy:j.y2,r:3,fill:Bt,opacity:.8},`dot2-${j.source}→${j.dest}`))]}),L(h,"left"),L(x,"right"),m!=="pipedal"&&m!=="none"&&a.jsxs("div",{className:"patch-source-note",children:["Port data from pedalboard state (source: ",m,")"]})]}),y&&a.jsxs("div",{className:"patch-bay-error",children:[a.jsxs("span",{children:["⚠ ",y]}),a.jsx("button",{className:"patch-dismiss-btn",onClick:l,children:"↻"})]}),s&&a.jsx("div",{className:"patch-bay-error action",children:a.jsxs("span",{children:["⚠ ",s]})})]})},hc={0:"Guitar",1:"Bass",2:"Keys",3:"Vocals",4:"Backing"},vc={0:"#ff8c00",1:"#2196f3",2:"#9c27b0",3:"#e91e63",4:"#009688"},bd={0:"🎸",1:"🎸",2:"🎹",3:"🎤",4:"🎵"},ep=({instrument:e,size:t="medium",showIcon:n=!0})=>{const r=hc[e]??`Unknown (${e})`,l=vc[e]??"#666",o=bd[e]??"";return a.jsxs("span",{className:"instrument-badge","data-size":t,style:{backgroundColor:`${l}22`,color:l,borderColor:l},title:r,children:[n&&a.jsx("span",{className:"instrument-icon",children:o}),a.jsx("span",{className:"instrument-name",children:r})]})},Mt=-60,bi=0;function Ct(e){const n=(Math.max(Mt,Math.min(bi,e))-Mt)/(bi-Mt);return Math.sqrt(n)*100}const al=({levelL:e,levelR:t,label:n,mini:r=!1,peakHold:l=1500})=>{const o=k.useRef(Mt),s=k.useRef(Mt),i=k.useRef(null),u=k.useRef(null),[,f]=du.useState(0);k.useEffect(()=>{e>o.current&&(o.current=e,i.current&&clearTimeout(i.current),i.current=window.setTimeout(()=>{o.current=Math.max(e,Mt),f(M=>M+1)},l)),t>s.current&&(s.current=t,u.current&&clearTimeout(u.current),u.current=window.setTimeout(()=>{s.current=Math.max(t,Mt),f(M=>M+1)},l))},[e,t,l]);const y=Ct(e),m=Ct(t),p=Ct(o.current),v=Ct(s.current),g=M=>M<60?"var(--meter-green, #4caf50)":M<85?"var(--meter-yellow, #ff9800)":"var(--meter-red, #f44336)",w=(M,d,c)=>a.jsxs("div",{className:`level-meter-channel ${r?"mini":""}`,children:[!r&&a.jsx("span",{className:"level-meter-side-label",children:c}),a.jsxs("div",{className:"level-meter-bar-track",children:[a.jsx("div",{className:"level-meter-bar-fill",style:{height:`${Math.min(100,M)}%`,backgroundColor:g(M)}}),a.jsx("div",{className:"level-meter-peak",style:{bottom:`${Math.min(100,d)}%`}}),!r&&a.jsxs(a.Fragment,{children:[a.jsx("div",{className:"level-meter-tick",style:{bottom:`${Ct(-6)}%`}}),a.jsx("div",{className:"level-meter-tick mark-yellow",style:{bottom:`${Ct(-20)}%`}}),a.jsx("div",{className:"level-meter-tick mark-green",style:{bottom:`${Ct(-40)}%`}})]})]})]});return a.jsxs("div",{className:`level-meter ${r?"mini":""}`,children:[a.jsxs("div",{className:"level-meter-stereo-pair",children:[w(y,p,"L"),w(m,v,"R")]}),n&&a.jsx("div",{className:"level-meter-label",children:n}),!r&&a.jsxs("div",{className:"level-meter-db-values",children:[a.jsx("span",{className:e>-10?"hot":"",children:e.toFixed(1)}),a.jsx("span",{className:t>-10?"hot":"",children:t.toFixed(1)})]})]})},tp=[0,1,2,3,4];function np(e){if(e<=0)return-60;if(e>=1)return 6;const t=e/.75;if(t<=.001)return-60;const n=20*Math.log10(t);return Math.max(-60,Math.min(6,n))}function rp(e){if(e<=-60)return 0;if(e>=6)return 1;const t=Math.pow(10,e/20);return Math.min(1,t*.75)}const lp=({plugin:e,onSetControl:t})=>{const n=e.controlValues,r=n.volume??0,l=n.pan??0,o=(n.mute??0)>=.5,s=(n.solo??0)>=.5,i=Math.round(n.instrument??0)||0,u=n.levelL??-60,f=n.levelR??-60,y=vc[i]??"#666",m=k.useCallback(d=>{const c=parseFloat(d.target.value)/100,h=np(c);t(e.instanceId,"volume",parseFloat(h.toFixed(1)))},[e.instanceId,t]),p=k.useCallback(d=>{const c=parseFloat(d.target.value);t(e.instanceId,"pan",c)},[e.instanceId,t]),v=k.useCallback(()=>{t(e.instanceId,"mute",o?0:1)},[e.instanceId,o,t]),g=k.useCallback(()=>{t(e.instanceId,"solo",s?0:1)},[e.instanceId,s,t]),w=k.useCallback(d=>{const c=parseInt(d.target.value,10);t(e.instanceId,"instrument",c)},[e.instanceId,t]),M=rp(r)*100;return a.jsxs("div",{className:"channel-strip",style:{borderTopColor:y,"--channel-accent":y},children:[a.jsxs("div",{className:"channel-header",children:[a.jsx("span",{className:"channel-label",title:e.title||e.pluginName,children:e.title||e.pluginName||`Ch ${e.instanceId}`}),a.jsx(ep,{instrument:i,size:"small"})]}),a.jsxs("div",{className:"channel-mute-solo",children:[a.jsx("button",{className:`channel-btn mute ${o?"active":""}`,onClick:v,title:"Mute",children:"M"}),a.jsx("button",{className:`channel-btn solo ${s?"active":""}`,onClick:g,title:"Solo",children:"S"})]}),a.jsx("div",{className:"channel-meter-section",children:a.jsx(al,{levelL:u,levelR:f,mini:!1})}),a.jsxs("div",{className:"channel-pan",children:[a.jsx("label",{className:"channel-pan-label",children:"Pan"}),a.jsxs("div",{className:"channel-pan-control",children:[a.jsx("input",{type:"range",min:"-1",max:"1",step:"0.01",value:l,onChange:p,className:"channel-pan-slider",title:`Pan: ${l.toFixed(2)}`}),a.jsx("span",{className:"channel-pan-value",children:l===0?"C":l<0?`L${Math.abs(Math.round(l*100))}`:`R${Math.round(l*100)}`})]})]}),a.jsxs("div",{className:"channel-fader-section",children:[a.jsx("input",{type:"range",min:"0",max:"100",step:"0.5",value:M,onChange:m,className:"channel-fader",title:`Volume: ${r.toFixed(1)} dB`,orient:"vertical"}),a.jsx("span",{className:"channel-fader-readout",children:r>-60?`${r>=0?"+":""}${r.toFixed(1)}`:"-∞"})]}),a.jsx("div",{className:"channel-instrument-selector",children:a.jsx("select",{value:i,onChange:w,className:"channel-instrument-select",style:{borderColor:y},children:tp.map(d=>a.jsx("option",{value:d,children:hc[d]},d))})})]})},op=[{value:1,label:"Main"},{value:2,label:"Bus 2"},{value:3,label:"Bus 3"},{value:4,label:"Bus 4"},{value:5,label:"Bus 5"},{value:6,label:"Bus 6"},{value:7,label:"Bus 7"},{value:8,label:"Bus 8"}];function eu(e){return(Math.max(-60,Math.min(6,e))+60)/66*100}function tu(e){return e/100*66-60}const sp=({plugin:e,onSetControl:t})=>{const n=e.controlValues,r=n.masterVol??0,l=(n.masterMute??0)>=.5,o=n.masterLevelL??-60,s=n.masterLevelR??-60,i=Array.from({length:8},(v,g)=>{const w=g+1;return{index:w,vol:n[`ch${w}Vol`]??0,mute:(n[`ch${w}Mute`]??0)>=.5,route:Math.round(n[`ch${w}Route`]??1),levelL:n[`ch${w}LevelL`]??-60,levelR:n[`ch${w}LevelR`]??-60,volKey:`ch${w}Vol`,muteKey:`ch${w}Mute`,routeKey:`ch${w}Route`}}),u=k.useCallback(v=>{const g=tu(parseFloat(v.target.value));t(e.instanceId,"masterVol",parseFloat(g.toFixed(1)))},[e.instanceId,t]),f=k.useCallback(()=>{t(e.instanceId,"masterMute",l?0:1)},[e.instanceId,l,t]),y=k.useCallback((v,g,w)=>{const M=tu(parseFloat(w.target.value));t(e.instanceId,g,parseFloat(M.toFixed(1)))},[e.instanceId,t]),m=k.useCallback((v,g,w)=>{t(e.instanceId,g,w?0:1)},[e.instanceId,t]),p=k.useCallback((v,g,w)=>{const M=parseInt(w.target.value,10);t(e.instanceId,g,M)},[e.instanceId,t]);return a.jsxs("div",{className:"bus-strip",children:[a.jsxs("div",{className:"bus-master-section",children:[a.jsxs("div",{className:"bus-master-header",children:[a.jsx("span",{className:"bus-master-label",children:"Master"}),a.jsx("button",{className:`bus-btn mute ${l?"active":""}`,onClick:f,title:"Master Mute",children:"M"})]}),a.jsx("div",{className:"bus-master-meter",children:a.jsx(al,{levelL:o,levelR:s,mini:!0,label:r>-60?`${r.toFixed(1)}dB`:"-∞"})}),a.jsx("div",{className:"bus-master-fader",children:a.jsx("input",{type:"range",min:"0",max:"100",step:"0.5",value:eu(r),onChange:u,className:"bus-fader",title:`Master Volume: ${r.toFixed(1)} dB`})})]}),a.jsx("div",{className:"bus-divider"}),a.jsx("div",{className:"bus-channels",children:i.map(v=>a.jsxs("div",{className:"bus-channel",children:[a.jsxs("span",{className:"bus-channel-label",children:["Ch ",v.index]}),a.jsx("button",{className:`bus-btn mute mini ${v.mute?"active":""}`,onClick:()=>m(v.index,v.muteKey,v.mute),title:`Ch ${v.index} Mute`,children:"M"}),a.jsx("select",{className:"bus-channel-route",value:v.route,onChange:g=>p(v.index,v.routeKey,g),title:`Ch ${v.index} route`,children:op.map(g=>a.jsx("option",{value:g.value,children:g.label},g.value))}),a.jsx("div",{className:"bus-channel-meter",children:a.jsx(al,{levelL:v.levelL,levelR:v.levelR,mini:!0})}),a.jsx("div",{className:"bus-channel-fader",children:a.jsx("input",{type:"range",min:"0",max:"100",step:"0.5",value:eu(v.vol),onChange:g=>y(v.index,v.volKey,g),className:"bus-fader mini",title:`Ch ${v.index} Volume: ${v.vol.toFixed(1)} dB`})}),a.jsx("span",{className:"bus-channel-db",children:v.vol>-60?v.vol.toFixed(1):"-∞"})]},v.index))})]})};function ip(e){if(e<=0)return-60;if(e>=1)return 6;const t=e/.75;if(t<=.001)return-60;const n=20*Math.log10(t);return Math.max(-60,Math.min(6,n))}function up(e){if(e<=-60)return 0;if(e>=6)return 1;const t=Math.pow(10,e/20);return Math.min(1,t*.75)}const ap=({volume:e,mute:t,levelL:n,levelR:r,onVolumeChange:l,onMuteToggle:o,label:s="Master"})=>{const i=up(e)*100,u=k.useCallback(y=>{const m=parseFloat(y.target.value)/100,p=ip(m);l(parseFloat(p.toFixed(1)))},[l]),f=k.useCallback(()=>{o(!t)},[t,o]);return a.jsxs("div",{className:`master-bus ${t?"muted":""}`,children:[a.jsxs("div",{className:"master-bus-header",children:[a.jsx("span",{className:"master-bus-label",children:s}),a.jsx("span",{className:"master-bus-type",children:"Main Out"})]}),a.jsx("div",{className:"master-bus-meters",children:a.jsx(al,{levelL:n,levelR:r,mini:!1})}),a.jsx("div",{className:"master-bus-controls",children:a.jsx("button",{className:`master-bus-btn mute ${t?"active":""}`,onClick:f,title:"Master Mute",children:"M"})}),a.jsxs("div",{className:"master-bus-fader-section",children:[a.jsx("input",{type:"range",min:"0",max:"100",step:"0.5",value:i,onChange:u,className:"master-bus-fader",title:`Master Volume: ${e.toFixed(1)} dB`,orient:"vertical"}),a.jsx("span",{className:"master-bus-fader-readout",children:t?"MUTED":e>-60?`${e>=0?"+":""}${e.toFixed(1)}`:"-∞"})]}),a.jsxs("div",{className:"master-bus-db-values",children:[a.jsx("span",{className:n>-10?"hot":"",children:n.toFixed(1)}),a.jsx("span",{className:r>-10?"hot":"",children:r.toFixed(1)})]})]})},cp=({scenes:e,loading:t,error:n,onClose:r,onSaveScene:l,onDeleteScene:o,onRecallScene:s,getCurrentState:i})=>{const[u,f]=k.useState(""),[y,m]=k.useState(""),[p,v]=k.useState(!1),[g,w]=k.useState(null),[M,d]=k.useState(null),[c,h]=k.useState(null),[x,N]=k.useState(null),C=n||x,E=k.useCallback(async()=>{const L=u.trim();if(!L)return;const j=i();if(!j){N("No plugin state available. Refresh plugins first.");return}v(!0),N(null);try{const D=y.trim()!==""?parseInt(y.trim(),10):null;await l(L,j,D),f(""),m("")}catch{N("Failed to save scene")}finally{v(!1)}},[u,y,i,l]),T=k.useCallback(async L=>{w(L),N(null);try{await s(L)?(d(L),setTimeout(()=>d(null),700)):N("Recall failed — check PiPedal connection")}catch{N("Recall failed")}finally{w(null)}},[s]),V=k.useCallback(async L=>{N(null),h(null);try{await o(L)}catch{N("Failed to delete scene")}},[o]),z=k.useCallback(L=>{L.key==="Enter"&&E()},[E]);return a.jsxs("div",{className:"scene-manager-overlay",children:[a.jsxs("div",{className:"scene-manager-header",children:[a.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[a.jsx("h2",{children:"Scenes"}),a.jsx("span",{className:"scene-manager-count",children:e.length})]}),a.jsx("button",{className:"scene-close-btn",onClick:r,title:"Close",children:"✕"})]}),a.jsxs("div",{className:"scene-list",children:[t&&e.length===0&&a.jsx("div",{className:"scene-list-loading",children:"Loading scenes..."}),!t&&e.length===0&&a.jsxs("div",{className:"scene-list-empty",children:[a.jsx("span",{children:"No saved scenes yet"}),a.jsx("span",{children:"Use the form below to save the current mixer state."})]}),e.map(L=>a.jsx("div",{className:`scene-card ${M===L.id?"scene-recalled-flash":""} ${g===L.id?"scene-recalling":""}`,children:a.jsxs("div",{className:"scene-card-content",children:[a.jsx("span",{className:"scene-card-name",onClick:()=>T(L.id),title:`Recall "${L.name}"`,children:L.name}),L.midiPc!==null&&L.midiPc!==void 0&&a.jsxs("span",{className:"scene-card-midi",children:["PC#",L.midiPc]}),a.jsxs("div",{className:"scene-card-actions",children:[a.jsx("button",{className:"scene-card-btn recall",onClick:()=>T(L.id),disabled:g===L.id,title:"Recall scene",children:"▶ Recall"}),a.jsx("button",{className:"scene-card-btn delete",onClick:()=>h(L.id),title:"Delete scene",children:"✕"})]})]})},L.id))]}),a.jsxs("div",{className:"scene-save-form",children:[a.jsxs("div",{className:"scene-save-row",children:[a.jsx("input",{className:"scene-name-input",type:"text",placeholder:"Scene name...",value:u,onChange:L=>f(L.target.value),onKeyDown:z,maxLength:60}),a.jsx("button",{className:"scene-save-btn",onClick:E,disabled:p||!u.trim(),children:p?"Saving...":"Save"})]}),a.jsx("div",{className:"scene-save-row",children:a.jsxs("div",{className:"scene-midi-input-group",children:[a.jsx("span",{className:"scene-midi-label",children:"MIDI PC:"}),a.jsx("input",{className:"scene-midi-input",type:"number",min:"0",max:"127",placeholder:"—",value:y,onChange:L=>m(L.target.value)})]})})]}),C&&a.jsx("div",{className:"scene-error",children:C}),c!==null&&a.jsx("div",{className:"scene-confirm-overlay",onClick:()=>h(null),children:a.jsxs("div",{className:"scene-confirm-dialog",onClick:L=>L.stopPropagation(),children:[a.jsx("p",{children:"Delete this scene permanently?"}),a.jsxs("div",{className:"scene-confirm-actions",children:[a.jsx("button",{className:"scene-confirm-cancel",onClick:()=>h(null),children:"Cancel"}),a.jsx("button",{className:"scene-confirm-delete",onClick:()=>V(c),children:"Delete"})]})]})})]})},fp={connected:"#4caf50",connecting:"#ff9800",disconnected:"#9e9e9e",error:"#f44336"},dp={connected:"Connected to PiPedal",connecting:"Connecting...",disconnected:"Disconnected",error:"Connection Error"},pp=({state:e,onRetry:t})=>a.jsxs("div",{className:"connection-status",children:[a.jsxs("div",{className:"status-indicator",children:[a.jsx("span",{className:"status-dot",style:{backgroundColor:fp[e.status]||"#9e9e9e"}}),a.jsx("span",{className:"status-label",children:dp[e.status]||e.status})]}),e.error&&a.jsxs("div",{className:"status-error",children:[a.jsx("span",{children:e.error}),t&&a.jsx("button",{className:"retry-btn",onClick:t,children:"Retry"})]})]}),mp=({plugins:e,connectionState:t,pedalboardName:n,lastUpdate:r,onRefresh:l})=>{const{ready:o,setControlValue:s}=Kd(),{scenes:i,loading:u,error:f,saveScene:y,deleteScene:m,recallScene:p}=Gd(),{portsState:v,refresh:g,connect:w,disconnect:M,disconnectAll:d,actionState:c,actionError:h}=Yd(),[x,N]=k.useState(!1),[C,E]=k.useState(!1),[T,V]=k.useState(!1),z="http://192.168.0.245:8080/",L=k.useMemo(()=>e.filter(O=>!O.uri.includes("band-bus")&&O.uri.includes("band-channel")),[e]),j=k.useMemo(()=>e.filter(O=>O.uri.includes("band-bus")),[e]),D=L.length>0,Z=j.length>0,ee=e.length>0,Qe=k.useMemo(()=>Z?Math.max(...j.map(O=>O.controlValues.masterLevelL??-60)):-60,[j,Z]),Ke=k.useMemo(()=>Z?Math.max(...j.map(O=>O.controlValues.masterLevelR??-60)):-60,[j,Z]),[P,R]=k.useState(0),[I,Q]=k.useState(!1),q=k.useCallback(()=>e.length===0?null:{channels:L.map(O=>({instanceId:O.instanceId,params:{...O.controlValues}})),buses:j.map(O=>({instanceId:O.instanceId,params:{...O.controlValues}}))},[e,L,j]),Vt=k.useCallback(()=>{N(O=>!O)},[]);return a.jsxs("div",{className:"mixer-page",children:[a.jsxs("header",{className:"mixer-header",children:[a.jsxs("div",{className:"mixer-header-left",children:[a.jsx("h1",{className:"mixer-title",children:"OPLabs Mixer"}),a.jsx(pp,{state:t,onRetry:l})]}),a.jsxs("div",{className:"mixer-header-center",children:[n&&a.jsxs("span",{className:"mixer-pedalboard-name",children:["Pedalboard: ",n]}),t.status==="connected"&&a.jsx("span",{className:`mixer-ws-indicator ${o?"ready":"pending"}`,children:o?"Controls Ready":"Connecting Controls..."})]}),a.jsxs("div",{className:"mixer-header-right",children:[a.jsx("span",{className:"mixer-update-time",children:r>0?`Updated ${new Date(r).toLocaleTimeString()}`:""}),a.jsxs("button",{className:`mixer-scenes-btn ${x?"active":""}`,onClick:Vt,title:"Scene Manager",children:["🎬 Scenes",i.length>0&&a.jsx("span",{className:"mixer-scenes-count",children:i.length})]}),a.jsx("button",{className:"mixer-scenes-btn",onClick:l,children:"↻ Refresh"}),a.jsx("button",{className:`mixer-pipedal-btn ${C?"active":""}`,onClick:()=>E(O=>!O),title:"Toggle PiPedal view",children:"🎛️ PiPedal"}),a.jsx("button",{className:`mixer-patch-btn ${T?"active":""}`,onClick:()=>V(O=>!O),title:"Toggle Patch Bay",children:"🔌 Patch"})]})]}),a.jsxs("div",{className:`mixer-content ${C?"mixer-content-split":""}`,children:[a.jsxs("div",{className:"mixer-content-main",children:[!ee&&a.jsxs("div",{className:"mixer-empty",children:[a.jsx("div",{className:"mixer-empty-icon",children:"🎛️"}),a.jsx("h2",{children:"No OPLabs Plugins Found"}),a.jsx("p",{children:"Load OPLabsBandChannel or OPLabsBandBus plugins on the PiPedal pedalboard, then click Refresh."}),t.status!=="connected"&&a.jsxs("p",{className:"mixer-empty-hint",children:["Status: ",a.jsx("strong",{children:t.status}),t.error&&` — ${t.error}`]}),a.jsx("button",{className:"mixer-refresh-btn large",onClick:l,children:"↻ Refresh Now"})]}),D&&a.jsxs("div",{className:"mixer-channels",children:[a.jsxs("div",{className:"mixer-section-header",children:[a.jsx("h2",{children:"Channels"}),a.jsx("span",{className:"mixer-count",children:L.length})]}),a.jsxs("div",{className:"mixer-channels-grid",children:[L.map(O=>a.jsx(lp,{plugin:O,onSetControl:s},O.instanceId)),a.jsx("div",{className:"mixer-add-channel",children:a.jsx("button",{className:"mixer-add-btn",title:"Add channel (future)",children:"+"})})]})]}),Z&&a.jsxs("div",{className:"mixer-buses",children:[a.jsxs("div",{className:"mixer-section-header",children:[a.jsx("h2",{children:"Bus"}),a.jsx("span",{className:"mixer-count",children:j.length})]}),a.jsx("div",{className:"mixer-buses-grid",children:j.map(O=>a.jsx(sp,{plugin:O,onSetControl:s},O.instanceId))})]}),ee&&a.jsxs("div",{className:"mixer-master-section",children:[a.jsx("div",{className:"mixer-section-header",children:a.jsx("h2",{children:"Master"})}),a.jsx("div",{className:"mixer-master-layout",children:a.jsx(ap,{volume:P,mute:I,levelL:Qe,levelR:Ke,onVolumeChange:O=>R(O),onMuteToggle:O=>Q(O)})})]})]})," ",C&&a.jsx("div",{className:"mixer-pipedal-pane",children:a.jsx("iframe",{src:z,title:"PiPedal",className:"mixer-pipedal-iframe",sandbox:"allow-scripts allow-same-origin allow-forms allow-popups"})})]})," ",T&&a.jsx("div",{className:"mixer-patch-pane",children:a.jsx(qd,{portsState:v,onConnect:w,onDisconnect:M,onDisconnectAll:d,onRefresh:g,actionState:c,actionError:h})}),x&&a.jsx(cp,{scenes:i,loading:u,error:f,onClose:()=>N(!1),onSaveScene:y,onDeleteScene:m,onRecallScene:p,getCurrentState:q})]})},hp=()=>{const{connectionState:e,plugins:t,pedalboardName:n,discover:r,lastUpdate:l}=Qd();return a.jsx("div",{className:"app",children:a.jsx(mp,{plugins:t,connectionState:e,pedalboardName:n,lastUpdate:l,onRefresh:r})})};bl.createRoot(document.getElementById("root")).render(a.jsx(du.StrictMode,{children:a.jsx(hp,{})})); diff --git a/frontend/dist/assets/index-BwT15WG7.css b/frontend/dist/assets/index-BwT15WG7.css deleted file mode 100644 index 20a4c2d..0000000 --- a/frontend/dist/assets/index-BwT15WG7.css +++ /dev/null @@ -1 +0,0 @@ -.patch-bay{background:var(--bg, #1a1a2e);border:1px solid var(--border, #2a2a4a);border-radius:var(--radius, 8px);overflow:hidden;display:flex;flex-direction:column}.patch-bay-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--surface, #16213e);border-bottom:1px solid var(--border, #2a2a4a);gap:12px;flex-wrap:wrap}.patch-bay-title{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--text, #eaeaea)}.patch-icon{font-size:1rem}.patch-conn-count{font-size:.65rem;background:var(--accent, #e94560);color:#fff;padding:1px 6px;border-radius:8px;font-weight:600;min-width:18px;text-align:center}.patch-bay-actions{display:flex;align-items:center;gap:8px}.patch-armed-info{font-size:.72rem;color:var(--accent, #e94560);background:#e945601a;padding:3px 8px;border-radius:4px;white-space:nowrap}.patch-armed-info code{font-weight:600}.patch-action-state{font-size:.7rem;padding:3px 8px;border-radius:4px}.patch-action-state.connecting,.patch-action-state.disconnecting{color:var(--warning, #ff9800);background:#ff98001f}.patch-action-state.error{color:var(--error, #f44336);background:#f443361f}.patch-action-btn{display:flex;align-items:center;gap:4px;background:transparent;color:var(--text-dim, #9e9e9e);border:1px solid var(--border, #2a2a4a);padding:4px 10px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.72rem;transition:all .15s}.patch-action-btn:hover:not(:disabled){border-color:var(--error, #f44336);color:var(--error, #f44336);background:#f4433614}.patch-action-btn:disabled{opacity:.4;cursor:default}.patch-refresh-btn{background:var(--surface-alt, #0f3460);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);padding:4px 10px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.85rem;transition:all .15s}.patch-refresh-btn:hover:not(:disabled){border-color:var(--accent, #e94560);background:#e945601a}.patch-refresh-btn:disabled{opacity:.4;cursor:default}.patch-bay-body{position:relative;display:flex;gap:0;padding:0;overflow-x:auto}.patch-column{display:flex;flex-direction:column;gap:2px;padding:8px 4px;z-index:2;min-width:240px;max-width:300px}.patch-column-left{padding-right:8px;border-right:1px solid var(--border, #2a2a4a)}.patch-column-right{padding-left:8px}.patch-group{margin-bottom:1px}.patch-group-header{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim, #9e9e9e);background:#ffffff05;border-radius:4px;height:28px}.patch-group-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim, #9e9e9e)}.patch-group-dot.physical{background:#4fc3f7}.patch-group-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.patch-port{display:flex;align-items:center;gap:6px;padding:5px 8px;height:32px;border-radius:4px;cursor:pointer;transition:all .12s;border-left:2px solid transparent;position:relative}.patch-port:hover{background:#ffffff0d}.patch-port.connected{border-left-color:var(--accent, #e94560);background:#e945600f}.patch-port.armed{border-left-color:#4fc3f7;background:#4fc3f71a;box-shadow:inset 0 0 0 1px #4fc3f74d}.patch-port.available{border-left-color:transparent}.patch-port.available:hover{border-left-color:var(--accent, #e94560);background:#e9456014}.patch-port-indicator{width:4px;height:4px;border-radius:50%;background:var(--accent, #e94560);flex-shrink:0}.patch-port-name{font-size:.78rem;color:var(--text, #eaeaea);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:SF Mono,Fira Code,Cascadia Code,monospace}.patch-port-name.physical{color:#4fc3f7}.patch-port-conn-count{font-size:.6rem;background:var(--accent, #e94560);color:#fff;padding:0 5px;border-radius:6px;font-weight:600;min-width:14px;text-align:center;flex-shrink:0}.patch-cables-svg{z-index:1;pointer-events:none}.patch-source-note{position:absolute;bottom:4px;right:8px;font-size:.6rem;color:var(--text-dim, #9e9e9e);opacity:.5;z-index:3}.patch-bay-error{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#f4433614;border-top:1px solid rgba(244,67,54,.2);font-size:.72rem;color:var(--error, #f44336)}.patch-bay-error.action{background:#f443361f}.patch-dismiss-btn{background:transparent;border:none;color:var(--error, #f44336);cursor:pointer;font-size:.85rem;padding:2px 6px;border-radius:4px}.patch-dismiss-btn:hover{background:#f4433626}.patch-bay-loading,.patch-bay-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;color:var(--text-dim, #9e9e9e);gap:12px}.patch-empty-icon{font-size:2.5rem;opacity:.5}.patch-bay-empty h3{font-size:1rem;color:var(--text, #eaeaea)}.patch-bay-empty p{font-size:.82rem;max-width:400px;line-height:1.5}.patch-empty-note{font-size:.72rem;opacity:.6}.patch-spinner{width:24px;height:24px;border:2px solid var(--border, #2a2a4a);border-top-color:var(--accent, #e94560);border-radius:50%;animation:patch-spin .8s linear infinite}@keyframes patch-spin{to{transform:rotate(360deg)}}.mixer-patch-btn{display:flex;align-items:center;gap:6px;background:var(--surface-alt, #0f3460);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);padding:6px 12px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.8rem;font-weight:500;transition:all .2s}.mixer-patch-btn:hover{border-color:var(--accent, #e94560);background:#e945601a}.mixer-patch-btn.active{border-color:var(--accent, #e94560);background:#e9456026;color:var(--accent, #e94560)}.mixer-patch-pane{width:100%;padding:12px;overflow-y:auto}.instrument-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;border:1px solid;font-size:.7rem;font-weight:600;letter-spacing:.3px;white-space:nowrap;transition:opacity .2s;-webkit-user-select:none;user-select:none}.instrument-badge:hover{opacity:.85}.instrument-badge[data-size=small]{font-size:.6rem;padding:1px 5px;gap:3px}.instrument-badge[data-size=large]{font-size:.85rem;padding:4px 12px;gap:6px}.instrument-icon{font-size:.8em;line-height:1}.instrument-name{line-height:1}.level-meter{display:flex;flex-direction:column;align-items:center;gap:2px;--meter-green: #4caf50;--meter-yellow: #ff9800;--meter-red: #f44336}.level-meter.mini{gap:1px}.level-meter-stereo-pair{display:flex;gap:2px;flex:1}.level-meter-channel{display:flex;flex-direction:column;align-items:center;gap:1px;width:14px}.level-meter-channel.mini{width:8px}.level-meter-side-label{font-size:.55rem;color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.level-meter-bar-track{position:relative;width:100%;flex:1;min-height:60px;background:#00000080;border-radius:2px;border:1px solid var(--border);overflow:hidden}.level-meter.mini .level-meter-bar-track{min-height:30px}.level-meter-bar-fill{position:absolute;bottom:0;left:0;right:0;transition:height .05s linear;border-radius:1px}.level-meter-peak{position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:1px;transition:bottom .15s ease-out;z-index:2}.level-meter-tick{position:absolute;left:0;right:0;height:1px;background:#ffffff26;z-index:1}.level-meter-tick.mark-yellow{background:#ff98004d}.level-meter-tick.mark-green{background:#4caf5033}.level-meter-label{font-size:.6rem;color:var(--text-dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}.level-meter-db-values{display:flex;gap:4px;font-size:.6rem;font-family:monospace;color:var(--text-dim)}.level-meter-db-values .hot{color:var(--meter-red);font-weight:700}.channel-strip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;background:var(--surface, #16213e);border:1px solid var(--border, #2a2a4a);border-top:3px solid #666;border-radius:var(--radius, 8px);min-width:80px;max-width:100px;transition:border-top-color .3s,box-shadow .2s}.channel-strip:hover{box-shadow:0 2px 12px #0000004d}.channel-header{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}.channel-label{font-size:.7rem;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--text, #eaeaea)}.channel-mute-solo{display:flex;gap:3px;width:100%;justify-content:center}.channel-btn{width:28px;height:22px;border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.65rem;font-weight:700;cursor:pointer;transition:all .15s;background:var(--bg, #1a1a2e);color:var(--text-dim, #9e9e9e);-webkit-user-select:none;user-select:none;line-height:1}.channel-btn.mute.active{background:var(--error, #f44336);color:#fff;border-color:var(--error, #f44336)}.channel-btn.solo.active{background:var(--warning, #ff9800);color:#000;border-color:var(--warning, #ff9800)}.channel-btn:hover{opacity:.85}.channel-meter-section{width:100%;display:flex;justify-content:center;flex:1;min-height:60px}.channel-pan{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}.channel-pan-label{font-size:.55rem;text-transform:uppercase;color:var(--text-dim, #9e9e9e);letter-spacing:.5px}.channel-pan-control{display:flex;align-items:center;gap:3px;width:100%}.channel-pan-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--border, #2a2a4a);border-radius:2px;outline:none;cursor:pointer}.channel-pan-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:var(--channel-accent, #666);border:1px solid rgba(255,255,255,.3);cursor:pointer}.channel-pan-slider::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--channel-accent, #666);border:1px solid rgba(255,255,255,.3);cursor:pointer}.channel-pan-value{font-size:.55rem;font-family:monospace;color:var(--text-dim, #9e9e9e);min-width:20px;text-align:center}.channel-fader-section{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}.channel-fader{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:100px;background:linear-gradient(to top,var(--bg, #1a1a2e) 0%,var(--surface-alt, #0f3460) 75%,#4caf50 85%,#ff9800 95%,#f44336 100%);border-radius:4px;outline:none;cursor:pointer;border:1px solid var(--border, #2a2a4a);writing-mode:vertical-lr;direction:rtl}.channel-fader::-webkit-slider-runnable-track{height:100px;border-radius:3px}.channel-fader::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:12px;background:var(--channel-accent, #666);border:1px solid rgba(255,255,255,.3);border-radius:2px;cursor:pointer;box-shadow:0 1px 3px #0006;margin-left:-3px}.channel-fader::-moz-range-track{height:100px;border-radius:3px}.channel-fader::-moz-range-thumb{width:18px;height:12px;background:var(--channel-accent, #666);border:1px solid rgba(255,255,255,.3);border-radius:2px;cursor:pointer;box-shadow:0 1px 3px #0006}.channel-fader-readout{font-size:.6rem;font-family:monospace;color:var(--text-dim, #9e9e9e);text-align:center}.channel-instrument-selector{width:100%}.channel-instrument-select{width:100%;padding:3px 4px;background:var(--bg, #1a1a2e);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.6rem;cursor:pointer;outline:none}.channel-instrument-select:focus{border-color:var(--channel-accent, #666)}.channel-instrument-select option{background:var(--bg, #1a1a2e);color:var(--text, #eaeaea)}.bus-strip{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--surface, #16213e);border:1px solid var(--border, #2a2a4a);border-radius:var(--radius, 8px)}.bus-master-section{display:flex;align-items:center;gap:12px;padding-bottom:8px}.bus-master-header{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:50px}.bus-master-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text, #eaeaea)}.bus-master-meter{flex:1;max-width:60px}.bus-master-fader{flex:1;max-width:120px}.bus-btn{width:24px;height:20px;border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.6rem;font-weight:700;cursor:pointer;transition:all .15s;background:var(--bg, #1a1a2e);color:var(--text-dim, #9e9e9e);-webkit-user-select:none;user-select:none;line-height:1;text-align:center}.bus-btn.mute.active{background:var(--error, #f44336);color:#fff;border-color:var(--error, #f44336)}.bus-btn.mini{width:18px;height:16px;font-size:.5rem}.bus-btn:hover{opacity:.85}.bus-divider{height:1px;background:var(--border, #2a2a4a);margin:0 -4px}.bus-channels{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}.bus-channel{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:36px;max-width:44px;padding:6px 4px;background:var(--bg, #1a1a2e);border-radius:4px;border:1px solid var(--border, #2a2a4a);flex-shrink:0}.bus-channel-label{font-size:.55rem;font-weight:700;color:var(--text-dim, #9e9e9e);text-align:center}.bus-channel-meter{width:100%;height:30px;display:flex;justify-content:center}.bus-channel-fader{width:100%}.bus-channel-db{font-size:.45rem;font-family:monospace;color:var(--text-dim, #9e9e9e);text-align:center}.bus-fader{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--border, #2a2a4a);border-radius:3px;outline:none;cursor:pointer;border:none}.bus-fader::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:14px;background:#e94560;border:1px solid rgba(255,255,255,.3);border-radius:2px;cursor:pointer}.bus-fader::-moz-range-thumb{width:12px;height:14px;background:#e94560;border:1px solid rgba(255,255,255,.3);border-radius:2px;cursor:pointer}.bus-fader.mini{height:4px}.bus-fader.mini::-webkit-slider-thumb{width:8px;height:10px}.bus-fader.mini::-moz-range-thumb{width:8px;height:10px}.bus-channel-route{width:100%;padding:1px 2px;background:var(--bg, #1a1a2e);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.5rem;font-weight:600;cursor:pointer;outline:none;text-align:center;text-align-last:center;-moz-text-align-last:center;min-height:16px;max-height:18px}.bus-channel-route:focus{border-color:var(--accent, #e94560)}.bus-channel-route option{background:var(--bg, #1a1a2e);color:var(--text, #eaeaea);font-size:.55rem}.master-bus{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;background:var(--surface, #16213e);border:1px solid var(--border, #2a2a4a);border-top:3px solid #a770e4;border-radius:var(--radius, 8px);min-width:90px;max-width:110px;position:relative;transition:border-top-color .3s,opacity .2s}.master-bus:hover{box-shadow:0 2px 16px #a770e426}.master-bus.muted{opacity:.6}.master-bus-header{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}.master-bus-label{font-size:.75rem;font-weight:700;text-align:center;color:var(--text, #eaeaea);text-transform:uppercase;letter-spacing:.5px}.master-bus-type{font-size:.55rem;text-transform:uppercase;letter-spacing:1px;color:#a770e4;font-weight:600}.master-bus-meters{width:100%;display:flex;justify-content:center;min-height:70px}.master-bus-controls{display:flex;gap:3px;width:100%;justify-content:center}.master-bus-btn{width:32px;height:24px;border:1px solid var(--border, #2a2a4a);border-radius:3px;font-size:.65rem;font-weight:700;cursor:pointer;transition:all .15s;background:var(--bg, #1a1a2e);color:var(--text-dim, #9e9e9e);-webkit-user-select:none;user-select:none;line-height:1}.master-bus-btn.mute.active{background:var(--error, #f44336);color:#fff;border-color:var(--error, #f44336)}.master-bus-btn:hover{opacity:.85}.master-bus-fader-section{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}.master-bus-fader{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:110px;background:linear-gradient(to top,var(--bg, #1a1a2e) 0%,#a770e4 75%,#c084fc 85%,#e94560 95%,#f44336 100%);border-radius:4px;outline:none;cursor:pointer;border:1px solid var(--border, #2a2a4a);writing-mode:vertical-lr;direction:rtl}.master-bus-fader::-webkit-slider-runnable-track{height:110px;border-radius:3px}.master-bus-fader::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:14px;background:#a770e4;border:1px solid rgba(255,255,255,.4);border-radius:2px;cursor:pointer;box-shadow:0 1px 4px #00000080;margin-left:-4px}.master-bus-fader::-moz-range-track{height:110px;border-radius:3px}.master-bus-fader::-moz-range-thumb{width:20px;height:14px;background:#a770e4;border:1px solid rgba(255,255,255,.4);border-radius:2px;cursor:pointer;box-shadow:0 1px 4px #00000080}.master-bus-fader-readout{font-size:.6rem;font-family:monospace;color:var(--text-dim, #9e9e9e);text-align:center;min-height:1em}.master-bus-db-values{display:flex;gap:4px;font-size:.6rem;font-family:monospace;color:var(--text-dim, #9e9e9e)}.master-bus-db-values .hot{color:var(--meter-red, #f44336);font-weight:700}.scene-manager-overlay{position:fixed;top:0;right:0;width:360px;height:100vh;background:var(--surface, #16213e);border-left:1px solid var(--border, #2a2a4a);z-index:200;display:flex;flex-direction:column;box-shadow:-4px 0 20px #0006;animation:scene-slide-in .2s ease-out}@keyframes scene-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.scene-manager-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border, #2a2a4a)}.scene-manager-header h2{font-size:1rem;font-weight:600;color:var(--text, #eaeaea);margin:0}.scene-manager-count{font-size:.7rem;background:var(--surface-alt, #0f3460);color:var(--text-dim, #9e9e9e);padding:1px 7px;border-radius:10px;margin-left:8px}.scene-close-btn{background:transparent;border:none;color:var(--text-dim, #9e9e9e);font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:4px;line-height:1}.scene-close-btn:hover{background:#ffffff14;color:var(--text, #eaeaea)}.scene-list{flex:1;overflow-y:auto;padding:8px}.scene-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--text-dim, #9e9e9e);font-size:.85rem;gap:8px}.scene-list-loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text-dim, #9e9e9e);font-size:.85rem}.scene-card{background:var(--bg, #1a1a2e);border-radius:var(--radius, 8px);margin-bottom:8px;border:1px solid var(--border, #2a2a4a);overflow:hidden;transition:border-color .2s}.scene-card:hover{border-color:var(--accent, #e94560)}.scene-card-content{display:flex;align-items:center;padding:10px 12px;gap:10px;cursor:pointer}.scene-card-content:hover{background:#e945600a}.scene-card-name{flex:1;font-size:.9rem;font-weight:500;color:var(--text, #eaeaea);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-card-midi{font-size:.65rem;color:var(--text-dim, #9e9e9e);background:var(--surface-alt, #0f3460);padding:2px 6px;border-radius:4px;font-weight:500}.scene-card-actions{display:flex;gap:4px}.scene-card-btn{background:transparent;border:none;color:var(--text-dim, #9e9e9e);padding:4px 8px;border-radius:4px;cursor:pointer;font-size:.75rem;transition:all .15s}.scene-card-btn:hover{background:#ffffff14;color:var(--text, #eaeaea)}.scene-card-btn.delete:hover{background:#f4433626;color:var(--error, #f44336)}.scene-card-btn.load:hover{background:#4caf5026;color:var(--success, #4caf50)}.scene-card-btn.recall{font-weight:600}.scene-card-btn.recall:hover{background:#e9456026;color:var(--accent, #e94560)}.scene-save-form{padding:12px 16px;border-top:1px solid var(--border, #2a2a4a);display:flex;flex-direction:column;gap:8px}.scene-save-row{display:flex;gap:8px;align-items:center}.scene-name-input{flex:1;background:var(--bg, #1a1a2e);border:1px solid var(--border, #2a2a4a);border-radius:6px;padding:8px 10px;color:var(--text, #eaeaea);font-size:.85rem;outline:none;transition:border-color .2s}.scene-name-input:focus{border-color:var(--accent, #e94560)}.scene-name-input::placeholder{color:var(--text-dim, #9e9e9e)}.scene-save-btn{background:var(--accent, #e94560);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500;white-space:nowrap;transition:opacity .15s}.scene-save-btn:hover{opacity:.85}.scene-save-btn:disabled{opacity:.4;cursor:not-allowed}.scene-midi-input-group{display:flex;align-items:center;gap:6px}.scene-midi-label{font-size:.7rem;color:var(--text-dim, #9e9e9e);white-space:nowrap}.scene-midi-input{width:48px;background:var(--bg, #1a1a2e);border:1px solid var(--border, #2a2a4a);border-radius:4px;padding:4px 6px;color:var(--text, #eaeaea);font-size:.8rem;text-align:center;outline:none}.scene-midi-input:focus{border-color:var(--accent, #e94560)}.scene-error{padding:8px 16px;background:#f443361a;color:var(--error, #f44336);font-size:.75rem;border-top:1px solid rgba(244,67,54,.2)}.scene-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:300;display:flex;align-items:center;justify-content:center}.scene-confirm-dialog{background:var(--surface, #16213e);border:1px solid var(--border, #2a2a4a);border-radius:var(--radius, 8px);padding:20px 24px;max-width:320px;box-shadow:0 8px 32px #0006}.scene-confirm-dialog p{font-size:.9rem;color:var(--text, #eaeaea);margin-bottom:16px;line-height:1.4}.scene-confirm-actions{display:flex;gap:8px;justify-content:flex-end}.scene-confirm-cancel{background:transparent;border:1px solid var(--border, #2a2a4a);color:var(--text-dim, #9e9e9e);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:.8rem}.scene-confirm-cancel:hover{background:#ffffff0d}.scene-confirm-delete{background:var(--error, #f44336);border:none;color:#fff;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500}.scene-confirm-delete:hover{opacity:.85}.scene-recalling{opacity:.6;pointer-events:none}.scene-recalled-flash{animation:scene-flash .6s ease-out}@keyframes scene-flash{0%{border-color:var(--success, #4caf50);box-shadow:0 0 8px #4caf504d}to{border-color:var(--border, #2a2a4a);box-shadow:none}}.mixer-page{display:flex;flex-direction:column;min-height:100vh;background:var(--bg, #1a1a2e);max-width:100%!important}.mixer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--surface, #16213e);border-bottom:1px solid var(--border, #2a2a4a);gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:100}.mixer-header-left{display:flex;align-items:center;gap:16px}.mixer-title{font-size:1.1rem;font-weight:700;color:var(--text, #eaeaea);letter-spacing:.3px}.mixer-header-center{display:flex;align-items:center;gap:12px}.mixer-pedalboard-name{font-size:.8rem;color:var(--accent, #e94560);background:#e945601a;padding:3px 10px;border-radius:var(--radius, 8px)}.mixer-ws-indicator{font-size:.7rem;padding:3px 8px;border-radius:4px;font-weight:500}.mixer-ws-indicator.ready{color:var(--success, #4caf50);background:#4caf501f}.mixer-ws-indicator.pending{color:var(--warning, #ff9800);background:#ff98001f}.mixer-header-right{display:flex;align-items:center;gap:12px}.mixer-update-time{font-size:.7rem;color:var(--text-dim, #9e9e9e)}.mixer-refresh-btn{background:var(--accent, #e94560);color:#fff;border:none;padding:6px 14px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.8rem;font-weight:500;transition:opacity .2s}.mixer-refresh-btn:hover{opacity:.85}.mixer-refresh-btn.large{padding:10px 24px;font-size:.95rem;margin-top:16px}.mixer-scenes-btn{display:flex;align-items:center;gap:6px;background:var(--surface-alt, #0f3460);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);padding:6px 12px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.8rem;font-weight:500;transition:all .2s}.mixer-scenes-btn:hover{border-color:var(--accent, #e94560);background:#e945601a}.mixer-scenes-btn.active{border-color:var(--accent, #e94560);background:#e9456026;color:var(--accent, #e94560)}.mixer-scenes-count{font-size:.65rem;background:var(--accent, #e94560);color:#fff;padding:1px 6px;border-radius:8px;font-weight:600}.mixer-content{flex:1;padding:20px;display:flex;flex-direction:column;gap:24px}.mixer-section-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.mixer-section-header h2{font-size:.95rem;font-weight:600;color:var(--text, #eaeaea)}.mixer-count{font-size:.7rem;background:var(--surface-alt, #0f3460);color:var(--text-dim, #9e9e9e);padding:1px 7px;border-radius:10px}.mixer-channels-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}.mixer-add-channel{display:flex;align-items:center}.mixer-add-btn{width:40px;height:40px;border-radius:50%;border:2px dashed var(--border, #2a2a4a);background:transparent;color:var(--text-dim, #9e9e9e);font-size:1.3rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.mixer-add-btn:hover{border-color:var(--accent, #e94560);color:var(--accent, #e94560);background:#e9456014}.mixer-buses-grid{display:flex;flex-direction:column;gap:10px}.mixer-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;text-align:center;color:var(--text-dim, #9e9e9e);flex:1}.mixer-empty-icon{font-size:3rem;margin-bottom:16px;opacity:.6}.mixer-empty h2{font-size:1.2rem;color:var(--text, #eaeaea);margin-bottom:8px}.mixer-empty p{font-size:.9rem;max-width:400px;line-height:1.5;margin-bottom:4px}.mixer-empty-hint{font-size:.8rem!important;opacity:.7;margin-top:8px!important}.mixer-content-split{display:flex;flex-direction:row;gap:0;padding:0;height:calc(100vh - 60px);overflow:hidden}.mixer-content-split .mixer-content-main{flex:1;overflow-y:auto;padding:20px;border-right:1px solid var(--border, #2a2a4a)}.mixer-pipedal-pane{flex:1;display:flex;flex-direction:column;background:var(--bg, #1a1a2e);min-width:400px}.mixer-pipedal-iframe{width:100%;height:100%;border:none;background:#fff}.mixer-pipedal-btn{display:flex;align-items:center;gap:6px;background:var(--surface-alt, #0f3460);color:var(--text, #eaeaea);border:1px solid var(--border, #2a2a4a);padding:6px 12px;border-radius:var(--radius, 8px);cursor:pointer;font-size:.8rem;font-weight:500;transition:all .2s}.mixer-pipedal-btn:hover{border-color:var(--accent, #e94560);background:#e945601a}.mixer-pipedal-btn.active{border-color:var(--accent, #e94560);background:#e9456026;color:var(--accent, #e94560)}.mixer-master-section{margin-top:12px;padding-top:12px;border-top:1px solid var(--border, #2a2a4a)}.mixer-master-layout{display:flex;gap:10px;justify-content:flex-start}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1a2e;--surface: #16213e;--surface-alt: #0f3460;--accent: #e94560;--text: #eaeaea;--text-dim: #9e9e9e;--border: #2a2a4a;--success: #4caf50;--warning: #ff9800;--error: #f44336;--radius: 8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.connection-status{display:flex;flex-direction:column;gap:4px}.status-indicator{display:flex;align-items:center;gap:8px}.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.status-label{font-size:.85rem;color:var(--text-dim)}.status-error{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--error)}.retry-btn{background:transparent;border:1px solid var(--error);color:var(--error);padding:2px 8px;border-radius:4px;cursor:pointer;font-size:.75rem}.retry-btn:hover{background:var(--error);color:#fff}.app-footer{display:flex;justify-content:space-between;padding:12px 24px;background:var(--surface);border-top:1px solid var(--border);font-size:.75rem;color:var(--text-dim)} diff --git a/frontend/dist/assets/index-CpkXACSZ.js b/frontend/dist/assets/index-CpkXACSZ.js new file mode 100644 index 0000000..3917272 --- /dev/null +++ b/frontend/dist/assets/index-CpkXACSZ.js @@ -0,0 +1,42 @@ +(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))r(l);new MutationObserver(l=>{for(const s of l)if(s.type==="childList")for(const o of s.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&r(o)}).observe(document,{childList:!0,subtree:!0});function n(l){const s={};return l.integrity&&(s.integrity=l.integrity),l.referrerPolicy&&(s.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?s.credentials="include":l.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function r(l){if(l.ep)return;l.ep=!0;const s=n(l);fetch(l.href,s)}})();function Oc(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var gu={exports:{}},gl={},xu={exports:{}},F={};/** + * @license React + * react.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */var fr=Symbol.for("react.element"),Fc=Symbol.for("react.portal"),Dc=Symbol.for("react.fragment"),Ac=Symbol.for("react.strict_mode"),Uc=Symbol.for("react.profiler"),Bc=Symbol.for("react.provider"),Vc=Symbol.for("react.context"),Hc=Symbol.for("react.forward_ref"),Wc=Symbol.for("react.suspense"),Qc=Symbol.for("react.memo"),Kc=Symbol.for("react.lazy"),ei=Symbol.iterator;function Gc(e){return e===null||typeof e!="object"?null:(e=ei&&e[ei]||e["@@iterator"],typeof e=="function"?e:null)}var wu={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},ku=Object.assign,Su={};function kn(e,t,n){this.props=e,this.context=t,this.refs=Su,this.updater=n||wu}kn.prototype.isReactComponent={};kn.prototype.setState=function(e,t){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")};kn.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function Cu(){}Cu.prototype=kn.prototype;function ro(e,t,n){this.props=e,this.context=t,this.refs=Su,this.updater=n||wu}var lo=ro.prototype=new Cu;lo.constructor=ro;ku(lo,kn.prototype);lo.isPureReactComponent=!0;var ti=Array.isArray,Nu=Object.prototype.hasOwnProperty,so={current:null},Eu={key:!0,ref:!0,__self:!0,__source:!0};function ju(e,t,n){var r,l={},s=null,o=null;if(t!=null)for(r in t.ref!==void 0&&(o=t.ref),t.key!==void 0&&(s=""+t.key),t)Nu.call(t,r)&&!Eu.hasOwnProperty(r)&&(l[r]=t[r]);var i=arguments.length-2;if(i===1)l.children=n;else if(1>>1,q=E[z];if(0>>1;zl(Nn,$))Yel(Kt,Nn)?(E[z]=Kt,E[Ye]=$,z=Ye):(E[z]=Nn,E[Ge]=$,z=Ge);else if(Yel(Kt,$))E[z]=Kt,E[Ye]=$,z=Ye;else break e}}return O}function l(E,O){var $=E.sortIndex-O.sortIndex;return $!==0?$:E.id-O.id}if(typeof performance=="object"&&typeof performance.now=="function"){var s=performance;e.unstable_now=function(){return s.now()}}else{var o=Date,i=o.now();e.unstable_now=function(){return o.now()-i}}var u=[],f=[],y=1,m=null,p=3,v=!1,x=!1,k=!1,L=typeof setTimeout=="function"?setTimeout:null,h=typeof clearTimeout=="function"?clearTimeout:null,c=typeof setImmediate<"u"?setImmediate:null;typeof navigator<"u"&&navigator.scheduling!==void 0&&navigator.scheduling.isInputPending!==void 0&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function d(E){for(var O=n(f);O!==null;){if(O.callback===null)r(f);else if(O.startTime<=E)r(f),O.sortIndex=O.expirationTime,t(u,O);else break;O=n(f)}}function g(E){if(k=!1,d(E),!x)if(n(u)!==null)x=!0,le(S);else{var O=n(f);O!==null&&Y(g,O.startTime-E)}}function S(E,O){x=!1,k&&(k=!1,h(T),T=-1),v=!0;var $=p;try{for(d(O),m=n(u);m!==null&&(!(m.expirationTime>O)||E&&!_());){var z=m.callback;if(typeof z=="function"){m.callback=null,p=m.priorityLevel;var q=z(m.expirationTime<=O);O=e.unstable_now(),typeof q=="function"?m.callback=q:m===n(u)&&r(u),d(O)}else r(u);m=n(u)}if(m!==null)var Qt=!0;else{var Ge=n(f);Ge!==null&&Y(g,Ge.startTime-O),Qt=!1}return Qt}finally{m=null,p=$,v=!1}}var N=!1,j=null,T=-1,U=5,I=-1;function _(){return!(e.unstable_now()-IE||125z?(E.sortIndex=$,t(f,E),n(u)===null&&E===n(f)&&(k?(h(T),T=-1):k=!0,Y(g,$-z))):(E.sortIndex=q,t(u,E),x||v||(x=!0,le(S))),E},e.unstable_shouldYield=_,e.unstable_wrapCallback=function(E){var O=p;return function(){var $=p;p=O;try{return E.apply(this,arguments)}finally{p=$}}}})(Ru);Lu.exports=Ru;var lf=Lu.exports;/** + * @license React + * react-dom.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */var sf=w,je=lf;function C(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n"u"||typeof window.document>"u"||typeof window.document.createElement>"u"),as=Object.prototype.hasOwnProperty,of=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,ri={},li={};function uf(e){return as.call(li,e)?!0:as.call(ri,e)?!1:of.test(e)?li[e]=!0:(ri[e]=!0,!1)}function af(e,t,n,r){if(n!==null&&n.type===0)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return r?!1:n!==null?!n.acceptsBooleans:(e=e.toLowerCase().slice(0,5),e!=="data-"&&e!=="aria-");default:return!1}}function cf(e,t,n,r){if(t===null||typeof t>"u"||af(e,t,n,r))return!0;if(r)return!1;if(n!==null)switch(n.type){case 3:return!t;case 4:return t===!1;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}function ye(e,t,n,r,l,s,o){this.acceptsBooleans=t===2||t===3||t===4,this.attributeName=r,this.attributeNamespace=l,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=s,this.removeEmptyString=o}var ae={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(e){ae[e]=new ye(e,0,!1,e,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(e){var t=e[0];ae[t]=new ye(t,1,!1,e[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(e){ae[e]=new ye(e,2,!1,e.toLowerCase(),null,!1,!1)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(e){ae[e]=new ye(e,2,!1,e,null,!1,!1)});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(e){ae[e]=new ye(e,3,!1,e.toLowerCase(),null,!1,!1)});["checked","multiple","muted","selected"].forEach(function(e){ae[e]=new ye(e,3,!0,e,null,!1,!1)});["capture","download"].forEach(function(e){ae[e]=new ye(e,4,!1,e,null,!1,!1)});["cols","rows","size","span"].forEach(function(e){ae[e]=new ye(e,6,!1,e,null,!1,!1)});["rowSpan","start"].forEach(function(e){ae[e]=new ye(e,5,!1,e.toLowerCase(),null,!1,!1)});var io=/[\-:]([a-z])/g;function uo(e){return e[1].toUpperCase()}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(e){var t=e.replace(io,uo);ae[t]=new ye(t,1,!1,e,null,!1,!1)});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(e){var t=e.replace(io,uo);ae[t]=new ye(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)});["xml:base","xml:lang","xml:space"].forEach(function(e){var t=e.replace(io,uo);ae[t]=new ye(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)});["tabIndex","crossOrigin"].forEach(function(e){ae[e]=new ye(e,1,!1,e.toLowerCase(),null,!1,!1)});ae.xlinkHref=new ye("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(e){ae[e]=new ye(e,1,!1,e.toLowerCase(),null,!0,!0)});function ao(e,t,n,r){var l=ae.hasOwnProperty(t)?ae[t]:null;(l!==null?l.type!==0:r||!(2i||l[o]!==s[i]){var u=` +`+l[o].replace(" at new "," at ");return e.displayName&&u.includes("")&&(u=u.replace("",e.displayName)),u}while(1<=o&&0<=i);break}}}finally{Ol=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?zn(e):""}function ff(e){switch(e.tag){case 5:return zn(e.type);case 16:return zn("Lazy");case 13:return zn("Suspense");case 19:return zn("SuspenseList");case 0:case 2:case 15:return e=Fl(e.type,!1),e;case 11:return e=Fl(e.type.render,!1),e;case 1:return e=Fl(e.type,!0),e;default:return""}}function ps(e){if(e==null)return null;if(typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case Jt:return"Fragment";case Xt:return"Portal";case cs:return"Profiler";case co:return"StrictMode";case fs:return"Suspense";case ds:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case Iu:return(e.displayName||"Context")+".Consumer";case $u:return(e._context.displayName||"Context")+".Provider";case fo:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case po:return t=e.displayName||null,t!==null?t:ps(e.type)||"Memo";case ut:t=e._payload,e=e._init;try{return ps(e(t))}catch{}}return null}function df(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=t.render,e=e.displayName||e.name||"",t.displayName||(e!==""?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return ps(t);case 8:return t===co?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if(typeof t=="function")return t.displayName||t.name||null;if(typeof t=="string")return t}return null}function St(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":return e;case"object":return e;default:return""}}function Fu(e){var t=e.type;return(e=e.nodeName)&&e.toLowerCase()==="input"&&(t==="checkbox"||t==="radio")}function pf(e){var t=Fu(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&typeof n<"u"&&typeof n.get=="function"&&typeof n.set=="function"){var l=n.get,s=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return l.call(this)},set:function(o){r=""+o,s.call(this,o)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(o){r=""+o},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}function xr(e){e._valueTracker||(e._valueTracker=pf(e))}function Du(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=Fu(e)?e.checked?"true":"false":e.value),e=r,e!==n?(t.setValue(e),!0):!1}function Kr(e){if(e=e||(typeof document<"u"?document:void 0),typeof e>"u")return null;try{return e.activeElement||e.body}catch{return e.body}}function ms(e,t){var n=t.checked;return Z({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:n??e._wrapperState.initialChecked})}function oi(e,t){var n=t.defaultValue==null?"":t.defaultValue,r=t.checked!=null?t.checked:t.defaultChecked;n=St(t.value!=null?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:t.type==="checkbox"||t.type==="radio"?t.checked!=null:t.value!=null}}function Au(e,t){t=t.checked,t!=null&&ao(e,"checked",t,!1)}function hs(e,t){Au(e,t);var n=St(t.value),r=t.type;if(n!=null)r==="number"?(n===0&&e.value===""||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if(r==="submit"||r==="reset"){e.removeAttribute("value");return}t.hasOwnProperty("value")?vs(e,t.type,n):t.hasOwnProperty("defaultValue")&&vs(e,t.type,St(t.defaultValue)),t.checked==null&&t.defaultChecked!=null&&(e.defaultChecked=!!t.defaultChecked)}function ii(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!(r!=="submit"&&r!=="reset"||t.value!==void 0&&t.value!==null))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}n=e.name,n!==""&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,n!==""&&(e.name=n)}function vs(e,t,n){(t!=="number"||Kr(e.ownerDocument)!==e)&&(n==null?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var $n=Array.isArray;function un(e,t,n,r){if(e=e.options,t){t={};for(var l=0;l"+t.valueOf().toString()+"",t=wr.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}});function Yn(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&n.nodeType===3){n.nodeValue=t;return}}e.textContent=t}var Dn={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},mf=["Webkit","ms","Moz","O"];Object.keys(Dn).forEach(function(e){mf.forEach(function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),Dn[t]=Dn[e]})});function Hu(e,t,n){return t==null||typeof t=="boolean"||t===""?"":n||typeof t!="number"||t===0||Dn.hasOwnProperty(e)&&Dn[e]?(""+t).trim():t+"px"}function Wu(e,t){e=e.style;for(var n in t)if(t.hasOwnProperty(n)){var r=n.indexOf("--")===0,l=Hu(n,t[n],r);n==="float"&&(n="cssFloat"),r?e.setProperty(n,l):e[n]=l}}var hf=Z({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function xs(e,t){if(t){if(hf[e]&&(t.children!=null||t.dangerouslySetInnerHTML!=null))throw Error(C(137,e));if(t.dangerouslySetInnerHTML!=null){if(t.children!=null)throw Error(C(60));if(typeof t.dangerouslySetInnerHTML!="object"||!("__html"in t.dangerouslySetInnerHTML))throw Error(C(61))}if(t.style!=null&&typeof t.style!="object")throw Error(C(62))}}function ws(e,t){if(e.indexOf("-")===-1)return typeof t.is=="string";switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var ks=null;function mo(e){return e=e.target||e.srcElement||window,e.correspondingUseElement&&(e=e.correspondingUseElement),e.nodeType===3?e.parentNode:e}var Ss=null,an=null,cn=null;function ci(e){if(e=mr(e)){if(typeof Ss!="function")throw Error(C(280));var t=e.stateNode;t&&(t=Cl(t),Ss(e.stateNode,e.type,t))}}function Qu(e){an?cn?cn.push(e):cn=[e]:an=e}function Ku(){if(an){var e=an,t=cn;if(cn=an=null,ci(e),t)for(e=0;e>>=0,e===0?32:31-(jf(e)/Pf|0)|0}var kr=64,Sr=4194304;function In(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return e&4194240;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return e&130023424;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function Jr(e,t){var n=e.pendingLanes;if(n===0)return 0;var r=0,l=e.suspendedLanes,s=e.pingedLanes,o=n&268435455;if(o!==0){var i=o&~l;i!==0?r=In(i):(s&=o,s!==0&&(r=In(s)))}else o=n&~l,o!==0?r=In(o):s!==0&&(r=In(s));if(r===0)return 0;if(t!==0&&t!==r&&!(t&l)&&(l=r&-r,s=t&-t,l>=s||l===16&&(s&4194240)!==0))return t;if(r&4&&(r|=n&16),t=e.entangledLanes,t!==0)for(e=e.entanglements,t&=r;0n;n++)t.push(e);return t}function dr(e,t,n){e.pendingLanes|=t,t!==536870912&&(e.suspendedLanes=0,e.pingedLanes=0),e=e.eventTimes,t=31-Ae(t),e[t]=n}function Lf(e,t){var n=e.pendingLanes&~t;e.pendingLanes=t,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=t,e.mutableReadLanes&=t,e.entangledLanes&=t,t=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0=Un),xi=" ",wi=!1;function da(e,t){switch(e){case"keyup":return sd.indexOf(t.keyCode)!==-1;case"keydown":return t.keyCode!==229;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function pa(e){return e=e.detail,typeof e=="object"&&"data"in e?e.data:null}var Zt=!1;function id(e,t){switch(e){case"compositionend":return pa(t);case"keypress":return t.which!==32?null:(wi=!0,xi);case"textInput":return e=t.data,e===xi&&wi?null:e;default:return null}}function ud(e,t){if(Zt)return e==="compositionend"||!So&&da(e,t)?(e=ca(),Fr=xo=dt=null,Zt=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1=t)return{node:n,offset:t-e};e=r}e:{for(;n;){if(n.nextSibling){n=n.nextSibling;break e}n=n.parentNode}n=void 0}n=Ni(n)}}function ya(e,t){return e&&t?e===t?!0:e&&e.nodeType===3?!1:t&&t.nodeType===3?ya(e,t.parentNode):"contains"in e?e.contains(t):e.compareDocumentPosition?!!(e.compareDocumentPosition(t)&16):!1:!1}function ga(){for(var e=window,t=Kr();t instanceof e.HTMLIFrameElement;){try{var n=typeof t.contentWindow.location.href=="string"}catch{n=!1}if(n)e=t.contentWindow;else break;t=Kr(e.document)}return t}function Co(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&(t==="input"&&(e.type==="text"||e.type==="search"||e.type==="tel"||e.type==="url"||e.type==="password")||t==="textarea"||e.contentEditable==="true")}function yd(e){var t=ga(),n=e.focusedElem,r=e.selectionRange;if(t!==n&&n&&n.ownerDocument&&ya(n.ownerDocument.documentElement,n)){if(r!==null&&Co(n)){if(t=r.start,e=r.end,e===void 0&&(e=t),"selectionStart"in n)n.selectionStart=t,n.selectionEnd=Math.min(e,n.value.length);else if(e=(t=n.ownerDocument||document)&&t.defaultView||window,e.getSelection){e=e.getSelection();var l=n.textContent.length,s=Math.min(r.start,l);r=r.end===void 0?s:Math.min(r.end,l),!e.extend&&s>r&&(l=r,r=s,s=l),l=Ei(n,s);var o=Ei(n,r);l&&o&&(e.rangeCount!==1||e.anchorNode!==l.node||e.anchorOffset!==l.offset||e.focusNode!==o.node||e.focusOffset!==o.offset)&&(t=t.createRange(),t.setStart(l.node,l.offset),e.removeAllRanges(),s>r?(e.addRange(t),e.extend(o.node,o.offset)):(t.setEnd(o.node,o.offset),e.addRange(t)))}}for(t=[],e=n;e=e.parentNode;)e.nodeType===1&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for(typeof n.focus=="function"&&n.focus(),n=0;n=document.documentMode,qt=null,_s=null,Vn=null,Ts=!1;function ji(e,t,n){var r=n.window===n?n.document:n.nodeType===9?n:n.ownerDocument;Ts||qt==null||qt!==Kr(r)||(r=qt,"selectionStart"in r&&Co(r)?r={start:r.selectionStart,end:r.selectionEnd}:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection(),r={anchorNode:r.anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset}),Vn&&er(Vn,r)||(Vn=r,r=br(_s,"onSelect"),0tn||(e.current=Is[tn],Is[tn]=null,tn--)}function W(e,t){tn++,Is[tn]=e.current,e.current=t}var Ct={},pe=Et(Ct),we=Et(!1),Dt=Ct;function hn(e,t){var n=e.type.contextTypes;if(!n)return Ct;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var l={},s;for(s in n)l[s]=t[s];return r&&(e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=l),l}function ke(e){return e=e.childContextTypes,e!=null}function tl(){K(we),K(pe)}function zi(e,t,n){if(pe.current!==Ct)throw Error(C(168));W(pe,t),W(we,n)}function Pa(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,typeof r.getChildContext!="function")return n;r=r.getChildContext();for(var l in r)if(!(l in t))throw Error(C(108,df(e)||"Unknown",l));return Z({},n,r)}function nl(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||Ct,Dt=pe.current,W(pe,e),W(we,we.current),!0}function $i(e,t,n){var r=e.stateNode;if(!r)throw Error(C(169));n?(e=Pa(e,t,Dt),r.__reactInternalMemoizedMergedChildContext=e,K(we),K(pe),W(pe,e)):K(we),W(we,n)}var qe=null,Nl=!1,Zl=!1;function _a(e){qe===null?qe=[e]:qe.push(e)}function Td(e){Nl=!0,_a(e)}function jt(){if(!Zl&&qe!==null){Zl=!0;var e=0,t=B;try{var n=qe;for(B=1;e>=o,l-=o,be=1<<32-Ae(t)+l|n<T?(U=j,j=null):U=j.sibling;var I=p(h,j,d[T],g);if(I===null){j===null&&(j=U);break}e&&j&&I.alternate===null&&t(h,j),c=s(I,c,T),N===null?S=I:N.sibling=I,N=I,j=U}if(T===d.length)return n(h,j),G&&Tt(h,T),S;if(j===null){for(;TT?(U=j,j=null):U=j.sibling;var _=p(h,j,I.value,g);if(_===null){j===null&&(j=U);break}e&&j&&_.alternate===null&&t(h,j),c=s(_,c,T),N===null?S=_:N.sibling=_,N=_,j=U}if(I.done)return n(h,j),G&&Tt(h,T),S;if(j===null){for(;!I.done;T++,I=d.next())I=m(h,I.value,g),I!==null&&(c=s(I,c,T),N===null?S=I:N.sibling=I,N=I);return G&&Tt(h,T),S}for(j=r(h,j);!I.done;T++,I=d.next())I=v(j,h,T,I.value,g),I!==null&&(e&&I.alternate!==null&&j.delete(I.key===null?T:I.key),c=s(I,c,T),N===null?S=I:N.sibling=I,N=I);return e&&j.forEach(function(P){return t(h,P)}),G&&Tt(h,T),S}function L(h,c,d,g){if(typeof d=="object"&&d!==null&&d.type===Jt&&d.key===null&&(d=d.props.children),typeof d=="object"&&d!==null){switch(d.$$typeof){case gr:e:{for(var S=d.key,N=c;N!==null;){if(N.key===S){if(S=d.type,S===Jt){if(N.tag===7){n(h,N.sibling),c=l(N,d.props.children),c.return=h,h=c;break e}}else if(N.elementType===S||typeof S=="object"&&S!==null&&S.$$typeof===ut&&Fi(S)===N.type){n(h,N.sibling),c=l(N,d.props),c.ref=Mn(h,N,d),c.return=h,h=c;break e}n(h,N);break}else t(h,N);N=N.sibling}d.type===Jt?(c=Ot(d.props.children,h.mode,g,d.key),c.return=h,h=c):(g=Qr(d.type,d.key,d.props,null,h.mode,g),g.ref=Mn(h,c,d),g.return=h,h=g)}return o(h);case Xt:e:{for(N=d.key;c!==null;){if(c.key===N)if(c.tag===4&&c.stateNode.containerInfo===d.containerInfo&&c.stateNode.implementation===d.implementation){n(h,c.sibling),c=l(c,d.children||[]),c.return=h,h=c;break e}else{n(h,c);break}else t(h,c);c=c.sibling}c=ss(d,h.mode,g),c.return=h,h=c}return o(h);case ut:return N=d._init,L(h,c,N(d._payload),g)}if($n(d))return x(h,c,d,g);if(En(d))return k(h,c,d,g);Tr(h,d)}return typeof d=="string"&&d!==""||typeof d=="number"?(d=""+d,c!==null&&c.tag===6?(n(h,c.sibling),c=l(c,d),c.return=h,h=c):(n(h,c),c=ls(d,h.mode,g),c.return=h,h=c),o(h)):n(h,c)}return L}var yn=Ra(!0),za=Ra(!1),sl=Et(null),ol=null,ln=null,Po=null;function _o(){Po=ln=ol=null}function To(e){var t=sl.current;K(sl),e._currentValue=t}function Ds(e,t,n){for(;e!==null;){var r=e.alternate;if((e.childLanes&t)!==t?(e.childLanes|=t,r!==null&&(r.childLanes|=t)):r!==null&&(r.childLanes&t)!==t&&(r.childLanes|=t),e===n)break;e=e.return}}function dn(e,t){ol=e,Po=ln=null,e=e.dependencies,e!==null&&e.firstContext!==null&&(e.lanes&t&&(xe=!0),e.firstContext=null)}function ze(e){var t=e._currentValue;if(Po!==e)if(e={context:e,memoizedValue:t,next:null},ln===null){if(ol===null)throw Error(C(308));ln=e,ol.dependencies={lanes:0,firstContext:e}}else ln=ln.next=e;return t}var Rt=null;function Mo(e){Rt===null?Rt=[e]:Rt.push(e)}function $a(e,t,n,r){var l=t.interleaved;return l===null?(n.next=n,Mo(t)):(n.next=l.next,l.next=n),t.interleaved=n,lt(e,r)}function lt(e,t){e.lanes|=t;var n=e.alternate;for(n!==null&&(n.lanes|=t),n=e,e=e.return;e!==null;)e.childLanes|=t,n=e.alternate,n!==null&&(n.childLanes|=t),n=e,e=e.return;return n.tag===3?n.stateNode:null}var at=!1;function Lo(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}}function Ia(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function tt(e,t){return{eventTime:e,lane:t,tag:0,payload:null,callback:null,next:null}}function gt(e,t,n){var r=e.updateQueue;if(r===null)return null;if(r=r.shared,A&2){var l=r.pending;return l===null?t.next=t:(t.next=l.next,l.next=t),r.pending=t,lt(e,n)}return l=r.interleaved,l===null?(t.next=t,Mo(r)):(t.next=l.next,l.next=t),r.interleaved=t,lt(e,n)}function Ar(e,t,n){if(t=t.updateQueue,t!==null&&(t=t.shared,(n&4194240)!==0)){var r=t.lanes;r&=e.pendingLanes,n|=r,t.lanes=n,vo(e,n)}}function Di(e,t){var n=e.updateQueue,r=e.alternate;if(r!==null&&(r=r.updateQueue,n===r)){var l=null,s=null;if(n=n.firstBaseUpdate,n!==null){do{var o={eventTime:n.eventTime,lane:n.lane,tag:n.tag,payload:n.payload,callback:n.callback,next:null};s===null?l=s=o:s=s.next=o,n=n.next}while(n!==null);s===null?l=s=t:s=s.next=t}else l=s=t;n={baseState:r.baseState,firstBaseUpdate:l,lastBaseUpdate:s,shared:r.shared,effects:r.effects},e.updateQueue=n;return}e=n.lastBaseUpdate,e===null?n.firstBaseUpdate=t:e.next=t,n.lastBaseUpdate=t}function il(e,t,n,r){var l=e.updateQueue;at=!1;var s=l.firstBaseUpdate,o=l.lastBaseUpdate,i=l.shared.pending;if(i!==null){l.shared.pending=null;var u=i,f=u.next;u.next=null,o===null?s=f:o.next=f,o=u;var y=e.alternate;y!==null&&(y=y.updateQueue,i=y.lastBaseUpdate,i!==o&&(i===null?y.firstBaseUpdate=f:i.next=f,y.lastBaseUpdate=u))}if(s!==null){var m=l.baseState;o=0,y=f=u=null,i=s;do{var p=i.lane,v=i.eventTime;if((r&p)===p){y!==null&&(y=y.next={eventTime:v,lane:0,tag:i.tag,payload:i.payload,callback:i.callback,next:null});e:{var x=e,k=i;switch(p=t,v=n,k.tag){case 1:if(x=k.payload,typeof x=="function"){m=x.call(v,m,p);break e}m=x;break e;case 3:x.flags=x.flags&-65537|128;case 0:if(x=k.payload,p=typeof x=="function"?x.call(v,m,p):x,p==null)break e;m=Z({},m,p);break e;case 2:at=!0}}i.callback!==null&&i.lane!==0&&(e.flags|=64,p=l.effects,p===null?l.effects=[i]:p.push(i))}else v={eventTime:v,lane:p,tag:i.tag,payload:i.payload,callback:i.callback,next:null},y===null?(f=y=v,u=m):y=y.next=v,o|=p;if(i=i.next,i===null){if(i=l.shared.pending,i===null)break;p=i,i=p.next,p.next=null,l.lastBaseUpdate=p,l.shared.pending=null}}while(!0);if(y===null&&(u=m),l.baseState=u,l.firstBaseUpdate=f,l.lastBaseUpdate=y,t=l.shared.interleaved,t!==null){l=t;do o|=l.lane,l=l.next;while(l!==t)}else s===null&&(l.shared.lanes=0);Bt|=o,e.lanes=o,e.memoizedState=m}}function Ai(e,t,n){if(e=t.effects,t.effects=null,e!==null)for(t=0;tn?n:4,e(!0);var r=bl.transition;bl.transition={};try{e(!1),t()}finally{B=n,bl.transition=r}}function qa(){return $e().memoizedState}function zd(e,t,n){var r=wt(e);if(n={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null},ba(e))ec(t,n);else if(n=$a(e,t,n,r),n!==null){var l=he();Ue(n,e,r,l),tc(n,t,r)}}function $d(e,t,n){var r=wt(e),l={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null};if(ba(e))ec(t,l);else{var s=e.alternate;if(e.lanes===0&&(s===null||s.lanes===0)&&(s=t.lastRenderedReducer,s!==null))try{var o=t.lastRenderedState,i=s(o,n);if(l.hasEagerState=!0,l.eagerState=i,Be(i,o)){var u=t.interleaved;u===null?(l.next=l,Mo(t)):(l.next=u.next,u.next=l),t.interleaved=l;return}}catch{}finally{}n=$a(e,t,l,r),n!==null&&(l=he(),Ue(n,e,r,l),tc(n,t,r))}}function ba(e){var t=e.alternate;return e===J||t!==null&&t===J}function ec(e,t){Hn=al=!0;var n=e.pending;n===null?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function tc(e,t,n){if(n&4194240){var r=t.lanes;r&=e.pendingLanes,n|=r,t.lanes=n,vo(e,n)}}var cl={readContext:ze,useCallback:ce,useContext:ce,useEffect:ce,useImperativeHandle:ce,useInsertionEffect:ce,useLayoutEffect:ce,useMemo:ce,useReducer:ce,useRef:ce,useState:ce,useDebugValue:ce,useDeferredValue:ce,useTransition:ce,useMutableSource:ce,useSyncExternalStore:ce,useId:ce,unstable_isNewReconciler:!1},Id={readContext:ze,useCallback:function(e,t){return He().memoizedState=[e,t===void 0?null:t],e},useContext:ze,useEffect:Bi,useImperativeHandle:function(e,t,n){return n=n!=null?n.concat([e]):null,Br(4194308,4,Ga.bind(null,t,e),n)},useLayoutEffect:function(e,t){return Br(4194308,4,e,t)},useInsertionEffect:function(e,t){return Br(4,2,e,t)},useMemo:function(e,t){var n=He();return t=t===void 0?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=He();return t=n!==void 0?n(t):t,r.memoizedState=r.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},r.queue=e,e=e.dispatch=zd.bind(null,J,e),[r.memoizedState,e]},useRef:function(e){var t=He();return e={current:e},t.memoizedState=e},useState:Ui,useDebugValue:Ao,useDeferredValue:function(e){return He().memoizedState=e},useTransition:function(){var e=Ui(!1),t=e[0];return e=Rd.bind(null,e[1]),He().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var r=J,l=He();if(G){if(n===void 0)throw Error(C(407));n=n()}else{if(n=t(),oe===null)throw Error(C(349));Ut&30||Aa(r,t,n)}l.memoizedState=n;var s={value:n,getSnapshot:t};return l.queue=s,Bi(Ba.bind(null,r,s,e),[e]),r.flags|=2048,ur(9,Ua.bind(null,r,s,n,t),void 0,null),n},useId:function(){var e=He(),t=oe.identifierPrefix;if(G){var n=et,r=be;n=(r&~(1<<32-Ae(r)-1)).toString(32)+n,t=":"+t+"R"+n,n=or++,0<\/script>",e=e.removeChild(e.firstChild)):typeof r.is=="string"?e=o.createElement(n,{is:r.is}):(e=o.createElement(n),n==="select"&&(o=e,r.multiple?o.multiple=!0:r.size&&(o.size=r.size))):e=o.createElementNS(e,n),e[We]=t,e[rr]=r,fc(e,t,!1,!1),t.stateNode=e;e:{switch(o=ws(n,r),n){case"dialog":Q("cancel",e),Q("close",e),l=r;break;case"iframe":case"object":case"embed":Q("load",e),l=r;break;case"video":case"audio":for(l=0;lwn&&(t.flags|=128,r=!0,Ln(s,!1),t.lanes=4194304)}else{if(!r)if(e=ul(o),e!==null){if(t.flags|=128,r=!0,n=e.updateQueue,n!==null&&(t.updateQueue=n,t.flags|=4),Ln(s,!0),s.tail===null&&s.tailMode==="hidden"&&!o.alternate&&!G)return fe(t),null}else 2*ee()-s.renderingStartTime>wn&&n!==1073741824&&(t.flags|=128,r=!0,Ln(s,!1),t.lanes=4194304);s.isBackwards?(o.sibling=t.child,t.child=o):(n=s.last,n!==null?n.sibling=o:t.child=o,s.last=o)}return s.tail!==null?(t=s.tail,s.rendering=t,s.tail=t.sibling,s.renderingStartTime=ee(),t.sibling=null,n=X.current,W(X,r?n&1|2:n&1),t):(fe(t),null);case 22:case 23:return Qo(),r=t.memoizedState!==null,e!==null&&e.memoizedState!==null!==r&&(t.flags|=8192),r&&t.mode&1?Ce&1073741824&&(fe(t),t.subtreeFlags&6&&(t.flags|=8192)):fe(t),null;case 24:return null;case 25:return null}throw Error(C(156,t.tag))}function Hd(e,t){switch(Eo(t),t.tag){case 1:return ke(t.type)&&tl(),e=t.flags,e&65536?(t.flags=e&-65537|128,t):null;case 3:return gn(),K(we),K(pe),$o(),e=t.flags,e&65536&&!(e&128)?(t.flags=e&-65537|128,t):null;case 5:return zo(t),null;case 13:if(K(X),e=t.memoizedState,e!==null&&e.dehydrated!==null){if(t.alternate===null)throw Error(C(340));vn()}return e=t.flags,e&65536?(t.flags=e&-65537|128,t):null;case 19:return K(X),null;case 4:return gn(),null;case 10:return To(t.type._context),null;case 22:case 23:return Qo(),null;case 24:return null;default:return null}}var Lr=!1,de=!1,Wd=typeof WeakSet=="function"?WeakSet:Set,M=null;function sn(e,t){var n=e.ref;if(n!==null)if(typeof n=="function")try{n(null)}catch(r){b(e,t,r)}else n.current=null}function Gs(e,t,n){try{n()}catch(r){b(e,t,r)}}var qi=!1;function Qd(e,t){if(Ms=Zr,e=ga(),Co(e)){if("selectionStart"in e)var n={start:e.selectionStart,end:e.selectionEnd};else e:{n=(n=e.ownerDocument)&&n.defaultView||window;var r=n.getSelection&&n.getSelection();if(r&&r.rangeCount!==0){n=r.anchorNode;var l=r.anchorOffset,s=r.focusNode;r=r.focusOffset;try{n.nodeType,s.nodeType}catch{n=null;break e}var o=0,i=-1,u=-1,f=0,y=0,m=e,p=null;t:for(;;){for(var v;m!==n||l!==0&&m.nodeType!==3||(i=o+l),m!==s||r!==0&&m.nodeType!==3||(u=o+r),m.nodeType===3&&(o+=m.nodeValue.length),(v=m.firstChild)!==null;)p=m,m=v;for(;;){if(m===e)break t;if(p===n&&++f===l&&(i=o),p===s&&++y===r&&(u=o),(v=m.nextSibling)!==null)break;m=p,p=m.parentNode}m=v}n=i===-1||u===-1?null:{start:i,end:u}}else n=null}n=n||{start:0,end:0}}else n=null;for(Ls={focusedElem:e,selectionRange:n},Zr=!1,M=t;M!==null;)if(t=M,e=t.child,(t.subtreeFlags&1028)!==0&&e!==null)e.return=t,M=e;else for(;M!==null;){t=M;try{var x=t.alternate;if(t.flags&1024)switch(t.tag){case 0:case 11:case 15:break;case 1:if(x!==null){var k=x.memoizedProps,L=x.memoizedState,h=t.stateNode,c=h.getSnapshotBeforeUpdate(t.elementType===t.type?k:Oe(t.type,k),L);h.__reactInternalSnapshotBeforeUpdate=c}break;case 3:var d=t.stateNode.containerInfo;d.nodeType===1?d.textContent="":d.nodeType===9&&d.documentElement&&d.removeChild(d.documentElement);break;case 5:case 6:case 4:case 17:break;default:throw Error(C(163))}}catch(g){b(t,t.return,g)}if(e=t.sibling,e!==null){e.return=t.return,M=e;break}M=t.return}return x=qi,qi=!1,x}function Wn(e,t,n){var r=t.updateQueue;if(r=r!==null?r.lastEffect:null,r!==null){var l=r=r.next;do{if((l.tag&e)===e){var s=l.destroy;l.destroy=void 0,s!==void 0&&Gs(t,n,s)}l=l.next}while(l!==r)}}function Pl(e,t){if(t=t.updateQueue,t=t!==null?t.lastEffect:null,t!==null){var n=t=t.next;do{if((n.tag&e)===e){var r=n.create;n.destroy=r()}n=n.next}while(n!==t)}}function Ys(e){var t=e.ref;if(t!==null){var n=e.stateNode;switch(e.tag){case 5:e=n;break;default:e=n}typeof t=="function"?t(e):t.current=e}}function mc(e){var t=e.alternate;t!==null&&(e.alternate=null,mc(t)),e.child=null,e.deletions=null,e.sibling=null,e.tag===5&&(t=e.stateNode,t!==null&&(delete t[We],delete t[rr],delete t[$s],delete t[Pd],delete t[_d])),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}function hc(e){return e.tag===5||e.tag===3||e.tag===4}function bi(e){e:for(;;){for(;e.sibling===null;){if(e.return===null||hc(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;e.tag!==5&&e.tag!==6&&e.tag!==18;){if(e.flags&2||e.child===null||e.tag===4)continue e;e.child.return=e,e=e.child}if(!(e.flags&2))return e.stateNode}}function Xs(e,t,n){var r=e.tag;if(r===5||r===6)e=e.stateNode,t?n.nodeType===8?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(n.nodeType===8?(t=n.parentNode,t.insertBefore(e,n)):(t=n,t.appendChild(e)),n=n._reactRootContainer,n!=null||t.onclick!==null||(t.onclick=el));else if(r!==4&&(e=e.child,e!==null))for(Xs(e,t,n),e=e.sibling;e!==null;)Xs(e,t,n),e=e.sibling}function Js(e,t,n){var r=e.tag;if(r===5||r===6)e=e.stateNode,t?n.insertBefore(e,t):n.appendChild(e);else if(r!==4&&(e=e.child,e!==null))for(Js(e,t,n),e=e.sibling;e!==null;)Js(e,t,n),e=e.sibling}var ie=null,Fe=!1;function it(e,t,n){for(n=n.child;n!==null;)vc(e,t,n),n=n.sibling}function vc(e,t,n){if(Qe&&typeof Qe.onCommitFiberUnmount=="function")try{Qe.onCommitFiberUnmount(xl,n)}catch{}switch(n.tag){case 5:de||sn(n,t);case 6:var r=ie,l=Fe;ie=null,it(e,t,n),ie=r,Fe=l,ie!==null&&(Fe?(e=ie,n=n.stateNode,e.nodeType===8?e.parentNode.removeChild(n):e.removeChild(n)):ie.removeChild(n.stateNode));break;case 18:ie!==null&&(Fe?(e=ie,n=n.stateNode,e.nodeType===8?Jl(e.parentNode,n):e.nodeType===1&&Jl(e,n),qn(e)):Jl(ie,n.stateNode));break;case 4:r=ie,l=Fe,ie=n.stateNode.containerInfo,Fe=!0,it(e,t,n),ie=r,Fe=l;break;case 0:case 11:case 14:case 15:if(!de&&(r=n.updateQueue,r!==null&&(r=r.lastEffect,r!==null))){l=r=r.next;do{var s=l,o=s.destroy;s=s.tag,o!==void 0&&(s&2||s&4)&&Gs(n,t,o),l=l.next}while(l!==r)}it(e,t,n);break;case 1:if(!de&&(sn(n,t),r=n.stateNode,typeof r.componentWillUnmount=="function"))try{r.props=n.memoizedProps,r.state=n.memoizedState,r.componentWillUnmount()}catch(i){b(n,t,i)}it(e,t,n);break;case 21:it(e,t,n);break;case 22:n.mode&1?(de=(r=de)||n.memoizedState!==null,it(e,t,n),de=r):it(e,t,n);break;default:it(e,t,n)}}function eu(e){var t=e.updateQueue;if(t!==null){e.updateQueue=null;var n=e.stateNode;n===null&&(n=e.stateNode=new Wd),t.forEach(function(r){var l=ep.bind(null,e,r);n.has(r)||(n.add(r),r.then(l,l))})}}function Ie(e,t){var n=t.deletions;if(n!==null)for(var r=0;rl&&(l=o),r&=~s}if(r=l,r=ee()-r,r=(120>r?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*Gd(r/1960))-r,10e?16:e,pt===null)var r=!1;else{if(e=pt,pt=null,pl=0,A&6)throw Error(C(331));var l=A;for(A|=4,M=e.current;M!==null;){var s=M,o=s.child;if(M.flags&16){var i=s.deletions;if(i!==null){for(var u=0;uee()-Ho?It(e,0):Vo|=n),Se(e,t)}function Nc(e,t){t===0&&(e.mode&1?(t=Sr,Sr<<=1,!(Sr&130023424)&&(Sr=4194304)):t=1);var n=he();e=lt(e,t),e!==null&&(dr(e,t,n),Se(e,n))}function bd(e){var t=e.memoizedState,n=0;t!==null&&(n=t.retryLane),Nc(e,n)}function ep(e,t){var n=0;switch(e.tag){case 13:var r=e.stateNode,l=e.memoizedState;l!==null&&(n=l.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(C(314))}r!==null&&r.delete(t),Nc(e,n)}var Ec;Ec=function(e,t,n){if(e!==null)if(e.memoizedProps!==t.pendingProps||we.current)xe=!0;else{if(!(e.lanes&n)&&!(t.flags&128))return xe=!1,Bd(e,t,n);xe=!!(e.flags&131072)}else xe=!1,G&&t.flags&1048576&&Ta(t,ll,t.index);switch(t.lanes=0,t.tag){case 2:var r=t.type;Vr(e,t),e=t.pendingProps;var l=hn(t,pe.current);dn(t,n),l=Oo(null,t,r,e,l,n);var s=Fo();return t.flags|=1,typeof l=="object"&&l!==null&&typeof l.render=="function"&&l.$$typeof===void 0?(t.tag=1,t.memoizedState=null,t.updateQueue=null,ke(r)?(s=!0,nl(t)):s=!1,t.memoizedState=l.state!==null&&l.state!==void 0?l.state:null,Lo(t),l.updater=jl,t.stateNode=l,l._reactInternals=t,Us(t,r,e,n),t=Hs(null,t,r,!0,s,n)):(t.tag=0,G&&s&&No(t),me(null,t,l,n),t=t.child),t;case 16:r=t.elementType;e:{switch(Vr(e,t),e=t.pendingProps,l=r._init,r=l(r._payload),t.type=r,l=t.tag=np(r),e=Oe(r,e),l){case 0:t=Vs(null,t,r,e,n);break e;case 1:t=Xi(null,t,r,e,n);break e;case 11:t=Gi(null,t,r,e,n);break e;case 14:t=Yi(null,t,r,Oe(r.type,e),n);break e}throw Error(C(306,r,""))}return t;case 0:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:Oe(r,l),Vs(e,t,r,l,n);case 1:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:Oe(r,l),Xi(e,t,r,l,n);case 3:e:{if(uc(t),e===null)throw Error(C(387));r=t.pendingProps,s=t.memoizedState,l=s.element,Ia(e,t),il(t,r,null,n);var o=t.memoizedState;if(r=o.element,s.isDehydrated)if(s={element:r,isDehydrated:!1,cache:o.cache,pendingSuspenseBoundaries:o.pendingSuspenseBoundaries,transitions:o.transitions},t.updateQueue.baseState=s,t.memoizedState=s,t.flags&256){l=xn(Error(C(423)),t),t=Ji(e,t,r,n,l);break e}else if(r!==l){l=xn(Error(C(424)),t),t=Ji(e,t,r,n,l);break e}else for(Ne=yt(t.stateNode.containerInfo.firstChild),Ee=t,G=!0,De=null,n=za(t,null,r,n),t.child=n;n;)n.flags=n.flags&-3|4096,n=n.sibling;else{if(vn(),r===l){t=st(e,t,n);break e}me(e,t,r,n)}t=t.child}return t;case 5:return Oa(t),e===null&&Fs(t),r=t.type,l=t.pendingProps,s=e!==null?e.memoizedProps:null,o=l.children,Rs(r,l)?o=null:s!==null&&Rs(r,s)&&(t.flags|=32),ic(e,t),me(e,t,o,n),t.child;case 6:return e===null&&Fs(t),null;case 13:return ac(e,t,n);case 4:return Ro(t,t.stateNode.containerInfo),r=t.pendingProps,e===null?t.child=yn(t,null,r,n):me(e,t,r,n),t.child;case 11:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:Oe(r,l),Gi(e,t,r,l,n);case 7:return me(e,t,t.pendingProps,n),t.child;case 8:return me(e,t,t.pendingProps.children,n),t.child;case 12:return me(e,t,t.pendingProps.children,n),t.child;case 10:e:{if(r=t.type._context,l=t.pendingProps,s=t.memoizedProps,o=l.value,W(sl,r._currentValue),r._currentValue=o,s!==null)if(Be(s.value,o)){if(s.children===l.children&&!we.current){t=st(e,t,n);break e}}else for(s=t.child,s!==null&&(s.return=t);s!==null;){var i=s.dependencies;if(i!==null){o=s.child;for(var u=i.firstContext;u!==null;){if(u.context===r){if(s.tag===1){u=tt(-1,n&-n),u.tag=2;var f=s.updateQueue;if(f!==null){f=f.shared;var y=f.pending;y===null?u.next=u:(u.next=y.next,y.next=u),f.pending=u}}s.lanes|=n,u=s.alternate,u!==null&&(u.lanes|=n),Ds(s.return,n,t),i.lanes|=n;break}u=u.next}}else if(s.tag===10)o=s.type===t.type?null:s.child;else if(s.tag===18){if(o=s.return,o===null)throw Error(C(341));o.lanes|=n,i=o.alternate,i!==null&&(i.lanes|=n),Ds(o,n,t),o=s.sibling}else o=s.child;if(o!==null)o.return=s;else for(o=s;o!==null;){if(o===t){o=null;break}if(s=o.sibling,s!==null){s.return=o.return,o=s;break}o=o.return}s=o}me(e,t,l.children,n),t=t.child}return t;case 9:return l=t.type,r=t.pendingProps.children,dn(t,n),l=ze(l),r=r(l),t.flags|=1,me(e,t,r,n),t.child;case 14:return r=t.type,l=Oe(r,t.pendingProps),l=Oe(r.type,l),Yi(e,t,r,l,n);case 15:return sc(e,t,t.type,t.pendingProps,n);case 17:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:Oe(r,l),Vr(e,t),t.tag=1,ke(r)?(e=!0,nl(t)):e=!1,dn(t,n),nc(t,r,l),Us(t,r,l,n),Hs(null,t,r,!0,e,n);case 19:return cc(e,t,n);case 22:return oc(e,t,n)}throw Error(C(156,t.tag))};function jc(e,t){return bu(e,t)}function tp(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Le(e,t,n,r){return new tp(e,t,n,r)}function Go(e){return e=e.prototype,!(!e||!e.isReactComponent)}function np(e){if(typeof e=="function")return Go(e)?1:0;if(e!=null){if(e=e.$$typeof,e===fo)return 11;if(e===po)return 14}return 2}function kt(e,t){var n=e.alternate;return n===null?(n=Le(e.tag,t,e.key,e.mode),n.elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.subtreeFlags=0,n.deletions=null),n.flags=e.flags&14680064,n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=t===null?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Qr(e,t,n,r,l,s){var o=2;if(r=e,typeof e=="function")Go(e)&&(o=1);else if(typeof e=="string")o=5;else e:switch(e){case Jt:return Ot(n.children,l,s,t);case co:o=8,l|=8;break;case cs:return e=Le(12,n,t,l|2),e.elementType=cs,e.lanes=s,e;case fs:return e=Le(13,n,t,l),e.elementType=fs,e.lanes=s,e;case ds:return e=Le(19,n,t,l),e.elementType=ds,e.lanes=s,e;case Ou:return Tl(n,l,s,t);default:if(typeof e=="object"&&e!==null)switch(e.$$typeof){case $u:o=10;break e;case Iu:o=9;break e;case fo:o=11;break e;case po:o=14;break e;case ut:o=16,r=null;break e}throw Error(C(130,e==null?e:typeof e,""))}return t=Le(o,n,t,l),t.elementType=e,t.type=r,t.lanes=s,t}function Ot(e,t,n,r){return e=Le(7,e,r,t),e.lanes=n,e}function Tl(e,t,n,r){return e=Le(22,e,r,t),e.elementType=Ou,e.lanes=n,e.stateNode={isHidden:!1},e}function ls(e,t,n){return e=Le(6,e,null,t),e.lanes=n,e}function ss(e,t,n){return t=Le(4,e.children!==null?e.children:[],e.key,t),t.lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function rp(e,t,n,r,l){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=Al(0),this.expirationTimes=Al(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=Al(0),this.identifierPrefix=r,this.onRecoverableError=l,this.mutableSourceEagerHydrationData=null}function Yo(e,t,n,r,l,s,o,i,u){return e=new rp(e,t,n,i,u),t===1?(t=1,s===!0&&(t|=8)):t=0,s=Le(3,null,null,t),e.current=s,s.stateNode=e,s.memoizedState={element:r,isDehydrated:n,cache:null,transitions:null,pendingSuspenseBoundaries:null},Lo(s),e}function lp(e,t,n){var r=3"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!="function"))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(Mc)}catch(e){console.error(e)}}Mc(),Mu.exports=Pe;var ap=Mu.exports,uu=ap;us.createRoot=uu.createRoot,us.hydrateRoot=uu.hydrateRoot;function cp(){const[e,t]=w.useState({status:"disconnected"}),[n,r]=w.useState([]),[l,s]=w.useState(null),[o,i]=w.useState(0),u=w.useRef(null),f=w.useRef(null),y=w.useRef(!1),m=w.useCallback(()=>{var k;if(((k=u.current)==null?void 0:k.readyState)===WebSocket.OPEN)return;const x=`${window.location.protocol==="https:"?"wss:":"ws:"}//${window.location.host}/ws/pipedal`;t({status:"connecting"});try{const L=new WebSocket(x);L.onopen=()=>{t({status:"connected"})},L.onmessage=h=>{try{const c=JSON.parse(h.data);c.type==="connected"?t({status:"connected"}):c.type==="error"&&t({status:"error",error:c.message})}catch{}},L.onerror=()=>{t({status:"error",error:"WebSocket connection error"})},L.onclose=()=>{y.current||(t({status:"disconnected"}),f.current=window.setTimeout(()=>{y.current||m()},3e3))},u.current=L}catch(L){t({status:"error",error:String(L)})}},[]),p=w.useCallback(async()=>{try{const x=await(await fetch("/api/discover")).json();r(x.oplabs_instances||[]),s(x.pedalboard_name),i(Date.now()),x.connected&&t({status:"connected"})}catch(v){t({status:"error",error:`Discover failed: ${String(v)}`})}},[]);return w.useEffect(()=>(y.current=!1,m(),()=>{y.current=!0,f.current&&clearTimeout(f.current),u.current&&u.current.close()}),[m]),w.useEffect(()=>{e.status==="connected"&&p()},[e.status,p]),{connectionState:e,plugins:n,pedalboardName:l,discover:p,lastUpdate:o}}function fp(){const e=w.useRef(null),[t,n]=w.useState(!1),r=w.useRef(null),l=w.useRef(!1),s=w.useRef(new Map),o=w.useCallback(()=>{var y;if(((y=e.current)==null?void 0:y.readyState)===WebSocket.OPEN)return;const f=`${window.location.protocol==="https:"?"wss:":"ws:"}//${window.location.host}/ws/pipedal`;try{const m=new WebSocket(f);m.onopen=()=>{n(!0)},m.onmessage=p=>{try{const v=JSON.parse(p.data);if(Array.isArray(v)&&v.length>=1){const x=v[0];if(x.reply!==void 0){const k=s.current.get(x.reply);k&&(k(v[1]||null),s.current.delete(x.reply))}}}catch{}},m.onerror=()=>{n(!1)},m.onclose=()=>{n(!1),s.current.clear(),l.current||(r.current=window.setTimeout(()=>{l.current||o()},3e3))},e.current=m}catch{n(!1)}},[]);w.useEffect(()=>(l.current=!1,o(),()=>{l.current=!0,r.current&&clearTimeout(r.current),e.current&&e.current.close()}),[o]);const i=w.useCallback((u,f,y)=>{if(!e.current||e.current.readyState!==WebSocket.OPEN)return;const m=(Date.now()&2147483647)+Math.floor(Math.random()*1e3),p=JSON.stringify([{message:"setControlValue",replyTo:m},{instanceId:u,key:f,value:y}]);e.current.send(p)},[]);return{ready:t,setControlValue:i}}function dp(){const[e,t]=w.useState([]),[n,r]=w.useState(!1),[l,s]=w.useState(null),o=w.useCallback(async()=>{r(!0),s(null);try{const m=await fetch("/api/scenes");if(!m.ok)throw new Error(`Failed to load scenes: ${m.statusText}`);const p=await m.json();t(p.scenes||[])}catch(m){const p=m instanceof Error?m.message:String(m);s(p)}finally{r(!1)}},[]);w.useEffect(()=>{o()},[o]);const i=w.useCallback(async(m,p,v)=>{s(null);try{const x=await fetch("/api/scenes",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:m,state:p,midiPc:v??null})});if(!x.ok)throw new Error(`Failed to save scene: ${x.statusText}`);await o()}catch(x){const k=x instanceof Error?x.message:String(x);throw s(k),x}},[o]),u=w.useCallback(async(m,p)=>{s(null);try{const v=await fetch(`/api/scenes/${encodeURIComponent(m)}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(p)});if(!v.ok)throw new Error(`Failed to update scene: ${v.statusText}`);await o()}catch(v){const x=v instanceof Error?v.message:String(v);s(x)}},[o]),f=w.useCallback(async m=>{s(null);try{const p=await fetch(`/api/scenes/${encodeURIComponent(m)}`,{method:"DELETE"});if(!p.ok)throw new Error(`Failed to delete scene: ${p.statusText}`);await o()}catch(p){const v=p instanceof Error?p.message:String(p);s(v)}},[o]),y=w.useCallback(async m=>{s(null);try{const p=await fetch(`/api/scenes/${encodeURIComponent(m)}/recall`,{method:"POST"});if(!p.ok){const v=await p.json().catch(()=>({}));throw new Error(v.error||`Recall failed: ${p.statusText}`)}return!0}catch(p){const v=p instanceof Error?p.message:String(p);return s(v),!1}},[]);return{scenes:e,loading:n,error:l,saveScene:i,updateScene:u,deleteScene:f,recallScene:y,refreshScenes:o}}function pp(){const[e,t]=w.useState({ports:[],connections:{},loading:!0,error:null,source:"none"}),[n,r]=w.useState("idle"),[l,s]=w.useState(null),o=w.useRef(!0);w.useEffect(()=>()=>{o.current=!1},[]);const i=w.useCallback(async()=>{t(m=>({...m,loading:!0,error:null}));try{const m=await fetch("/api/jack/ports");if(!m.ok)throw new Error(`Failed to load JACK ports: ${m.statusText}`);const p=await m.json();o.current&&t({ports:p.ports||[],connections:p.connections||{},loading:!1,error:p.note||null,source:p.source})}catch(m){const p=m instanceof Error?m.message:String(m);o.current&&t(v=>({...v,loading:!1,error:p}))}},[]),u=w.useCallback(async(m,p)=>{r("connecting"),s(null);try{const v=await fetch("/api/jack/connect",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({source:m,destination:p})});if(!v.ok){const x=await v.json().catch(()=>({}));throw new Error(x.detail||`Connect failed: ${v.statusText}`)}return await i(),r("idle"),!0}catch(v){const x=v instanceof Error?v.message:String(v);return s(x),r("error"),!1}},[i]),f=w.useCallback(async(m,p)=>{r("disconnecting"),s(null);try{const v=await fetch("/api/jack/disconnect",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({source:m,destination:p})});if(!v.ok){const x=await v.json().catch(()=>({}));throw new Error(x.detail||`Disconnect failed: ${v.statusText}`)}return await i(),r("idle"),!0}catch(v){const x=v instanceof Error?v.message:String(v);return s(x),r("error"),!1}},[i]),y=w.useCallback(async()=>{r("disconnecting"),s(null);try{const m=await fetch("/api/jack/disconnect-all",{method:"POST"});if(!m.ok)throw new Error(`Disconnect all failed: ${m.statusText}`);return await i(),r("idle"),!0}catch(m){const p=m instanceof Error?m.message:String(m);return s(p),r("error"),!1}},[i]);return w.useEffect(()=>{i()},[i]),{portsState:e,refresh:i,connect:u,disconnect:f,disconnectAll:y,actionState:n,actionError:l}}function mp(){const[e,t]=w.useState([]),[n,r]=w.useState([]),[l,s]=w.useState(!1),[o,i]=w.useState(!1),[u,f]=w.useState(null),y=w.useRef(!0);w.useEffect(()=>()=>{y.current=!1},[]);const m=w.useCallback(()=>{const c={};for(const d of e){const g=d.channel_index;c[g]||(c[g]=[]),c[g].push(d)}for(const d of Object.keys(c))c[Number(d)].sort((g,S)=>g.slot_order-S.slot_order);return c},[e]),p=w.useCallback(async c=>{s(!0),f(null);try{const d=c!==void 0?`/api/fx/inserts?channel_index=${c}`:"/api/fx/inserts",g=await fetch(d);if(!g.ok)throw new Error(`HTTP ${g.status}`);const S=await g.json();y.current&&t(S.inserts||[])}catch(d){y.current&&f(`Failed to fetch inserts: ${String(d)}`)}finally{y.current&&s(!1)}},[]),v=w.useCallback(async()=>{i(!0);try{const c=await fetch("/api/fx/available-plugins");if(!c.ok)throw new Error(`HTTP ${c.status}`);const d=await c.json();y.current&&r(d.plugins||[])}catch(c){y.current&&f(`Failed to fetch available plugins: ${String(c)}`)}finally{y.current&&i(!1)}},[]),x=w.useCallback(async c=>{try{const d=await fetch("/api/fx/inserts",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(c)});if(!d.ok)throw new Error(`HTTP ${d.status}`);const S=(await d.json()).insert;return y.current&&t(N=>[...N,S]),S}catch(d){return y.current&&f(`Failed to create insert: ${String(d)}`),null}},[]),k=w.useCallback(async(c,d)=>{try{const g=await fetch(`/api/fx/inserts/${c}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(d)});if(!g.ok)throw new Error(`HTTP ${g.status}`);const N=(await g.json()).insert;return y.current&&t(j=>j.map(T=>T.id===c?N:T)),N}catch(g){return y.current&&f(`Failed to update insert: ${String(g)}`),null}},[]),L=w.useCallback(async c=>{try{const d=await fetch(`/api/fx/inserts/${c}`,{method:"DELETE"});if(!d.ok)throw new Error(`HTTP ${d.status}`);return y.current&&t(g=>g.filter(S=>S.id!==c)),!0}catch(d){return y.current&&f(`Failed to delete insert: ${String(d)}`),!1}},[]),h=w.useCallback(async(c,d)=>{await k(c,{bypassed:!d})},[k]);return w.useEffect(()=>{p(),v()},[p,v]),{insertsByChannel:m(),availablePlugins:n,loadingAvailable:o,loadingInserts:l,error:u,fetchInserts:p,fetchAvailablePlugins:v,createInsert:x,updateInsert:k,deleteInsert:L,toggleBypass:h}}const Fn=32,to=28,cr=4,Yt="#e94560",hp=2.5,vp=4;function au(e,t){const n=e.filter(s=>s.direction===t&&s.port_type==="audio").sort((s,o)=>{if(s.is_physical!==o.is_physical)return s.is_physical?-1:1;const i=s.client.localeCompare(o.client);return i!==0?i:s.port.localeCompare(o.port)}),r=[];let l=null;for(const s of n)(!l||l.client!==s.client)&&(l={client:s.client,ports:[],totalHeight:to+cr},r.push(l)),l.ports.push(s),l.totalHeight+=Fn;return r}function yp(e,t,n,r){const l={},s={};let o=r;for(const y of e){o+=to+cr/2;for(const m of y.ports)l[m.name]=o+Fn/2,o+=Fn}let i=r;for(const y of t){i+=to+cr/2;for(const m of y.ports)s[m.name]=i+Fn/2,i+=Fn}const u=[],f=new Set;for(const[y,m]of Object.entries(l)){const p=n[y]||[];for(const v of p){const x=`${y}→${v}`;if(f.has(x))continue;f.add(x);const k=s[v];k!==void 0&&u.push({source:y,dest:v,y1:m,y2:k})}}return u}function cu(e,t,n,r){const l=r,s=n-r,o=Math.max(60,(s-l)*.4);return`M ${l} ${e} C ${l+o} ${e}, ${s-o} ${t}, ${s} ${t}`}const gp=({portsState:e,onConnect:t,onDisconnect:n,onDisconnectAll:r,onRefresh:l,actionState:s,actionError:o})=>{const{ports:i,connections:u,loading:f,error:y,source:m}=e,[p,v]=w.useState(null),[x,k]=w.useState(null),L=w.useRef(null),[h,c]=w.useState(800),d=w.useMemo(()=>au(i,"output"),[i]),g=w.useMemo(()=>au(i,"input"),[i]),S=w.useMemo(()=>{const R=d.reduce((le,Y)=>le+Y.totalHeight,cr),V=g.reduce((le,Y)=>le+Y.totalHeight,cr),H=Math.max(R,V)+40+20;return{headerH:40,leftH:R,rightH:V,totalH:H}},[d,g]),N=280,j=w.useMemo(()=>yp(d,g,u,S.headerH+12),[d,g,u,S.headerH]);w.useEffect(()=>{const P=L.current;if(!P)return;const R=new ResizeObserver(V=>{for(const H of V)c(H.contentRect.width)});return R.observe(P),()=>R.disconnect()},[]),w.useEffect(()=>{s==="idle"&&v(null)},[s]);const T=w.useCallback(async P=>{if(P.direction==="output")if(P.connections.length>0)for(const R of P.connections)await n(P.name,R);else v(p===P.name?null:P.name);else if(p)await t(p,P.name),v(null);else if(P.connections.length>0)for(const R of P.connections)await n(R,P.name)},[p,t,n]),U=w.useCallback(P=>{const R=["patch-port"];return P.connections.length>0&&R.push("connected"),p===P.name&&R.push("armed"),P.direction==="output"&&p&&p!==P.name&&R.push("available"),R.join(" ")},[p]),I=w.useMemo(()=>{let P=0;for(const[,R]of Object.entries(u))P+=R.length;return P},[u]),_=(P,R)=>a.jsx("div",{className:`patch-column patch-column-${R}`,children:P.map(V=>a.jsxs("div",{className:"patch-group",children:[a.jsxs("div",{className:"patch-group-header",children:[a.jsx("span",{className:`patch-group-dot ${V.client==="system"?"physical":""}`}),a.jsx("span",{className:"patch-group-name",children:V.client==="system"?V.client:V.client.replace(/^pipedal:/,"").replace(/^pipedal/,"PiPedal")})]}),V.ports.map(H=>a.jsxs("div",{className:U(H),onClick:()=>T(H),title:`${H.name}${H.connections.length>0?` +Connected to: ${H.connections.join(", ")}`:` +Click to connect`}`,children:[R==="left"&&a.jsx("span",{className:"patch-port-indicator"}),a.jsx("span",{className:`patch-port-name ${H.is_physical?"physical":""}`,children:H.port}),H.connections.length>0&&a.jsx("span",{className:"patch-port-conn-count",children:H.connections.length})]},H.name))]},V.client))});return f?a.jsx("div",{className:"patch-bay",children:a.jsxs("div",{className:"patch-bay-loading",children:[a.jsx("div",{className:"patch-spinner"}),a.jsx("span",{children:"Loading JACK ports..."})]})}):i.length===0?a.jsx("div",{className:"patch-bay",children:a.jsxs("div",{className:"patch-bay-empty",children:[a.jsx("div",{className:"patch-empty-icon",children:"🔌"}),a.jsx("h3",{children:"No JACK Ports Available"}),a.jsx("p",{children:m==="none"?"PiPedal is unreachable. Ensure the PiPedal server is running on 192.168.0.245:8080.":"No ports found in the current pedalboard."}),y&&a.jsx("p",{className:"patch-empty-note",children:y}),a.jsx("button",{className:"patch-refresh-btn",onClick:l,children:"↻ Retry"})]})}):a.jsxs("div",{className:"patch-bay",ref:L,children:[a.jsxs("div",{className:"patch-bay-header",children:[a.jsxs("div",{className:"patch-bay-title",children:[a.jsx("span",{className:"patch-icon",children:"🔌"}),a.jsx("span",{children:"Patch Bay"}),a.jsx("span",{className:"patch-conn-count",children:I})]}),a.jsxs("div",{className:"patch-bay-actions",children:[p&&a.jsxs("span",{className:"patch-armed-info",children:["Armed: ",a.jsx("code",{children:p.split(":").pop()})]}),s!=="idle"&&a.jsx("span",{className:`patch-action-state ${s}`,children:s==="connecting"?"Connecting...":s==="disconnecting"?"Disconnecting...":o||"Error"}),a.jsx("button",{className:"patch-action-btn",onClick:r,disabled:I===0||s!=="idle",title:"Disconnect all",children:"✕ Disconnect All"}),a.jsx("button",{className:"patch-refresh-btn",onClick:l,disabled:s!=="idle",title:"Refresh ports",children:"↻"})]})]}),a.jsxs("div",{className:"patch-bay-body",style:{minHeight:S.totalH},children:[a.jsxs("svg",{className:"patch-cables-svg",width:h,height:S.totalH,style:{position:"absolute",top:0,left:0,pointerEvents:"none"},children:[a.jsxs("defs",{children:[a.jsxs("linearGradient",{id:"cableGrad",x1:"0",y1:"0",x2:"1",y2:"0",children:[a.jsx("stop",{offset:"0%",stopColor:Yt,stopOpacity:.15}),a.jsx("stop",{offset:"50%",stopColor:Yt,stopOpacity:.6}),a.jsx("stop",{offset:"100%",stopColor:Yt,stopOpacity:.15})]}),a.jsxs("filter",{id:"cableGlow",children:[a.jsx("feGaussianBlur",{stdDeviation:"2",result:"blur"}),a.jsxs("feMerge",{children:[a.jsx("feMergeNode",{in:"blur"}),a.jsx("feMergeNode",{in:"SourceGraphic"})]})]})]}),j.map(P=>a.jsx("path",{d:cu(P.y1,P.y2,h,N),fill:"none",stroke:"transparent",strokeWidth:14,style:{pointerEvents:"stroke",cursor:"pointer"},onMouseEnter:()=>k({source:P.source,dest:P.dest}),onMouseLeave:()=>k(null),onClick:()=>{n(P.source,P.dest)}},`bg-${P.source}→${P.dest}`)),j.map(P=>{const R=(x==null?void 0:x.source)===P.source&&(x==null?void 0:x.dest)===P.dest;return a.jsx("path",{d:cu(P.y1,P.y2,h,N),fill:"none",stroke:R?"#ff6b81":Yt,strokeWidth:R?vp:hp,strokeLinecap:"round",opacity:R?.9:.5,filter:R?"url(#cableGlow)":void 0,style:{pointerEvents:"none"}},`cable-${P.source}→${P.dest}`)}),j.map(P=>a.jsx("circle",{cx:N,cy:P.y1,r:3,fill:Yt,opacity:.8},`dot-${P.source}→${P.dest}`)),j.map(P=>a.jsx("circle",{cx:h-N,cy:P.y2,r:3,fill:Yt,opacity:.8},`dot2-${P.source}→${P.dest}`))]}),_(d,"left"),_(g,"right"),m!=="pipedal"&&m!=="none"&&a.jsxs("div",{className:"patch-source-note",children:["Port data from pedalboard state (source: ",m,")"]})]}),y&&a.jsxs("div",{className:"patch-bay-error",children:[a.jsxs("span",{children:["⚠ ",y]}),a.jsx("button",{className:"patch-dismiss-btn",onClick:l,children:"↻"})]}),o&&a.jsx("div",{className:"patch-bay-error action",children:a.jsxs("span",{children:["⚠ ",o]})})]})},$t=-60,fu=0;function _t(e){const n=(Math.max($t,Math.min(fu,e))-$t)/(fu-$t);return Math.sqrt(n)*100}const vl=({levelL:e,levelR:t,label:n,mini:r=!1,peakHold:l=1500})=>{const s=w.useRef($t),o=w.useRef($t),i=w.useRef(null),u=w.useRef(null),[,f]=_u.useState(0);w.useEffect(()=>{e>s.current&&(s.current=e,i.current&&clearTimeout(i.current),i.current=window.setTimeout(()=>{s.current=Math.max(e,$t),f(L=>L+1)},l)),t>o.current&&(o.current=t,u.current&&clearTimeout(u.current),u.current=window.setTimeout(()=>{o.current=Math.max(t,$t),f(L=>L+1)},l))},[e,t,l]);const y=_t(e),m=_t(t),p=_t(s.current),v=_t(o.current),x=L=>L<60?"var(--meter-green, #4caf50)":L<85?"var(--meter-yellow, #ff9800)":"var(--meter-red, #f44336)",k=(L,h,c)=>a.jsxs("div",{className:`level-meter-channel ${r?"mini":""}`,children:[!r&&a.jsx("span",{className:"level-meter-side-label",children:c}),a.jsxs("div",{className:"level-meter-bar-track",children:[a.jsx("div",{className:"level-meter-bar-fill",style:{height:`${Math.min(100,L)}%`,backgroundColor:x(L)}}),a.jsx("div",{className:"level-meter-peak",style:{bottom:`${Math.min(100,h)}%`}}),!r&&a.jsxs(a.Fragment,{children:[a.jsx("div",{className:"level-meter-tick",style:{bottom:`${_t(-6)}%`}}),a.jsx("div",{className:"level-meter-tick mark-yellow",style:{bottom:`${_t(-20)}%`}}),a.jsx("div",{className:"level-meter-tick mark-green",style:{bottom:`${_t(-40)}%`}})]})]})]});return a.jsxs("div",{className:`level-meter ${r?"mini":""}`,children:[a.jsxs("div",{className:"level-meter-stereo-pair",children:[k(y,p,"L"),k(m,v,"R")]}),n&&a.jsx("div",{className:"level-meter-label",children:n}),!r&&a.jsxs("div",{className:"level-meter-db-values",children:[a.jsx("span",{className:e>-10?"hot":"",children:e.toFixed(1)}),a.jsx("span",{className:t>-10?"hot":"",children:t.toFixed(1)})]})]})},Ft=-135,yl=135,Lc=yl-Ft,xp=.1,no=24,du=no*2,os=20,wp=2.5;function kp(e,t,n,r){if(r<=0)return e;const l=Math.max(t,Math.min(n,e));return Math.max(t,Math.min(n,t+Math.round((l-t)/r)*r))}function pu(e,t,n){const r=(Math.max(t,Math.min(n,e))-t)/(n-t);return Ft+r*Lc}function Sp(e,t,n){const r=(Math.max(Ft,Math.min(yl,e))-Ft)/Lc;return t+r*(n-t)}function mu(e,t,n){const r=n.getBoundingClientRect(),l=e-(r.left+r.width/2),s=t-(r.top+r.height/2);return l*l+s*s<25?NaN:((Math.atan2(s,l)*180/Math.PI+90)%360+360)%360}const Cp=({value:e,min:t,max:n,step:r=0,size:l=48,label:s,readout:o,defaultValue:i,onChanging:u,onChange:f,onDoubleClick:y,accentColor:m})=>{const p=w.useRef(null),v=w.useRef({active:!1,pointerId:-1,lastAngle:0,dragValue:e,pointerType:""}),[x,k]=w.useState(!1),L=pu(e,t,n),h=w.useCallback(_=>{if(_.button!==0)return;const P=p.current;if(!P)return;_.preventDefault(),P.setPointerCapture(_.pointerId);const R=mu(_.clientX,_.clientY,P);v.current={active:!0,pointerId:_.pointerId,lastAngle:isNaN(R)?0:R,dragValue:e,pointerType:_.pointerType},k(!0)},[e]),c=w.useCallback(_=>{if(!v.current.active||v.current.pointerId!==_.pointerId)return;const P=p.current;if(!P)return;_.preventDefault();const R=mu(_.clientX,_.clientY,P);if(isNaN(R))return;let V=R-v.current.lastAngle;for(;V>180;)V-=360;for(;V<-180;)V+=360;const H=_.shiftKey?xp:1,le=Math.max(Ft,Math.min(yl,pu(v.current.dragValue,t,n)+V*H));let Y=Sp(le,t,n);r>0&&(Y=kp(Y,t,n,r)),v.current.dragValue=Y,v.current.lastAngle=R,u&&u(Y),f(Y)},[t,n,r,u,f]),d=w.useCallback(_=>{if(!v.current.active||v.current.pointerId!==_.pointerId)return;const P=p.current;P&&(P.releasePointerCapture(_.pointerId),v.current.active=!1,k(!1))},[]),g=w.useCallback(_=>{v.current.pointerId===_.pointerId&&(v.current.active=!1,k(!1))},[]),S=w.useCallback(_=>{_.preventDefault(),f(i??t),y&&y()},[i,t,f,y]);function N(_,P,R,V,H){const le=q=>q*Math.PI/180,Y=_+R*Math.sin(le(V)),E=P-R*Math.cos(le(V)),O=_+R*Math.sin(le(H)),$=P-R*Math.cos(le(H)),z=(H-V+720)%360>180?1:0;return`M ${Y} ${E} A ${R} ${R} 0 ${z} 1 ${O} ${$}`}const j=Ft,T=yl,U=Ft,I=L;return a.jsxs("div",{className:"rotary-knob",style:{"--knob-accent":m||"var(--accent, #e94560)",width:l,height:l},children:[a.jsxs("svg",{ref:p,className:`rotary-knob-svg ${x?"dragging":""}`,viewBox:`${-no} ${-no} ${du} ${du}`,width:l,height:l,onPointerDown:h,onPointerMove:c,onPointerUp:d,onLostPointerCapture:g,onDoubleClick:S,role:"slider","aria-valuemin":t,"aria-valuemax":n,"aria-valuenow":e,"aria-label":s||"Knob",tabIndex:0,children:[a.jsx("defs",{children:a.jsxs("radialGradient",{id:"knob-body",cx:"40%",cy:"35%",r:"60%",children:[a.jsx("stop",{offset:"0%",stopColor:"rgba(255,255,255,0.15)"}),a.jsx("stop",{offset:"60%",stopColor:"rgba(255,255,255,0.04)"}),a.jsx("stop",{offset:"100%",stopColor:"rgba(0,0,0,0.35)"})]})}),a.jsx("path",{className:"rotary-knob-track",d:N(0,0,os,j,T),fill:"none",strokeWidth:3}),a.jsx("path",{className:"rotary-knob-fill",d:N(0,0,os,U,I),fill:"none",strokeWidth:3,strokeLinecap:"round"}),a.jsx("circle",{className:"rotary-knob-body",cx:0,cy:0,r:os-5,fill:"url(#knob-body)"}),a.jsx("line",{className:"rotary-knob-needle",x1:0,y1:0,x2:0,y2:-16,transform:`rotate(${L})`}),a.jsx("circle",{className:"rotary-knob-centre",cx:0,cy:0,r:wp})]}),s&&a.jsx("span",{className:"rotary-knob-label",children:s}),o!==void 0&&a.jsx("span",{className:"rotary-knob-readout",children:o})]})},is={instrument:"Instrument",mic:"Mic",line:"Line",auxReturn:"Aux Return"},Rc={instrument:"#ff8c00",mic:"#e91e63",line:"#2196f3",auxReturn:"#9c27b0"},Np={instrument:"🎸",mic:"🎤",line:"🔌",auxReturn:"📥"},Ep=["instrument","mic","line","auxReturn"];function jp(e){return e<=-60?"-∞":`${e>=0?"+":""}${e.toFixed(1)}`}function hu(e){return e===0?"C":e<0?`L${Math.abs(Math.round(e*100))}`:`R${Math.round(e*100)}`}const Pp=({instanceId:e,channelIndex:t,label:n,volume:r,pan:l,mute:s,solo:o,channelType:i,hpEnabled:u,hpFrequency:f,levelL:y,levelR:m,onChangeVolume:p,onChangePan:v,onToggleMute:x,onToggleSolo:k,onChangeChannelType:L,onToggleHp:h,onChangeHpFrequency:c,onChangeLabel:d,fxInserts:g})=>{const S=Rc[i]??"#666",[N,j]=w.useState(!1),[T,U]=w.useState(n),I=w.useRef(null),_=w.useCallback(z=>{v(e,parseFloat(z.target.value))},[e,v]),P=w.useCallback(()=>{x(e,!s)},[e,s,x]),R=w.useCallback(()=>{k(e,!o)},[e,o,k]),V=w.useCallback(z=>{L(e,z.target.value)},[e,L]),H=w.useCallback(()=>{h(e,!u)},[e,u,h]),le=w.useCallback(z=>{c(e,parseFloat(z.target.value))},[e,c]),Y=w.useCallback(()=>{U(n),j(!0),requestAnimationFrame(()=>{var z;return(z=I.current)==null?void 0:z.focus()})},[n]),E=w.useCallback(()=>{const z=T.trim();z&&z!==n&&d(e,z),j(!1)},[T,n,e,d]),O=w.useCallback(z=>{z.key==="Enter"?E():z.key==="Escape"&&j(!1)},[E]),$=f>=100?`${Math.round(f)} Hz`:`${f.toFixed(0)} Hz`;return a.jsxs("div",{className:"channel-strip",style:{"--channel-accent":S},children:[a.jsxs("div",{className:"channel-header",children:[N?a.jsx("input",{ref:I,className:"channel-label-input",type:"text",value:T,onChange:z=>U(z.target.value),onBlur:E,onKeyDown:O,maxLength:32}):a.jsx("span",{className:"channel-label",onClick:Y,title:"Click to rename",children:n||`Ch ${t+1}`}),a.jsxs("span",{className:"channel-type-badge",style:{backgroundColor:`${S}22`,color:S,borderColor:S},title:is[i],children:[a.jsx("span",{className:"channel-type-icon",children:Np[i]}),a.jsx("span",{className:"channel-type-name",children:is[i]})]})]}),a.jsxs("div",{className:"channel-hpf-section",children:[a.jsx("button",{className:`channel-hpf-toggle ${u?"active":""}`,onClick:H,title:`High-pass filter: ${u?"ON":"OFF"}`,children:"HPF"}),u&&a.jsxs("div",{className:"channel-hpf-slider-group",children:[a.jsx("input",{type:"range",min:"20",max:"400",step:"1",value:f,onChange:le,className:"channel-hpf-slider",title:`HPF frequency: ${$}`}),a.jsx("span",{className:"channel-hpf-readout",children:$})]})]}),a.jsx("div",{className:"channel-meter-section",children:a.jsx(vl,{levelL:y,levelR:m,mini:!1})}),a.jsxs("div",{className:"channel-mute-solo",children:[a.jsx("button",{className:`channel-btn mute ${s?"active":""}`,onClick:P,title:s?"Unmute":"Mute",children:"M"}),a.jsx("button",{className:`channel-btn solo ${o?"active":""}`,onClick:R,title:o?"Un-solo":"Solo",children:"S"})]}),a.jsxs("div",{className:"channel-pan",children:[a.jsx("label",{className:"channel-pan-label",children:"Pan"}),a.jsxs("div",{className:"channel-pan-control",children:[a.jsx("input",{type:"range",min:"-1",max:"1",step:"0.01",value:l,onChange:_,className:"channel-pan-slider",title:`Pan: ${hu(l)}`}),a.jsx("span",{className:"channel-pan-value",children:hu(l)})]})]}),a.jsx("div",{className:"channel-fader-section",children:a.jsx(Cp,{value:r,min:-60,max:6,step:.5,size:48,label:"Volume",readout:jp(r),accentColor:S,onChange:z=>p(e,parseFloat(z.toFixed(1)))})}),a.jsx("div",{className:"channel-type-selector",children:a.jsx("select",{value:i,onChange:V,className:"channel-type-select",style:{borderColor:S},children:Ep.map(z=>a.jsx("option",{value:z,children:is[z]},z))})}),g]})},_p=[{value:1,label:"Main"},{value:2,label:"Bus 2"},{value:3,label:"Bus 3"},{value:4,label:"Bus 4"},{value:5,label:"Bus 5"},{value:6,label:"Bus 6"},{value:7,label:"Bus 7"},{value:8,label:"Bus 8"}];function vu(e){return(Math.max(-60,Math.min(6,e))+60)/66*100}function yu(e){return e/100*66-60}const Tp=({plugin:e,onSetControl:t})=>{const n=e.controlValues,r=n.masterVol??0,l=(n.masterMute??0)>=.5,s=n.masterLevelL??-60,o=n.masterLevelR??-60,i=Array.from({length:8},(v,x)=>{const k=x+1;return{index:k,vol:n[`ch${k}Vol`]??0,mute:(n[`ch${k}Mute`]??0)>=.5,route:Math.round(n[`ch${k}Route`]??1),levelL:n[`ch${k}LevelL`]??-60,levelR:n[`ch${k}LevelR`]??-60,volKey:`ch${k}Vol`,muteKey:`ch${k}Mute`,routeKey:`ch${k}Route`}}),u=w.useCallback(v=>{const x=yu(parseFloat(v.target.value));t(e.instanceId,"masterVol",parseFloat(x.toFixed(1)))},[e.instanceId,t]),f=w.useCallback(()=>{t(e.instanceId,"masterMute",l?0:1)},[e.instanceId,l,t]),y=w.useCallback((v,x,k)=>{const L=yu(parseFloat(k.target.value));t(e.instanceId,x,parseFloat(L.toFixed(1)))},[e.instanceId,t]),m=w.useCallback((v,x,k)=>{t(e.instanceId,x,k?0:1)},[e.instanceId,t]),p=w.useCallback((v,x,k)=>{const L=parseInt(k.target.value,10);t(e.instanceId,x,L)},[e.instanceId,t]);return a.jsxs("div",{className:"bus-strip",children:[a.jsxs("div",{className:"bus-master-section",children:[a.jsxs("div",{className:"bus-master-header",children:[a.jsx("span",{className:"bus-master-label",children:"Master"}),a.jsx("button",{className:`bus-btn mute ${l?"active":""}`,onClick:f,title:"Master Mute",children:"M"})]}),a.jsx("div",{className:"bus-master-meter",children:a.jsx(vl,{levelL:s,levelR:o,mini:!0,label:r>-60?`${r.toFixed(1)}dB`:"-∞"})}),a.jsx("div",{className:"bus-master-fader",children:a.jsx("input",{type:"range",min:"0",max:"100",step:"0.5",value:vu(r),onChange:u,className:"bus-fader",title:`Master Volume: ${r.toFixed(1)} dB`})})]}),a.jsx("div",{className:"bus-divider"}),a.jsx("div",{className:"bus-channels",children:i.map(v=>a.jsxs("div",{className:"bus-channel",children:[a.jsxs("span",{className:"bus-channel-label",children:["Ch ",v.index]}),a.jsx("button",{className:`bus-btn mute mini ${v.mute?"active":""}`,onClick:()=>m(v.index,v.muteKey,v.mute),title:`Ch ${v.index} Mute`,children:"M"}),a.jsx("select",{className:"bus-channel-route",value:v.route,onChange:x=>p(v.index,v.routeKey,x),title:`Ch ${v.index} route`,children:_p.map(x=>a.jsx("option",{value:x.value,children:x.label},x.value))}),a.jsx("div",{className:"bus-channel-meter",children:a.jsx(vl,{levelL:v.levelL,levelR:v.levelR,mini:!0})}),a.jsx("div",{className:"bus-channel-fader",children:a.jsx("input",{type:"range",min:"0",max:"100",step:"0.5",value:vu(v.vol),onChange:x=>y(v.index,v.volKey,x),className:"bus-fader mini",title:`Ch ${v.index} Volume: ${v.vol.toFixed(1)} dB`})}),a.jsx("span",{className:"bus-channel-db",children:v.vol>-60?v.vol.toFixed(1):"-∞"})]},v.index))})]})};function Mp(e){if(e<=0)return-60;if(e>=1)return 6;const t=e/.75;if(t<=.001)return-60;const n=20*Math.log10(t);return Math.max(-60,Math.min(6,n))}function Lp(e){if(e<=-60)return 0;if(e>=6)return 1;const t=Math.pow(10,e/20);return Math.min(1,t*.75)}const Rp=({volume:e,mute:t,levelL:n,levelR:r,onVolumeChange:l,onMuteToggle:s,label:o="Master"})=>{const i=Lp(e)*100,u=w.useCallback(y=>{const m=parseFloat(y.target.value)/100,p=Mp(m);l(parseFloat(p.toFixed(1)))},[l]),f=w.useCallback(()=>{s(!t)},[t,s]);return a.jsxs("div",{className:`master-bus ${t?"muted":""}`,children:[a.jsxs("div",{className:"master-bus-header",children:[a.jsx("span",{className:"master-bus-label",children:o}),a.jsx("span",{className:"master-bus-type",children:"Main Out"})]}),a.jsx("div",{className:"master-bus-meters",children:a.jsx(vl,{levelL:n,levelR:r,mini:!1})}),a.jsx("div",{className:"master-bus-controls",children:a.jsx("button",{className:`master-bus-btn mute ${t?"active":""}`,onClick:f,title:"Master Mute",children:"M"})}),a.jsxs("div",{className:"master-bus-fader-section",children:[a.jsx("input",{type:"range",min:"0",max:"100",step:"0.5",value:i,onChange:u,className:"master-bus-fader",title:`Master Volume: ${e.toFixed(1)} dB`,orient:"vertical"}),a.jsx("span",{className:"master-bus-fader-readout",children:t?"MUTED":e>-60?`${e>=0?"+":""}${e.toFixed(1)}`:"-∞"})]}),a.jsxs("div",{className:"master-bus-db-values",children:[a.jsx("span",{className:n>-10?"hot":"",children:n.toFixed(1)}),a.jsx("span",{className:r>-10?"hot":"",children:r.toFixed(1)})]})]})},zp=({scenes:e,loading:t,error:n,onClose:r,onSaveScene:l,onDeleteScene:s,onRecallScene:o,getCurrentState:i})=>{const[u,f]=w.useState(""),[y,m]=w.useState(""),[p,v]=w.useState(!1),[x,k]=w.useState(null),[L,h]=w.useState(null),[c,d]=w.useState(null),[g,S]=w.useState(null),N=n||g,j=w.useCallback(async()=>{const _=u.trim();if(!_)return;const P=i();if(!P){S("No plugin state available. Refresh plugins first.");return}v(!0),S(null);try{const R=y.trim()!==""?parseInt(y.trim(),10):null;await l(_,P,R),f(""),m("")}catch{S("Failed to save scene")}finally{v(!1)}},[u,y,i,l]),T=w.useCallback(async _=>{k(_),S(null);try{await o(_)?(h(_),setTimeout(()=>h(null),700)):S("Recall failed — check PiPedal connection")}catch{S("Recall failed")}finally{k(null)}},[o]),U=w.useCallback(async _=>{S(null),d(null);try{await s(_)}catch{S("Failed to delete scene")}},[s]),I=w.useCallback(_=>{_.key==="Enter"&&j()},[j]);return a.jsxs("div",{className:"scene-manager-overlay",children:[a.jsxs("div",{className:"scene-manager-header",children:[a.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[a.jsx("h2",{children:"Scenes"}),a.jsx("span",{className:"scene-manager-count",children:e.length})]}),a.jsx("button",{className:"scene-close-btn",onClick:r,title:"Close",children:"✕"})]}),a.jsxs("div",{className:"scene-list",children:[t&&e.length===0&&a.jsx("div",{className:"scene-list-loading",children:"Loading scenes..."}),!t&&e.length===0&&a.jsxs("div",{className:"scene-list-empty",children:[a.jsx("span",{children:"No saved scenes yet"}),a.jsx("span",{children:"Use the form below to save the current mixer state."})]}),e.map(_=>a.jsx("div",{className:`scene-card ${L===_.id?"scene-recalled-flash":""} ${x===_.id?"scene-recalling":""}`,children:a.jsxs("div",{className:"scene-card-content",children:[a.jsx("span",{className:"scene-card-name",onClick:()=>T(_.id),title:`Recall "${_.name}"`,children:_.name}),_.midiPc!==null&&_.midiPc!==void 0&&a.jsxs("span",{className:"scene-card-midi",children:["PC#",_.midiPc]}),a.jsxs("div",{className:"scene-card-actions",children:[a.jsx("button",{className:"scene-card-btn recall",onClick:()=>T(_.id),disabled:x===_.id,title:"Recall scene",children:"▶ Recall"}),a.jsx("button",{className:"scene-card-btn delete",onClick:()=>d(_.id),title:"Delete scene",children:"✕"})]})]})},_.id))]}),a.jsxs("div",{className:"scene-save-form",children:[a.jsxs("div",{className:"scene-save-row",children:[a.jsx("input",{className:"scene-name-input",type:"text",placeholder:"Scene name...",value:u,onChange:_=>f(_.target.value),onKeyDown:I,maxLength:60}),a.jsx("button",{className:"scene-save-btn",onClick:j,disabled:p||!u.trim(),children:p?"Saving...":"Save"})]}),a.jsx("div",{className:"scene-save-row",children:a.jsxs("div",{className:"scene-midi-input-group",children:[a.jsx("span",{className:"scene-midi-label",children:"MIDI PC:"}),a.jsx("input",{className:"scene-midi-input",type:"number",min:"0",max:"127",placeholder:"—",value:y,onChange:_=>m(_.target.value)})]})})]}),N&&a.jsx("div",{className:"scene-error",children:N}),c!==null&&a.jsx("div",{className:"scene-confirm-overlay",onClick:()=>d(null),children:a.jsxs("div",{className:"scene-confirm-dialog",onClick:_=>_.stopPropagation(),children:[a.jsx("p",{children:"Delete this scene permanently?"}),a.jsxs("div",{className:"scene-confirm-actions",children:[a.jsx("button",{className:"scene-confirm-cancel",onClick:()=>d(null),children:"Cancel"}),a.jsx("button",{className:"scene-confirm-delete",onClick:()=>U(c),children:"Delete"})]})]})})]})},$p={connected:"#4caf50",connecting:"#ff9800",disconnected:"#9e9e9e",error:"#f44336"},Ip={connected:"Connected to PiPedal",connecting:"Connecting...",disconnected:"Disconnected",error:"Connection Error"},Op=({state:e,onRetry:t})=>a.jsxs("div",{className:"connection-status",children:[a.jsxs("div",{className:"status-indicator",children:[a.jsx("span",{className:"status-dot",style:{backgroundColor:$p[e.status]||"#9e9e9e"}}),a.jsx("span",{className:"status-label",children:Ip[e.status]||e.status})]}),e.error&&a.jsxs("div",{className:"status-error",children:[a.jsx("span",{children:e.error}),t&&a.jsx("button",{className:"retry-btn",onClick:t,children:"Retry"})]})]}),Fp=({insert:e,accentColor:t,onToggleBypass:n,onWetDryChange:r,onRemove:l})=>{const s=w.useCallback(()=>{n(e.id,e.bypassed)},[e.id,e.bypassed,n]),o=w.useCallback(f=>{r(e.id,parseFloat(f.target.value))},[e.id,r]),i=w.useCallback(()=>{l(e.id)},[e.id,l]),u=Math.round(e.wet_dry_mix*100);return a.jsxs("div",{className:`fx-insert-slot ${e.bypassed?"bypassed":""}`,style:{"--fx-accent":t},children:[a.jsxs("div",{className:"fx-insert-header",children:[a.jsx("span",{className:`fx-insert-bypass-btn ${e.bypassed?"active":""}`,onClick:s,title:e.bypassed?"Enable insert":"Bypass insert",children:e.bypassed?"OFF":"ON"}),a.jsx("span",{className:"fx-insert-name",title:e.plugin_name,children:e.plugin_name}),a.jsx("button",{className:"fx-insert-remove",onClick:i,title:"Remove insert",children:"×"})]}),!e.bypassed&&a.jsxs("div",{className:"fx-insert-wetdry",children:[a.jsx("label",{className:"fx-insert-wetdry-label",children:"Mix"}),a.jsx("input",{type:"range",min:"0",max:"1",step:"0.01",value:e.wet_dry_mix,onChange:o,className:"fx-insert-wetdry-slider",title:`Wet/Dry: ${u}%`}),a.jsxs("span",{className:"fx-insert-wetdry-readout",children:[u,"%"]})]})]})},Dp=({channelIndex:e,inserts:t,availablePlugins:n,accentColor:r,onCreateInsert:l,onUpdateInsert:s,onDeleteInsert:o,onToggleBypass:i})=>{const[u,f]=w.useState(!1),[y,m]=w.useState(""),p=w.useMemo(()=>[...t].sort((g,S)=>g.slot_order-S.slot_order),[t]),v=w.useCallback((g,S)=>{s(g,{wet_dry_mix:S})},[s]),x=w.useCallback(g=>{o(g)},[o]),k=w.useCallback(()=>{f(!0),m("")},[]),L=w.useCallback(()=>{f(!1),m("")},[]),h=w.useCallback(g=>{m(g.target.value)},[]),c=w.useCallback(async()=>{if(!y)return;const g=n.find(N=>N.uri===y);if(!g)return;const S=p.length;await l({channel_index:e,plugin_instance_id:g.instanceId??-(Date.now()%1e4),plugin_name:g.name||g.uri.split("/").pop()||"FX",slot_order:S,bypassed:!1,wet_dry_mix:1}),f(!1),m("")},[y,n,p.length,e,l]),d=w.useMemo(()=>n.find(g=>g.uri===y),[n,y]);return a.jsxs("div",{className:"fx-insert-panel",children:[a.jsxs("div",{className:"fx-insert-panel-header",children:[a.jsx("span",{className:"fx-insert-panel-title",children:"FX Inserts"}),!u&&p.length>0&&a.jsx("button",{className:"fx-insert-add-btn",onClick:k,title:"Add FX insert",children:"+ Add"})]}),p.length>0&&a.jsx("div",{className:"fx-insert-slots",children:p.map(g=>a.jsx(Fp,{insert:g,accentColor:r,onToggleBypass:i,onWetDryChange:v,onRemove:x},g.id))}),p.length===0&&!u&&a.jsx("div",{className:"fx-insert-empty",children:a.jsx("button",{className:"fx-insert-add-btn ghost",onClick:k,children:"+ Add FX Insert"})}),u&&a.jsxs("div",{className:"fx-insert-add-form",children:[a.jsxs("select",{className:"fx-insert-plugin-select",value:y,onChange:h,children:[a.jsx("option",{value:"",children:"-- Select Plugin --"}),n.map(g=>a.jsxs("option",{value:g.uri,children:[g.name||g.uri.split("/").pop()||g.uri,g.brand?` (${g.brand})`:""]},g.uri))]}),d&&a.jsxs("div",{className:"fx-insert-plugin-info",children:["I/O: ",d.audioInputs,"in /"," ",d.audioOutputs,"out"]}),a.jsxs("div",{className:"fx-insert-add-actions",children:[a.jsx("button",{className:"fx-insert-confirm-btn",disabled:!y,onClick:c,children:"Add"}),a.jsx("button",{className:"fx-insert-cancel-btn",onClick:L,children:"Cancel"})]})]})]})},Ap=({plugins:e,connectionState:t,pedalboardName:n,lastUpdate:r,onRefresh:l})=>{const{ready:s,setControlValue:o}=fp(),{scenes:i,loading:u,error:f,saveScene:y,deleteScene:m,recallScene:p}=dp(),{portsState:v,refresh:x,connect:k,disconnect:L,disconnectAll:h,actionState:c,actionError:d}=pp(),[g,S]=w.useState(!1),[N,j]=w.useState(!1),[T,U]=w.useState(!1),{insertsByChannel:I,availablePlugins:_,createInsert:P,updateInsert:R,deleteInsert:V,toggleBypass:H}=mp(),le="http://192.168.0.245:8080/",Y=w.useMemo(()=>e.filter(D=>!D.uri.includes("band-bus")&&D.uri.includes("band-channel")),[e]),E=w.useMemo(()=>e.filter(D=>D.uri.includes("band-bus")),[e]),O=Y.length>0,$=E.length>0,z=e.length>0,q=w.useMemo(()=>$?Math.max(...E.map(D=>D.controlValues.masterLevelL??-60)):-60,[E,$]),Qt=w.useMemo(()=>$?Math.max(...E.map(D=>D.controlValues.masterLevelR??-60)):-60,[E,$]),[Ge,Nn]=w.useState(0),[Ye,Kt]=w.useState(!1),zc=w.useCallback(()=>e.length===0?null:{channels:Y.map(D=>({instanceId:D.instanceId,params:{...D.controlValues}})),buses:E.map(D=>({instanceId:D.instanceId,params:{...D.controlValues}}))},[e,Y,E]),qo={0:"instrument",1:"instrument",2:"line",3:"mic",4:"line"},$c={instrument:0,mic:3,line:2,auxReturn:4},Ic=w.useCallback(()=>{S(D=>!D)},[]);return a.jsxs("div",{className:"mixer-page",children:[a.jsxs("header",{className:"mixer-header",children:[a.jsxs("div",{className:"mixer-header-left",children:[a.jsx("h1",{className:"mixer-title",children:"OPLabs Mixer"}),a.jsx(Op,{state:t,onRetry:l})]}),a.jsxs("div",{className:"mixer-header-center",children:[n&&a.jsxs("span",{className:"mixer-pedalboard-name",children:["Pedalboard: ",n]}),t.status==="connected"&&a.jsx("span",{className:`mixer-ws-indicator ${s?"ready":"pending"}`,children:s?"Controls Ready":"Connecting Controls..."})]}),a.jsxs("div",{className:"mixer-header-right",children:[a.jsx("span",{className:"mixer-update-time",children:r>0?`Updated ${new Date(r).toLocaleTimeString()}`:""}),a.jsxs("button",{className:`mixer-scenes-btn ${g?"active":""}`,onClick:Ic,title:"Scene Manager",children:["🎬 Scenes",i.length>0&&a.jsx("span",{className:"mixer-scenes-count",children:i.length})]}),a.jsx("button",{className:"mixer-scenes-btn",onClick:l,children:"↻ Refresh"}),a.jsx("button",{className:`mixer-pipedal-btn ${N?"active":""}`,onClick:()=>j(D=>!D),title:"Toggle PiPedal view",children:"🎛️ PiPedal"}),a.jsx("button",{className:`mixer-patch-btn ${T?"active":""}`,onClick:()=>U(D=>!D),title:"Toggle Patch Bay",children:"🔌 Patch"})]})]}),a.jsxs("div",{className:`mixer-content ${N?"mixer-content-split":""}`,children:[a.jsxs("div",{className:"mixer-content-main",children:[!z&&a.jsxs("div",{className:"mixer-empty",children:[a.jsx("div",{className:"mixer-empty-icon",children:"🎛️"}),a.jsx("h2",{children:"No OPLabs Plugins Found"}),a.jsx("p",{children:"Load OPLabsBandChannel or OPLabsBandBus plugins on the PiPedal pedalboard, then click Refresh."}),t.status!=="connected"&&a.jsxs("p",{className:"mixer-empty-hint",children:["Status: ",a.jsx("strong",{children:t.status}),t.error&&` — ${t.error}`]}),a.jsx("button",{className:"mixer-refresh-btn large",onClick:l,children:"↻ Refresh Now"})]}),O&&a.jsxs("div",{className:"mixer-channels",children:[a.jsxs("div",{className:"mixer-section-header",children:[a.jsx("h2",{children:"Channels"}),a.jsx("span",{className:"mixer-count",children:Y.length})]}),a.jsxs("div",{className:"mixer-channels-grid",children:[Y.map((D,vr)=>{const Pt=D.controlValues,bo=Math.round(Pt.instrument??0)||0;return a.jsx(Pp,{instanceId:D.instanceId,channelIndex:vr,label:D.title||D.pluginName||`Ch ${vr+1}`,volume:Pt.volume??0,pan:Pt.pan??0,mute:(Pt.mute??0)>=.5,solo:(Pt.solo??0)>=.5,channelType:qo[bo]??"instrument",hpEnabled:!1,hpFrequency:80,levelL:Pt.levelL??-60,levelR:Pt.levelR??-60,onChangeVolume:(Xe,Je)=>o(Xe,"volume",Je),onChangePan:(Xe,Je)=>o(Xe,"pan",Je),onToggleMute:(Xe,Je)=>o(Xe,"mute",Je?1:0),onToggleSolo:(Xe,Je)=>o(Xe,"solo",Je?1:0),onChangeChannelType:(Xe,Je)=>{o(Xe,"instrument",$c[Je]??0)},onToggleHp:()=>{},onChangeHpFrequency:()=>{},onChangeLabel:()=>{},fxInserts:a.jsx(Dp,{channelIndex:vr,inserts:I[vr]||[],availablePlugins:_,accentColor:Rc[qo[bo]??"instrument"]??"#666",onCreateInsert:P,onUpdateInsert:R,onDeleteInsert:V,onToggleBypass:H})},D.instanceId)}),a.jsx("div",{className:"mixer-add-channel",children:a.jsx("button",{className:"mixer-add-btn",title:"Add channel (future)",children:"+"})})]})]}),$&&a.jsxs("div",{className:"mixer-buses",children:[a.jsxs("div",{className:"mixer-section-header",children:[a.jsx("h2",{children:"Bus"}),a.jsx("span",{className:"mixer-count",children:E.length})]}),a.jsx("div",{className:"mixer-buses-grid",children:E.map(D=>a.jsx(Tp,{plugin:D,onSetControl:o},D.instanceId))})]}),z&&a.jsxs("div",{className:"mixer-master-section",children:[a.jsx("div",{className:"mixer-section-header",children:a.jsx("h2",{children:"Master"})}),a.jsx("div",{className:"mixer-master-layout",children:a.jsx(Rp,{volume:Ge,mute:Ye,levelL:q,levelR:Qt,onVolumeChange:D=>Nn(D),onMuteToggle:D=>Kt(D)})})]})]})," ",N&&a.jsx("div",{className:"mixer-pipedal-pane",children:a.jsx("iframe",{src:le,title:"PiPedal",className:"mixer-pipedal-iframe",sandbox:"allow-scripts allow-same-origin allow-forms allow-popups"})})]})," ",T&&a.jsx("div",{className:"mixer-patch-pane",children:a.jsx(gp,{portsState:v,onConnect:k,onDisconnect:L,onDisconnectAll:h,onRefresh:x,actionState:c,actionError:d})}),g&&a.jsx(zp,{scenes:i,loading:u,error:f,onClose:()=>S(!1),onSaveScene:y,onDeleteScene:m,onRecallScene:p,getCurrentState:zc})]})},Up=()=>{const{connectionState:e,plugins:t,pedalboardName:n,discover:r,lastUpdate:l}=cp();return a.jsx("div",{className:"app",children:a.jsx(Ap,{plugins:t,connectionState:e,pedalboardName:n,lastUpdate:l,onRefresh:r})})};us.createRoot(document.getElementById("root")).render(a.jsx(_u.StrictMode,{children:a.jsx(Up,{})})); diff --git a/frontend/dist/index.html b/frontend/dist/index.html index fdef174..70b398b 100644 --- a/frontend/dist/index.html +++ b/frontend/dist/index.html @@ -4,8 +4,8 @@ OPLabs Mixer - - + +
diff --git a/frontend/src/components/MixerPage/ChannelStrip.css b/frontend/src/components/MixerPage/ChannelStrip.css index d43f61c..b8378f0 100644 --- a/frontend/src/components/MixerPage/ChannelStrip.css +++ b/frontend/src/components/MixerPage/ChannelStrip.css @@ -3,13 +3,13 @@ flex-direction: column; align-items: center; gap: 6px; - padding: 10px 8px; + padding: 8px 6px; background: var(--surface, #16213e); border: 1px solid var(--border, #2a2a4a); - border-top: 3px solid #666; + border-top: 3px solid var(--channel-accent, #666); border-radius: var(--radius, 8px); - min-width: 80px; - max-width: 100px; + min-width: 90px; + max-width: 110px; transition: border-top-color 0.3s, box-shadow 0.2s; } @@ -17,7 +17,7 @@ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } -/* ---- Header ---- */ +/* ── Header: label + type badge ── */ .channel-header { display: flex; @@ -36,9 +36,152 @@ text-overflow: ellipsis; max-width: 100%; color: var(--text, #eaeaea); + cursor: pointer; + padding: 1px 4px; + border-radius: 3px; + transition: background 0.15s; } -/* ---- Mute / Solo ---- */ +.channel-label:hover { + background: rgba(255, 255, 255, 0.08); +} + +.channel-label-input { + font-size: 0.7rem; + font-weight: 600; + text-align: center; + width: 100%; + padding: 1px 4px; + background: var(--bg, #1a1a2e); + color: var(--text, #eaeaea); + border: 1px solid var(--channel-accent, #666); + border-radius: 3px; + outline: none; +} + +/* ── Channel Type Badge ── */ + +.channel-type-badge { + display: inline-flex; + align-items: center; + gap: 3px; + padding: 1px 6px; + border-radius: 3px; + border: 1px solid; + font-size: 0.55rem; + font-weight: 600; + letter-spacing: 0.3px; + white-space: nowrap; + user-select: none; + line-height: 1.3; +} + +.channel-type-icon { + font-size: 0.75em; + line-height: 1; +} + +.channel-type-name { + line-height: 1; +} + +/* ── HPF Section ── */ + +.channel-hpf-section { + display: flex; + align-items: center; + gap: 3px; + width: 100%; + min-height: 22px; +} + +.channel-hpf-toggle { + flex-shrink: 0; + width: 32px; + height: 18px; + border: 1px solid var(--border, #2a2a4a); + border-radius: 3px; + font-size: 0.5rem; + font-weight: 700; + cursor: pointer; + transition: all 0.15s; + background: var(--bg, #1a1a2e); + color: var(--text-dim, #9e9e9e); + user-select: none; + line-height: 1; + padding: 0; +} + +.channel-hpf-toggle.active { + background: var(--channel-accent, #666); + color: #fff; + border-color: var(--channel-accent, #666); +} + +.channel-hpf-toggle:hover { + opacity: 0.85; +} + +.channel-hpf-slider-group { + display: flex; + align-items: center; + gap: 2px; + flex: 1; + min-width: 0; +} + +.channel-hpf-slider { + flex: 1; + -webkit-appearance: none; + appearance: none; + height: 3px; + background: var(--border, #2a2a4a); + border-radius: 2px; + outline: none; + cursor: pointer; + min-width: 0; +} + +.channel-hpf-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 8px; + height: 10px; + border-radius: 1px; + background: var(--channel-accent, #666); + border: 1px solid rgba(255, 255, 255, 0.3); + cursor: pointer; +} + +.channel-hpf-slider::-moz-range-thumb { + width: 8px; + height: 10px; + border-radius: 1px; + background: var(--channel-accent, #666); + border: 1px solid rgba(255, 255, 255, 0.3); + cursor: pointer; +} + +.channel-hpf-readout { + font-size: 0.5rem; + font-family: monospace; + color: var(--text-dim, #9e9e9e); + min-width: 24px; + text-align: right; + flex-shrink: 0; +} + +/* ── Level Meter Section ── */ + +.channel-meter-section { + width: 100%; + display: flex; + justify-content: center; + flex: 1; + min-height: 50px; +} + +/* ── Mute / Solo ── */ .channel-mute-solo { display: flex; @@ -60,6 +203,7 @@ color: var(--text-dim, #9e9e9e); user-select: none; line-height: 1; + padding: 0; } .channel-btn.mute.active { @@ -78,17 +222,7 @@ opacity: 0.85; } -/* ---- Level Meter Section ---- */ - -.channel-meter-section { - width: 100%; - display: flex; - justify-content: center; - flex: 1; - min-height: 60px; -} - -/* ---- Pan ---- */ +/* ── Pan ── */ .channel-pan { width: 100%; @@ -147,98 +281,44 @@ font-size: 0.55rem; font-family: monospace; color: var(--text-dim, #9e9e9e); - min-width: 20px; + min-width: 22px; text-align: center; } -/* ---- Fader ---- */ +/* ── Volume Knob Section ── */ .channel-fader-section { display: flex; flex-direction: column; align-items: center; - gap: 3px; + gap: 4px; + width: 100%; + padding: 4px 0; +} + +/* ── Channel Type Selector ── */ + +.channel-type-selector { width: 100%; } -.channel-fader { - -webkit-appearance: none; - appearance: none; +.channel-type-select { width: 100%; - height: 100px; - background: linear-gradient(to top, var(--bg, #1a1a2e) 0%, var(--surface-alt, #0f3460) 75%, #4caf50 85%, #ff9800 95%, #f44336 100%); - border-radius: 4px; - outline: none; - cursor: pointer; - border: 1px solid var(--border, #2a2a4a); - writing-mode: vertical-lr; - direction: rtl; -} - -/* WebKit vertical slider */ -.channel-fader::-webkit-slider-runnable-track { - height: 100px; - border-radius: 3px; -} - -.channel-fader::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 18px; - height: 12px; - background: var(--channel-accent, #666); - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 2px; - cursor: pointer; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); - margin-left: -3px; -} - -.channel-fader::-moz-range-track { - height: 100px; - border-radius: 3px; -} - -.channel-fader::-moz-range-thumb { - width: 18px; - height: 12px; - background: var(--channel-accent, #666); - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 2px; - cursor: pointer; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -} - -.channel-fader-readout { - font-size: 0.6rem; - font-family: monospace; - color: var(--text-dim, #9e9e9e); - text-align: center; -} - -/* ---- Instrument Selector ---- */ - -.channel-instrument-selector { - width: 100%; -} - -.channel-instrument-select { - width: 100%; - padding: 3px 4px; + padding: 2px 4px; background: var(--bg, #1a1a2e); color: var(--text, #eaeaea); border: 1px solid var(--border, #2a2a4a); border-radius: 3px; - font-size: 0.6rem; + font-size: 0.55rem; cursor: pointer; outline: none; } -.channel-instrument-select:focus { +.channel-type-select:focus { border-color: var(--channel-accent, #666); } -.channel-instrument-select option { +.channel-type-select option { background: var(--bg, #1a1a2e); color: var(--text, #eaeaea); } diff --git a/frontend/src/components/MixerPage/ChannelStrip.tsx b/frontend/src/components/MixerPage/ChannelStrip.tsx index d3fa9ea..3a6175e 100644 --- a/frontend/src/components/MixerPage/ChannelStrip.tsx +++ b/frontend/src/components/MixerPage/ChannelStrip.tsx @@ -2,8 +2,8 @@ * ChannelStrip — per-input channel control for the OPLabs Mixer Console. * * Mirrors the daemon's MixerChannelStrip parameter set: - * - Volume fader (-96..+12 dB, logarithmic taper) - * - Pan control (-1..1) + * - Volume control (rotary knob, -60..+6 dB, ZoomedDial-style SVG dial) + * - Pan control (-1..1 horizontal slider) * - Mute / Solo buttons * - Channel type selector (Instrument / Mic / Line / AuxReturn) * - High-pass filter toggle + frequency slider @@ -12,11 +12,16 @@ * * Designed as a controlled component: all state is passed in via props; * change callbacks flow upward. No built-in WebSocket or IPC coupling. + * + * The volume RotaryKnob reuses the PiPedal ZoomedDial interaction pattern: + * pointer-based rotation with drag, Shift for fine-tune, double-click reset. */ import React, { useCallback, useRef, useState } from 'react'; import { LevelMeter } from './LevelMeter'; +import RotaryKnob from '../RotaryKnob/RotaryKnob'; import './ChannelStrip.css'; +import '../RotaryKnob/RotaryKnob.css'; // ── Types ────────────────────────────────────────────────────────── @@ -82,36 +87,12 @@ export interface ChannelStripProps { onToggleHp: (instanceId: number, enabled: boolean) => void; onChangeHpFrequency: (instanceId: number, freq: number) => void; onChangeLabel: (instanceId: number, label: string) => void; + + // ── FX Inserts (optional, rendered at bottom of strip) ── + fxInserts?: React.ReactNode; } -// ── dB ↔ Slider position (logarithmic) ──────────────────────────── - -/** - * Map slider position (0–100) to dB value (-60..+6). - * 75% position = 0 dB (unity), logarithmic taper. - */ -function posToDb(pos: number): number { - if (pos <= 0) return -60; - if (pos >= 100) return 6; - const scaled = (pos / 100) / 0.75; - if (scaled <= 0.001) return -60; - const db = 20 * Math.log10(scaled); - return Math.max(-60, Math.min(6, db)); -} - -/** - * Map dB value (-60..+6) to slider position (0–100). - */ -function dbToPos(db: number): number { - if (db <= -60) return 0; - if (db >= 6) return 100; - const linear = Math.pow(10, db / 20); - return Math.min(100, linear * 0.75 * 100); -} - -/** - * Format dB for display. - */ +// ── Format helpers ───────────────────────────────────────────────── function formatDb(db: number): string { if (db <= -60) return '-∞'; return `${db >= 0 ? '+' : ''}${db.toFixed(1)}`; @@ -149,24 +130,15 @@ const ChannelStrip: React.FC = ({ onToggleHp, onChangeHpFrequency, onChangeLabel, + fxInserts, }) => { const accentColor = CHANNEL_TYPE_COLORS[channelType] ?? '#666'; const [editingLabel, setEditingLabel] = useState(false); const [labelDraft, setLabelDraft] = useState(label); const labelInputRef = useRef(null); - const volumeSliderPos = Math.round(dbToPos(volume)); - // ── Handlers ───────────────────────────────────────────────── - const handleVolChange = useCallback( - (e: React.ChangeEvent) => { - const db = posToDb(parseFloat(e.target.value)); - onChangeVolume(instanceId, parseFloat(db.toFixed(1))); - }, - [instanceId, onChangeVolume], - ); - const handlePanChange = useCallback( (e: React.ChangeEvent) => { onChangePan(instanceId, parseFloat(e.target.value)); @@ -339,20 +311,19 @@ const ChannelStrip: React.FC = ({ - {/* ── Volume Fader ── */} + {/* ── Volume Knob ── */}
- )} + onChangeVolume(instanceId, parseFloat(v.toFixed(1)))} /> - {formatDb(volume)}
{/* ── Channel Type Selector ── */} @@ -370,6 +341,9 @@ const ChannelStrip: React.FC = ({ ))} + + {/* ── FX Inserts (injected by parent) ── */} + {fxInserts} ); }; diff --git a/frontend/src/components/MixerPage/FxInsertPanel.css b/frontend/src/components/MixerPage/FxInsertPanel.css new file mode 100644 index 0000000..a883008 --- /dev/null +++ b/frontend/src/components/MixerPage/FxInsertPanel.css @@ -0,0 +1,287 @@ +/* ── FX Insert Panel (per-channel) ── */ + +.fx-insert-panel { + display: flex; + flex-direction: column; + gap: 4px; + width: 100%; + border-top: 1px solid var(--border, #2a2a4a); + padding-top: 4px; + margin-top: 2px; +} + +.fx-insert-panel-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.fx-insert-panel-title { + font-size: 0.5rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--text-dim, #9e9e9e); +} + +/* ── Add button ── */ + +.fx-insert-add-btn { + background: transparent; + border: 1px solid var(--border, #2a2a4a); + color: var(--text-dim, #9e9e9e); + font-size: 0.5rem; + padding: 1px 6px; + border-radius: 3px; + cursor: pointer; + transition: all 0.15s; + line-height: 1.4; +} + +.fx-insert-add-btn:hover { + border-color: var(--accent, #e94560); + color: var(--accent, #e94560); +} + +.fx-insert-add-btn.ghost { + width: 100%; + border-style: dashed; + border-color: var(--border, #2a2a4a); + opacity: 0.6; + padding: 4px 8px; + font-size: 0.55rem; +} + +.fx-insert-add-btn.ghost:hover { + opacity: 1; + border-color: var(--accent, #e94560); + color: var(--accent, #e94560); +} + +/* ── Insert Slots ── */ + +.fx-insert-slots { + display: flex; + flex-direction: column; + gap: 3px; +} + +/* ── Individual Insert Slot ── */ + +.fx-insert-slot { + display: flex; + flex-direction: column; + gap: 2px; + padding: 3px 4px; + background: rgba(0, 0, 0, 0.15); + border-radius: 3px; + border-left: 2px solid var(--fx-accent, #666); + transition: opacity 0.2s; +} + +.fx-insert-slot.bypassed { + opacity: 0.45; + border-left-color: var(--border, #2a2a4a); +} + +/* ── Insert header row ── */ + +.fx-insert-header { + display: flex; + align-items: center; + gap: 4px; + width: 100%; +} + +/* Bypass toggle button */ +.fx-insert-bypass-btn { + flex-shrink: 0; + width: 24px; + height: 14px; + border-radius: 2px; + border: 1px solid var(--border, #2a2a4a); + background: var(--bg, #1a1a2e); + color: var(--text-dim, #9e9e9e); + font-size: 0.45rem; + font-weight: 700; + text-align: center; + line-height: 14px; + cursor: pointer; + transition: all 0.15s; + user-select: none; +} + +.fx-insert-bypass-btn.active { + background: var(--success, #4caf50); + color: #fff; + border-color: var(--success, #4caf50); +} + +.fx-insert-bypass-btn:hover { + opacity: 0.85; +} + +/* Plugin name */ +.fx-insert-name { + flex: 1; + font-size: 0.5rem; + color: var(--text, #eaeaea); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 1.2; +} + +/* Remove button */ +.fx-insert-remove { + flex-shrink: 0; + width: 14px; + height: 14px; + border: none; + background: transparent; + color: var(--text-dim, #9e9e9e); + font-size: 0.7rem; + line-height: 1; + cursor: pointer; + padding: 0; + border-radius: 2px; + transition: all 0.15s; + display: flex; + align-items: center; + justify-content: center; +} + +.fx-insert-remove:hover { + background: var(--error, #f44336); + color: #fff; +} + +/* ── Wet/Dry Mix ── */ + +.fx-insert-wetdry { + display: flex; + align-items: center; + gap: 3px; + width: 100%; +} + +.fx-insert-wetdry-label { + font-size: 0.45rem; + color: var(--text-dim, #9e9e9e); + flex-shrink: 0; + min-width: 16px; +} + +.fx-insert-wetdry-slider { + flex: 1; + -webkit-appearance: none; + appearance: none; + height: 3px; + background: var(--border, #2a2a4a); + border-radius: 2px; + outline: none; + cursor: pointer; + min-width: 0; +} + +.fx-insert-wetdry-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--fx-accent, #666); + border: 1px solid rgba(255, 255, 255, 0.3); + cursor: pointer; +} + +.fx-insert-wetdry-slider::-moz-range-thumb { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--fx-accent, #666); + border: 1px solid rgba(255, 255, 255, 0.3); + cursor: pointer; +} + +.fx-insert-wetdry-readout { + font-size: 0.45rem; + font-family: monospace; + color: var(--text-dim, #9e9e9e); + min-width: 22px; + text-align: right; + flex-shrink: 0; +} + +/* ── Empty state ── */ + +.fx-insert-empty { + display: flex; + width: 100%; +} + +/* ── Add form ── */ + +.fx-insert-add-form { + display: flex; + flex-direction: column; + gap: 4px; + padding: 4px; + background: rgba(0, 0, 0, 0.2); + border-radius: 3px; +} + +.fx-insert-plugin-select { + width: 100%; + padding: 2px 4px; + background: var(--bg, #1a1a2e); + color: var(--text, #eaeaea); + border: 1px solid var(--border, #2a2a4a); + border-radius: 3px; + font-size: 0.5rem; + cursor: pointer; + outline: none; +} + +.fx-insert-plugin-select option { + background: var(--bg, #1a1a2e); + color: var(--text, #eaeaea); +} + +.fx-insert-plugin-info { + font-size: 0.45rem; + color: var(--text-dim, #9e9e9e); +} + +.fx-insert-add-actions { + display: flex; + gap: 4px; +} + +.fx-insert-confirm-btn { + flex: 1; + padding: 2px 6px; + background: var(--accent, #e94560); + color: #fff; + border: none; + border-radius: 3px; + font-size: 0.5rem; + cursor: pointer; + font-weight: 600; +} + +.fx-insert-confirm-btn:disabled { + opacity: 0.4; + cursor: default; +} + +.fx-insert-cancel-btn { + flex: 1; + padding: 2px 6px; + background: transparent; + color: var(--text-dim, #9e9e9e); + border: 1px solid var(--border, #2a2a4a); + border-radius: 3px; + font-size: 0.5rem; + cursor: pointer; +} diff --git a/frontend/src/components/MixerPage/FxInsertPanel.tsx b/frontend/src/components/MixerPage/FxInsertPanel.tsx new file mode 100644 index 0000000..0c41ab9 --- /dev/null +++ b/frontend/src/components/MixerPage/FxInsertPanel.tsx @@ -0,0 +1,201 @@ +/** + * FxInsertPanel — manages all FX inserts for a single mixer channel. + * + * Provides: + * - List of active insert slots (drawn by FxInsertSlot) + * - "Add Insert" button that opens a plugin selector + * - Add/remove/reorder of PiPedal plugins as channel inserts + */ +import React, { useState, useCallback, useMemo } from 'react'; +import FxInsertSlot from './FxInsertSlot'; +import type { FxInsert, AvailablePlugin } from '../../hooks/useFxInserts'; +import './FxInsertPanel.css'; + +interface FxInsertPanelProps { + channelIndex: number; + inserts: FxInsert[]; + availablePlugins: AvailablePlugin[]; + accentColor: string; + onCreateInsert: (insert: { + channel_index: number; + plugin_instance_id: number; + plugin_name?: string; + slot_order?: number; + bypassed?: boolean; + wet_dry_mix?: number; + }) => Promise; + onUpdateInsert: ( + id: string, + update: Partial, + ) => Promise; + onDeleteInsert: (id: string) => Promise; + onToggleBypass: (id: string, currentBypassed: boolean) => void; +} + +const FxInsertPanel: React.FC = ({ + channelIndex, + inserts, + availablePlugins, + accentColor, + onCreateInsert, + onUpdateInsert, + onDeleteInsert, + onToggleBypass, +}) => { + const [adding, setAdding] = useState(false); + const [selectedPlugin, setSelectedPlugin] = useState(''); + + // Sorted inserts by slot_order + const sortedInserts = useMemo( + () => [...inserts].sort((a, b) => a.slot_order - b.slot_order), + [inserts], + ); + + const handleWetDryChange = useCallback( + (id: string, wetDry: number) => { + onUpdateInsert(id, { wet_dry_mix: wetDry } as Partial); + }, + [onUpdateInsert], + ); + + const handleRemove = useCallback( + (id: string) => { + onDeleteInsert(id); + }, + [onDeleteInsert], + ); + + const handleAddClick = useCallback(() => { + setAdding(true); + setSelectedPlugin(''); + }, []); + + const handleCancelAdd = useCallback(() => { + setAdding(false); + setSelectedPlugin(''); + }, []); + + const handlePluginSelect = useCallback( + (e: React.ChangeEvent) => { + setSelectedPlugin(e.target.value); + }, + [], + ); + + const handleConfirmAdd = useCallback(async () => { + if (!selectedPlugin) return; + + // Find the selected plugin to get its details + const plugin = availablePlugins.find((p) => p.uri === selectedPlugin); + if (!plugin) return; + + const nextSlot = sortedInserts.length; + + await onCreateInsert({ + channel_index: channelIndex, + plugin_instance_id: plugin.instanceId ?? -(Date.now() % 10000), + plugin_name: plugin.name || plugin.uri.split('/').pop() || 'FX', + slot_order: nextSlot, + bypassed: false, + wet_dry_mix: 1.0, + }); + + setAdding(false); + setSelectedPlugin(''); + }, [ + selectedPlugin, + availablePlugins, + sortedInserts.length, + channelIndex, + onCreateInsert, + ]); + + const selectedPluginInfo = useMemo( + () => availablePlugins.find((p) => p.uri === selectedPlugin), + [availablePlugins, selectedPlugin], + ); + + return ( +
+
+ FX Inserts + {!adding && sortedInserts.length > 0 && ( + + )} +
+ + {/* Insert slots */} + {sortedInserts.length > 0 && ( +
+ {sortedInserts.map((ins) => ( + + ))} +
+ )} + + {/* Empty state */} + {sortedInserts.length === 0 && !adding && ( +
+ +
+ )} + + {/* Add insert form */} + {adding && ( +
+ + + {selectedPluginInfo && ( +
+ I/O: {selectedPluginInfo.audioInputs}in /{' '} + {selectedPluginInfo.audioOutputs}out +
+ )} + +
+ + +
+
+ )} +
+ ); +}; + +export { FxInsertPanel }; +export default FxInsertPanel; diff --git a/frontend/src/components/MixerPage/FxInsertSlot.tsx b/frontend/src/components/MixerPage/FxInsertSlot.tsx new file mode 100644 index 0000000..f460c1d --- /dev/null +++ b/frontend/src/components/MixerPage/FxInsertSlot.tsx @@ -0,0 +1,98 @@ +/** + * FxInsertSlot — a single FX insert on a channel strip. + * + * Shows: + * - Plugin name + * - Bypass toggle button + * - Wet/dry mix slider + * - Remove button + */ +import React, { useCallback } from 'react'; +import type { FxInsert } from '../../hooks/useFxInserts'; +import './FxInsertPanel.css'; + +interface FxInsertSlotProps { + insert: FxInsert; + accentColor: string; + onToggleBypass: (id: string, currentBypassed: boolean) => void; + onWetDryChange: (id: string, wetDry: number) => void; + onRemove: (id: string) => void; +} + +const FxInsertSlot: React.FC = ({ + insert, + accentColor, + onToggleBypass, + onWetDryChange, + onRemove, +}) => { + const handleBypass = useCallback(() => { + onToggleBypass(insert.id, insert.bypassed); + }, [insert.id, insert.bypassed, onToggleBypass]); + + const handleWetDry = useCallback( + (e: React.ChangeEvent) => { + onWetDryChange(insert.id, parseFloat(e.target.value)); + }, + [insert.id, onWetDryChange], + ); + + const handleRemove = useCallback(() => { + onRemove(insert.id); + }, [insert.id, onRemove]); + + const wetDryPercent = Math.round(insert.wet_dry_mix * 100); + + return ( +
+ {/* Header: plugin name + bypass + remove */} +
+ + {insert.bypassed ? 'OFF' : 'ON'} + + + {insert.plugin_name} + + +
+ + {/* Wet/dry mix slider */} + {!insert.bypassed && ( +
+ + + {wetDryPercent}% +
+ )} +
+ ); +}; + +export { FxInsertSlot }; +export default FxInsertSlot; diff --git a/frontend/src/components/MixerPage/MixerPage.tsx b/frontend/src/components/MixerPage/MixerPage.tsx index f82a23e..534810e 100644 --- a/frontend/src/components/MixerPage/MixerPage.tsx +++ b/frontend/src/components/MixerPage/MixerPage.tsx @@ -4,22 +4,23 @@ import type { SceneState } from '../../hooks/useScenes'; import { useMixerControls } from '../../hooks/useMixerControls'; import { useScenes } from '../../hooks/useScenes'; import { useJackPorts } from '../../hooks/useJackPorts'; +import { useFxInserts } from '../../hooks/useFxInserts'; import { PatchBay } from '../PatchBay/PatchBay'; -import { ChannelStrip } from './ChannelStrip'; +import ChannelStrip, { CHANNEL_TYPE_COLORS } from './ChannelStrip'; +import type { ChannelType } from './ChannelStrip'; import { BusStrip } from './BusStrip'; import { MasterBus } from './MasterBus'; import { SceneManager } from '../Scenes/SceneManager'; import { ConnectionStatus } from '../ConnectionStatus'; +import { FxInsertPanel } from './FxInsertPanel'; import type { ConnectionState } from '../../hooks/usePiPedalWS'; import './MixerPage.css'; import './ChannelStrip.css'; import './BusStrip.css'; import './LevelMeter.css'; -import './InstrumentBadge.css'; -import '../PatchBay/PatchBay.css'; -import './LevelMeter.css'; -import './InstrumentBadge.css'; import './MasterBus.css'; +import './FxInsertPanel.css'; +import '../PatchBay/PatchBay.css'; interface Props { plugins: PluginInstance[]; @@ -67,6 +68,16 @@ export const MixerPage: React.FC = ({ const [showPiPedal, setShowPiPedal] = useState(false); const [showPatchBay, setShowPatchBay] = useState(false); + // ── FX Inserts ────────────────────────────────────────────── + const { + insertsByChannel, + availablePlugins, + createInsert, + updateInsert, + deleteInsert, + toggleBypass, + } = useFxInserts(); + // PiPedal iframe URL — use the Pi's IP since the browser accesses this from another machine const pipedalUrl = `http://192.168.0.245:8080/`; @@ -124,6 +135,29 @@ export const MixerPage: React.FC = ({ }; }, [plugins, channels, buses]); + // ── Channel Strip data mapping (PiPedal → daemon types) ───── + + /** + * Map PiPedal instrument value (0-4) to daemon ChannelType. + * Temporary bridge until the daemon protocol replaces PiPedal. + */ + const instrumentToType: Record = { + 0: 'instrument', // Guitar + 1: 'instrument', // Bass + 2: 'line', // Keys + 3: 'mic', // Vocals + 4: 'line', // Backing + }; + + const typeToInstrument: Record = { + instrument: 0, + mic: 3, + line: 2, + auxReturn: 4, + }; + + // ── User interactions ─────────────────────────────────────── + const toggleScenePanel = useCallback(() => { setScenePanelOpen((prev) => !prev); }, []); @@ -217,13 +251,53 @@ export const MixerPage: React.FC = ({ {channels.length}
- {channels.map((plugin) => ( - - ))} + {channels.map((plugin, index) => { + const cv = plugin.controlValues; + const instrumentVal = Math.round(cv.instrument ?? 0) || 0; + return ( + = 0.5} + solo={(cv.solo ?? 0) >= 0.5} + channelType={instrumentToType[instrumentVal] ?? 'instrument'} + hpEnabled={false} + hpFrequency={80} + levelL={cv.levelL ?? -60} + levelR={cv.levelR ?? -60} + onChangeVolume={(id, db) => setControlValue(id, 'volume', db)} + onChangePan={(id, p) => setControlValue(id, 'pan', p)} + onToggleMute={(id, m) => setControlValue(id, 'mute', m ? 1 : 0)} + onToggleSolo={(id, s) => setControlValue(id, 'solo', s ? 1 : 0)} + onChangeChannelType={(id, type) => { + setControlValue(id, 'instrument', typeToInstrument[type] ?? 0); + }} + onToggleHp={() => {}} + onChangeHpFrequency={() => {}} + onChangeLabel={() => {}} + fxInserts={ + + } + /> + ); + })} {/* Add channel button */}