Skip to main content

​
Zustand Slices (react_ui/src/data/slices/)

Each Zustand store is defined as a slice — a function that returns state + actions for one domain. Slices are composed into full stores in store.ts.

​
Files

SliceStore IDPersisted ToPurpose
transport.tstransport:statedaw.state.jsonBPM, key signature, scale, loop state, playback position. Git-tracked.
mixer.tsmixer:statedaw.mixer.jsonTrack list, volumes, pans, mutes, solos, sends, plugins, notes, sections. Git-tracked — changes trigger commits.
chat.tschat:statedaw.ai.jsonAI chat messages, threads, right panel visibility, active model. Git-tracked.
lyria.tsai:lyriadaw.ai.jsonAI music generation config per track (temperature, density, brightness, prompts). Git-tracked.
collab.ts——Collaboration state: connected users, room info, invite codes, cursor positions. Not persisted.
inlineGenerate.ts——Inline AI generation state: drag region, generation progress, results. Tracks Option+click-drag audio/MIDI generation.
customEditors.ts——Custom editor panel state: which stock plugin UI is active, editor panel visibility.
scriptFxEditors.ts——ScriptFX editor state: open editors, script content, compilation status.
index.ts——Barrel exports.

​
Slice Pattern

Each slice follows this pattern: 
export const TransportStateID = 'transport:state';

export interface TransportState {
  bpm: number;
  // ... state fields
  setBpm: (bpm: number) => void;
  // ... actions
}

export const useTransportSlice: StateCreator<TransportState> = (set, get) => ({
  bpm: 120,
  setBpm: (bpm) => set({ bpm }),
});
Slices are composed in store.ts: 
export const useTransportStore = create<TransportState>()(
  persist((...a) => ({ ...useTransportSlice(...a) }), { name: TransportStateID, ... })
);

​
Design Principles

  • One slice per domain — Don’t mix mixer state with transport state. Each slice owns one file and one StateCreator.
  • Actions inside the slice — State actions (setters, computed updates) live in the slice, not in components.
  • Integer rounding for mixer — setVolume() and setPan() round to integers. This is critical for echo prevention — float precision diffs would cause infinite commit loops.
  • Partial merge for engine updates — When the engine pushes state via events, use setState((prev) => ({ ...prev, ...partial })) to avoid overwriting fields the engine side doesn’t know about.
  • partialize for persistence — Use the partialize option to exclude transient fields (like initialized) from persistence. Only persist what should survive a reload.