audio-mixer-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Choir Practice UI Components
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,205 @@
+# Audio Mixer UI Components
+
+A Vue 3 component library for building audio mixer interfaces with musical navigation and control features. 
+Originally developed for a choir practice application, these components provide audio controls with responsive design and accessibility features.
+
+## Features
+
+- **Professional Audio Controls**: Custom sliders, buttons, and level meters with haptic feedback
+- **Musical Navigation**: Bar/beat input, practice marks, tempo controls with bidirectional time mapping
+- **Responsive Design**: Optimized layouts for mobile, tablet, and desktop
+- **Event-Driven Architecture**: Clean separation between UI and audio engine
+- **Accessibility Ready**: ARIA labels, keyboard navigation, screen reader support
+- **Lightweight**: No heavy UI framework dependencies, just Vue 3
+- **TypeScript Ready**: Full TypeScript definitions included
+
+## Installation
+
+```bash
+npm install audio-mixer-ui
+```
+
+## Quick Start
+
+```vue
+<template>
+  <div class="app">
+    <MixerLayout>
+      <template #controls>
+        <MixerControls />
+      </template>
+      <template #parts>
+        <PartControl 
+          v-for="part in parts" 
+          :key="part.name"
+          :name="part.name"
+          v-model:volume="part.volume"
+          v-model:mute="part.mute"
+          v-model:solo="part.solo"
+        />
+      </template>
+    </MixerLayout>
+  </div>
+</template>
+
+<script setup>
+import { 
+  MixerLayout, 
+  MixerControls, 
+  PartControl 
+} from 'audio-mixer-ui'
+import { ref } from 'vue'
+
+const parts = ref([
+  { name: 'Soprano', volume: 0.8, mute: false, solo: false },
+  { name: 'Alto', volume: 0.7, mute: false, solo: false },
+  { name: 'Tenor', volume: 0.75, mute: false, solo: false },
+  { name: 'Bass', volume: 0.8, mute: false, solo: false }
+])
+</script>
+```
+
+## Core Components
+
+### Layout Components
+- **`MixerLayout`** - Main responsive container with flexible slot system
+- **`MixerControls`** - Transport controls, master volume, and feature toggles
+
+### Audio Controls
+- **`AudioSlider`** - Professional audio fader with level indicators
+- **`AudioButton`** - Responsive button with visual feedback
+- **`PartControl`** - Complete part mixer (volume, mute, solo)
+- **`TriState`** - Mute/Solo toggle control
+
+### Musical Navigation
+- **`BarInput`** - Bar number input with practice mark navigation
+- **`TimeInput`** - Time position display and input
+- **`SpeedInput`** - Playback speed control with percentage display
+
+### Utilities
+- **`BaseNumericInput`** - Foundation for all numeric inputs
+- **`TitleText`** - Responsive title display
+
+## State Management
+
+The library integrates with Pinia stores for reactive state management:
+
+```js
+// stores/audioState.js
+export const useAudioStateStore = defineStore('audioState', {
+  state: () => ({
+    isPlaying: false,
+    currentTime: 0,
+    currentBar: 1,
+    currentBeat: 1,
+    masterVolume: 0.8
+  })
+})
+```
+
+## Event System
+
+Components emit semantic events rather than directly manipulating audio:
+
+```vue
+<template>
+  <MixerControls @play="handlePlay" @stop="handleStop" @set-bar="handleSetBar" />
+</template>
+
+<script setup>
+const handlePlay = () => {
+  // Start audio playback
+}
+
+const handleSetBar = (barNumber) => {
+  // Navigate to specific bar
+}
+</script>
+```
+
+## Musical Data Structure
+
+The components expect musical timing data in this format:
+
+```js
+// Beat mapping array
+const beats = [
+  { bar: 1, beat: 1, repeat: 1, tempo: 80, time: 0, timeSig: 4 },
+  { bar: 1, beat: 2, repeat: 1, tempo: 80, time: 0.75, timeSig: 4 },
+  // ...
+]
+
+// Practice marks object
+const practiceMarks = {
+  A: 1,    // Mark A at bar 1
+  B: 5,    // Mark B at bar 5
+  C: 13    // Mark C at bar 13
+}
+
+// Parts configuration
+const parts = [
+  { name: 'Soprano', volume: 0.75 },
+  { name: 'Alto', volume: 0.7 },
+  // ...
+]
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server with demo
+npm run dev
+
+# Build library
+npm run build
+
+# Build demo
+npm run build:demo
+
+# Run tests
+npm run test
+
+# Lint code
+npm run lint
+```
+
+## Architecture
+
+The library follows an event-driven layered architecture:
+
+1. **Components** - Vue 3 components with composition API
+2. **Composables** - Reusable logic for audio control and state management  
+3. **Stores** - Pinia stores for reactive state
+4. **Services** - Audio engine integration layer
+
+### Key Design Principles
+
+- **Audio Thread Isolation**: Audio processing separated from reactive UI state
+- **Event-Driven Coordination**: Real-time synchronization via event bus
+- **Dynamic Configuration**: Runtime discovery of parts and musical structure
+- **Responsive First**: Mobile-first design with progressive enhancement
+
+## Browser Support
+
+- Modern browsers with ES2020+ support
+- Vue 3.4+
+- Web Audio API for audio features
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Add tests for new functionality
+4. Ensure all tests pass
+5. Submit a pull request
+
+## License
+
+MIT License - see [LICENSE](./LICENSE) file for details.
+
+## Related Projects
+
+This component library was extracted from a larger choir practice application.